【メモ帳だけで作れる】もぐらたたき風ゲームを作ろう！【子どもでもOK】

AI・プログラミング

🎯【メモ帳だけで作れる】もぐらたたき風ゲームを作ろう！【子どもでもOK】

こんにちは！今回はパソコンと「メモ帳」だけでできるもぐらたたきゲームを作ってみましょう！
難しいコードはChatGPTが用意してくれるので、プログラミング初心者でも安心です😊

◆ こんなゲームができます！

  • 画面に「もぐら」がランダムで出てくる

  • クリックでたたくとスコアアップ！

  • 制限時間が終わったら得点が表示される

  • もぐらたたきゲーム

◆ ゲームを作る準備

必要なのはたったこれだけ！

✅ パソコン
✅ メモ帳（Windowsに入っているものでOK）
✅ ChatGPT（コードを教えてくれる）

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

👇 ChatGPTにこのように聞いてみよう：

「もぐらたたき風ゲームをHTMLとJavaScriptだけで作ってください。子どもが遊べて、メモ帳で保存してすぐ遊べるようにしてください。」

すると、こんなコードをくれました👇

◆ メモ帳に貼り付けるコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>もぐらたたきゲーム</title>
<style>
body {
text-align: center;
font-family: sans-serif;
margin-top: 50px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 10px;
justify-content: center;
}
.hole {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 2em;
}
.mole {
background-color: #8b4513;
color: #fff;
}
#score {
font-size: 1.5em;
margin: 20px;
}
#startBtn {
padding: 10px 20px;
font-size: 1.2em;
cursor: pointer;
}
</style>
</head>
<body>
<h1>もぐらたたきゲーム</h1>
<div id="score">スコア：0</div>
<button id="startBtn" onclick="startGame()">スタート！</button>
<div class="grid" id="gameGrid"></div><script>
const grid = document.getElementById(“gameGrid”);
const scoreDisplay = document.getElementById(“score”);
let score = 0;
let currentMole = null;
let timer;
let gameDuration = 15; // 秒// 9個の穴を作る
for (let i = 0; i < 9; i++) {
const hole = document.createElement(“div”);
hole.classList.add(“hole”);
hole.dataset.index = i;
hole.addEventListener(“click”, () => {
if (hole === currentMole) {
score++;
scoreDisplay.textContent = `スコア：${score}`;
currentMole.classList.remove(“mole”);
currentMole.textContent = “”;
currentMole = null;
}
});
grid.appendChild(hole);
}

function startGame() {
score = 0;
scoreDisplay.textContent = “スコア：0”;
document.getElementById(“startBtn”).disabled = true;

let timeLeft = gameDuration;
timer = setInterval(() => {
if (currentMole) {
currentMole.classList.remove(“mole”);
currentMole.textContent = “”;
}
const index = Math.floor(Math.random() * 9);
const holes = document.querySelectorAll(“.hole”);
currentMole = holes[index];
currentMole.classList.add(“mole”);
currentMole.textContent = “🐹”;

timeLeft–;
if (timeLeft < 0) {
clearInterval(timer);
if (currentMole) {
currentMole.classList.remove(“mole”);
currentMole.textContent = “”;
}
alert(`ゲーム終了！あなたのスコアは「${score}」でした`);
document.getElementById(“startBtn”).disabled = false;
}
}, 1000);
}
</script>
</body>
</html>

◆ あそびかた

  1. メモ帳を開いて、上のコードをまるごとコピー

  2. 「mogura.html」という名前で保存（文字コードはUTF-8に）

  3. ファイルをダブルクリックすると、すぐにゲームスタート！

◆ おまけ：自分でアレンジしよう！

  • スタート音をつける

  • 制限時間をふやす・へらす

  • スコアに応じて「評価」をつける

など、自分だけのゲームにしてみてください🎮
アレンジしたいときは、またChatGPTに聞いてみてくださいね！

◆ まとめ

  • ChatGPTを使えば、メモ帳だけでゲームが作れる！

  • 子どもでもできる「もぐらたたきゲーム」が5分で完成！

  • コードの意味がわからなくても大丈夫。まずは動かしてみよう！

コメント

タイトルとURLをコピーしました