小学生でもできる！ChatGPTにお願いして「動物神経衰弱ゲーム」を作ろう！

小学生でもできる！ChatGPTにお願いして「動物神経衰弱ゲーム」を作ろう！
まずはChatGPTにお願いしよう！
1. ✏️送るプロンプト
もらったプログラムをメモ帳に貼ろう！
ブラウザで開いてみよう！
できあがったプログラム（例）
まとめ

小学生でもできる！ChatGPTにお願いして「動物神経衰弱ゲーム」を作ろう！

こんにちは！
今日は小学生のみんなに、「ChatGPT」を使って自分だけのゲームを作る方法を紹介するよ！

作るゲームは、動物の絵をそろえる神経衰弱ゲーム！
パソコンに入っているメモ帳だけで作れるから安心してね。

こんなゲームができるよ→動物の絵をそろえる神経衰弱ゲーム！

まずはChatGPTにお願いしよう！

ChatGPTに下の言葉（プロンプト）をそのままコピーして送ってみよう！

✏️送るプロンプト

このプロンプトを送ると、ChatGPTがすぐにゲームのプログラムを作ってくれるよ！

もらったプログラムをメモ帳に貼ろう！

ChatGPTがくれたプログラムを、ぜんぶコピーして、
**パソコンの「メモ帳」**に貼りつけよう！

貼ったら、ファイル名をこうして保存しよう！

✅ ファイル名　→　animal_memory.html
✅ 「ファイルの種類」はすべてのファイルにする

ブラウザで開いてみよう！

保存したファイルをダブルクリックすると、
ブラウザ（Google ChromeやEdge）が開くよ！

すると……
かわいい動物たちの神経衰弱ゲームができる！✨

同じ動物を2枚そろえるとカードが開きっぱなしになり、
全部そろえると「やったね！ぜんぶそろったよ！🎉」とメッセージが出るよ！

できあがったプログラム（例）

こちらが実際のプログラムだよ！（このまま使ってもOK！）

👇👇👇

html

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<title>動物神経衰弱</title>

<style>

body {

font-family: sans-serif;

text-align: center;

margin-top: 20px;

}

#game {

display: grid;

grid-template-columns: repeat(4, 80px);

grid-gap: 10px;

justify-content: center;

margin-top: 20px;

}

.card {

width: 80px;

height: 100px;

background-color: #66cc99;

color: #66cc99;

font-size: 20px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

border-radius: 10px;

cursor: pointer;

user-select: none;

}

.open {

background-color: #fff;

color: #333;

border: 2px solid #66cc99;

}

.matched {

background-color: #ccc;

color: #999;

pointer-events: none;

}

#message {

margin-top: 20px;

font-size: 24px;

color: #ff6699;

font-weight: bold;

}

</style>

</head>

<body>

<h1>動物神経衰弱</h1>
<p>同じ動物を見つけよう！</p>

animals.forEach(animal => {
deck.push({…animal});
deck.push({…animal});
});

deck.sort(() => Math.random() – 0.5);

const game = document.getElementById(‘game’);
const message = document.getElementById(‘message’);
let firstCard = null;
let secondCard = null;
let lock = false;
let matchedCount = 0;

deck.forEach(cardInfo => {
const card = document.createElement(‘div’);
card.className = ‘card’;
card.dataset.name = cardInfo.name;
card.dataset.emoji = cardInfo.emoji;
card.addEventListener(‘click’, flipCard);
game.appendChild(card);
});

function flipCard() {
if (lock) return;
if (this.classList.contains(‘open’) || this.classList.contains(‘matched’)) return;

this.classList.add(‘open’);
this.innerHTML = `<div style=”font-size:30px”>${this.dataset.emoji}</div><div>${this.dataset.name}</div>`;

if (!firstCard) {
firstCard = this;
} else {
secondCard = this;
checkMatch();
}
}

function checkMatch() {
if (firstCard.dataset.name === secondCard.dataset.name) {
firstCard.classList.add(‘matched’);
secondCard.classList.add(‘matched’);
matchedCount++;
resetTurn();

if (matchedCount === animals.length) {
message.textContent = “やったね！ぜんぶそろったよ！🎉”;
}
} else {
lock = true;
setTimeout(() => {
firstCard.classList.remove(‘open’);
secondCard.classList.remove(‘open’);
firstCard.innerHTML = ”;
secondCard.innerHTML = ”;
resetTurn();
}, 1000);
}
}