【メモ帳だけで作れる】動くキャラの鬼ごっこゲーム【子どもでも楽しい！】

AI・プログラミング
2025.04.25

🏃【メモ帳だけで作れる】動くキャラの鬼ごっこゲーム【子どもでも楽しい！】

こんにちは！今回はパソコンと「メモ帳」だけでできる「動くキャラの鬼ごっこゲーム」を作ってみましょう！

◆ どんなゲーム？

  • 画面の中を「にげるキャラ」が動き回る

  • プレイヤーはマウスでキャラをタッチしてつかまえる

  • 制限時間内に何回つかまえられるかでスコアが決まる！

  • 大きい画面でやると結構難しいです。
  • 動くキャラの鬼ごっこゲーム

◆ ゲームで遊ぶ準備

必要なもの：

✅ パソコン
✅ メモ帳（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: 0;
overflow: hidden;
}
#gameArea {
position: relative;
width: 100vw;
height: 100vh;
background-color: #d0f0ff;
}
#runner {
position: absolute;
width: 80px;
height: 80px;
background-color: #ff6666;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
cursor: pointer;
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 1.5em;
background: #fff;
padding: 5px 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="gameArea">
<div id="score">スコア：0</div>
<div id="runner">👻</div>
</div><script>
const runner = document.getElementById(“runner”);
const gameArea = document.getElementById(“gameArea”);
const scoreDisplay = document.getElementById(“score”);
let score = 0;
let timer = null;// キャラの動きをランダムにする関数
function moveRunner() {
const maxX = gameArea.clientWidth – runner.offsetWidth;
const maxY = gameArea.clientHeight – runner.offsetHeight;
const x = Math.floor(Math.random() * maxX);
const y = Math.floor(Math.random() * maxY);

runner.style.left = x + “px”;
runner.style.top = y + “px”;
}

// キャラをクリックしたらスコアアップ！
runner.addEventListener(“click”, () => {
score++;
scoreDisplay.textContent = `スコア：${score}`;
moveRunner();
});

// ゲームスタート（自動移動）
function startGame() {
score = 0;
scoreDisplay.textContent = “スコア：0”;
moveRunner();

// 1秒ごとに動く
timer = setInterval(() => {
moveRunner();
}, 1000);

// 20秒でゲーム終了
setTimeout(() => {
clearInterval(timer);
alert(`ゲーム終了！あなたのスコアは「${score}」でした！`);
}, 20000);
}

// ゲーム開始時に自動スタート
window.onload = startGame;
</script>
</body>
</html>

◆ あそびかた

  1. メモ帳を開く

  2. 上のコードをコピー＆ペースト

  3. 「onigokko.html」という名前で保存（UTF-8）

  4. 保存したファイルをダブルクリックすると、ゲームスタート！

◆ 自分でアレンジしてみよう！

  • 👻キャラを画像にする

  • スタートボタンをつける

  • 難易度（スピード）を選べるようにする

など、アイデアしだいで無限にバージョンアップできます！
「こうしたいな」と思ったら、ChatGPTにお願いしてみよう！

◆ おわりに

  • もぐらたたきの次は、動くキャラで鬼ごっこ！

  • 難しいことはChatGPTにまかせて、楽しく遊ぼう

  • 小学生でも遊べる、自分だけのゲームが作れる！

👶 お子さま向けの学習ブログにもぴったりの内容です！

コメント

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