ChatGPTとCodePenで神経衰弱・メモリーマッチングゲームを作ろう！
今回は、ChatGPTとCodePenを使って、神経衰弱（メモリーマッチング）ゲームを作る方法をご紹介します。神経衰弱ゲームは、裏返したカードをめくり、同じ絵柄のペアを見つけるシンプルなゲームです。自分で作ったゲームで楽しみながらプログラミングを学びましょう！
ゲームの概要
- タイトル: 神経衰弱ゲーム
- ゲーム概要: 裏返されたカードをめくり、同じ絵柄のペアを見つける。全てのペアを見つけたらゲームクリア。
- 使用ツール: ChatGPT、CodePen、ブラウザ
- プラットフォーム: HTML、スマートフォン
手順1: CodePenでプロジェクトを作成
まず、CodePenで新しいプロジェクトを作成しましょう。
- CodePenにアクセスし、ログインします。
- 画面右上の「Pen」をクリックして新しいペンを作成します。
- 「HTML」、「CSS」、「JS」の各タブにコードを書き込んでいきます。
手順2: ChatGPTでゲームのコードを生成
ChatGPTに以下のようなプロンプトを入力して、ゲームのコードを生成してもらいます。
あなたは、ゲームプログラマーとして振る舞ってください。
これからHTMLゲームを作成します。HTMLファイル内部にCSS、Javascript全て書いてください。ゲームの仕様はこちらからインプットするのでその情報に基づいて作成してください。簡単・簡潔なコードを作成してください。仕様は以下の通りです。
ゲームタイトル： メモリーマッチングゲーム：
概要: カードをめくって同じ絵柄のカードを見つける記憶力ゲーム。
操作: カードをタップしてめくる。カードにはベンゼン環の絵と名前が書いてある。
命名の特徴は次の通りである。
１、一直線縮合環系は語尾-acene
２、翼状縮合環系は語尾-aphene
３、２個の同じ環が並んだ縮合環系は語尾-alene
４、１個の環を中心にベンゼン環が集中した縮合環系は語尾-phenylene
プラットフォーム： HTML、PC
モバイルでの操作方法：ボタンを配置。カードをクリックしてめくる。間違えると戻る。
生成されたコードをCodePenに貼り付け
生成されたHTML、CSS、JavaScriptのコードをそれぞれのタブに貼り付けます。コードを貼り付け終えたら、画面右上の「Save」ボタンをクリックしてペンを保存します。
フルページビューでゲームを確認
保存したペンを他のユーザーと共有する際、コードエディタを隠してゲーム画面だけを表示する方法は以下の通りです。
- ペンの上部にある「Change View」ボタンをクリックします。
- ドロップダウンメニューから「Full Page」または「Debug Mode」を選択します。
- 開いたフルページビューのURLをコピーし、共有します。
これで、コードエディタを閉じた状態でゲームをプレイすることができます。初心者でも簡単に作成できる神経衰弱ゲーム、ぜひ挑戦してみてください！
メモリーマッチング
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メモリーマッチングゲーム</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 10px;
}
.card {
width: 100px;
height: 100px;
background-color: #4CAF50;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
color: white;
border-radius: 10px;
}
.card.flipped {
background-color: #ffffff;
color: black;
}
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>メモリーマッチングゲーム</h1>
<div class="game-board" id="gameBoard"></div>
<script>
const cardData = [
{ name: 'Benzene', image: 'https://i.gyazo.com/cbac2b5884e2bd4e7330470a9ac491fe.png' },
{ name: 'Naphthalene', image: 'https://i.gyazo.com/eb0fe82cbe8ce67494c56ad2969492bd.png' },
{ name: 'Anthracene', image: 'https://i.gyazo.com/cb9a64d1c5208a7561d57d27d5d2f62b.jpg' },
{ name: 'Phenanthrene', image: 'https://i.gyazo.com/21ab461dcaf80244eddc3cbad2f31298.png' },
{ name: 'Pyrene', image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Pyrene_structure.png/1280px-Pyrene_structure.png' },
{ name: 'Tetracene', image: 'https://i.gyazo.com/a934fa262c3ac985d6c6c6fe0880ee18.png' },
{ name: 'Chrysene', image: 'https://i.gyazo.com/7e7c13b5abd84f04f259289f95521022.png' },
{ name: 'Coronene', image: 'https://i.gyazo.com/f7099f58022df88250074c8f4617487b.png' },
{ name: 'Benzene', image: 'https://i.gyazo.com/cbac2b5884e2bd4e7330470a9ac491fe.png' },
{ name: 'Naphthalene', image: 'https://i.gyazo.com/eb0fe82cbe8ce67494c56ad2969492bd.png' },
{ name: 'Anthracene', image: 'https://i.gyazo.com/cb9a64d1c5208a7561d57d27d5d2f62b.jpg' },
{ name: 'Phenanthrene', image: 'https://i.gyazo.com/21ab461dcaf80244eddc3cbad2f31298.png' },
{ name: 'Tetracene', image: 'https://i.gyazo.com/a934fa262c3ac985d6c6c6fe0880ee18.png' },
{ name: 'Chrysene', image: 'https://i.gyazo.com/7e7c13b5abd84f04f259289f95521022.png' },
{ name: 'Coronene', image: 'https://i.gyazo.com/f7099f58022df88250074c8f4617487b.png' }
];
let flippedCards = [];
let matchedPairs = 0;
const gameBoard = document.getElementById('gameBoard');
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function createCard(card) {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.name = card.name;
cardElement.dataset.image = card.image;
cardElement.addEventListener('click', flipCard);
return cardElement;
}
function setupGame() {
shuffle(cardData);
cardData.forEach(card => {
gameBoard.appendChild(createCard(card));
});
}
function flipCard() {
if (this.classList.contains('flipped')) return;
if (flippedCards.length === 2) return;
this.classList.add('flipped');
this.innerHTML = `<img src="${this.dataset.image}" alt="${this.dataset.name}" style="width:50px;height:50px;"><br>${this.dataset.name}`;
flippedCards.push(this);
if (flippedCards.length === 2) {
checkForMatch();
}
}
function checkForMatch() {
const [card1, card2] = flippedCards;
if (card1.dataset.name === card2.dataset.name) {
matchedPairs++;
flippedCards = [];
if (matchedPairs === cardData.length / 2) {
setTimeout(() => alert('おめでとうございます！すべてのペアを見つけました！'), 500);
}
} else {
setTimeout(() => {
card1.classList.remove('flipped');
card1.innerHTML = '';
card2.classList.remove('flipped');
card2.innerHTML = '';
flippedCards = [];
}, 1000);
}
}
setupGame();
</script>
</body>
</html>
リンク
今日の、箸休めコンテンツ：ゲーム制作をChatGPTでやってみるシリーズです。
ChatGPTを使って簡単なゲームを作る①: ゲーム作成・全体概要
ChatGPTを使って簡単なゲームを作る②: CodePenの利用開始
ChatGPTを使って簡単なゲームを作る③: ChatGPTにブロック崩しゲームを作ってもらう編
ChatGPTを使って簡単なゲームを作る④: ChatGPTに「ちーかわ」ゲームを作ってもらう編
ChatGPTを使って簡単なゲームを作る⑤: ChatGPTに「ベンゼン環・神経衰弱」ゲームを作ってもらう編