🔺【メモ帳でOK】形を覚える「形記憶ゲーム」を作ろう！【図形クイズで脳トレ】

こんにちは！今回は、「どの形だったか」当てるゲームをつくります。
図形を見てすぐ消える…さて、何だったか覚えてる？😄
パソコンとメモ帳だけでつくれるよ！

◆ どんなゲーム？
◆ 必要なもの
◆ ChatGPTへのお願いの仕方（プロンプト）
◆ ゲームのコード（メモ帳に貼って保存）
◆ あそびかた
◆ まとめ

◆ どんなゲーム？

三角・四角・丸などの形が1つ表示される
数秒後に消える
どの形だったか選んで当てよう！

👦「さっきの…丸だったっけ？」
👧「ちがうよ、四角だよー！」

形記憶ゲーム

◆ 必要なもの

✅ パソコン
✅ メモ帳（Windowsにあるやつ）
✅ ChatGPT（コードを聞く）

◆ ChatGPTへのお願いの仕方（プロンプト）

「子ども向けの図形記憶ゲームをHTMLとJavaScriptだけで作ってください。三角・丸・四角の形が一瞬表示され、数秒後に消えたあと、どの形だったかを選ぶクイズ形式にしてください。メモ帳で保存して遊べるようにして、初心者にもわかりやすいコードにしてください。」

◆ ゲームのコード（メモ帳に貼って保存）

html

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<title>形記憶ゲーム</title>

<style>

body {

text-align: center;

font-family: sans-serif;

margin-top: 50px;

}

#shapeCanvas {

margin: 20px auto;

border: 2px solid #333;

background-color: white;

}

button {

font-size: 1.2em;

padding: 10px 20px;

margin: 10px;

cursor: pointer;

}

#score {

font-size: 1.5em;

margin-bottom: 20px;

}

</style>

</head>

<body>

<h1>形記憶ゲーム</h1>

<div id="score">スコア：0</div>

<canvas id="shapeCanvas" width="200" height="200"></canvas>

<div id="buttons" style="display:none;">

<button onclick="checkAnswer('circle')">まる</button>

<button onclick="checkAnswer('square')">しかく</button>

<button onclick="checkAnswer('triangle')">さんかく</button>

</div>

<button onclick="startGame()">ゲームスタート！</button>

function drawShape(shape) {
ctx.clearRect(0, 0, 200, 200);
ctx.fillStyle = “skyblue”;
ctx.beginPath();

if (shape === “circle”) {
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();
} else if (shape === “square”) {
ctx.fillRect(50, 50, 100, 100);
} else if (shape === “triangle”) {
ctx.moveTo(100, 40);
ctx.lineTo(50, 150);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.fill();
}
}

function nextRound() {
const shapes = [“circle”, “square”, “triangle”];
correctShape = shapes[Math.floor(Math.random() * shapes.length)];

drawShape(correctShape);
document.getElementById(“buttons”).style.display = “none”;

// 1.5秒後に消える
setTimeout(() => {
ctx.clearRect(0, 0, 200, 200);
document.getElementById(“buttons”).style.display = “block”;
}, 1500);
}

function shapeName(shape) {
if (shape === “circle”) return “まる”;
if (shape === “square”) return “しかく”;
if (shape === “triangle”) return “さんかく”;
}
</script>
</body>
</html>