自分で迷路ゲームを作ってみよう！

AI・プログラミング
2025.04.29

自分で迷路ゲームを作ってみよう！

～ChatGPTに頼んで、簡単にゲームを作る方法～

みんな、ゲームを作るのは楽しいと思わない？ゲームを作るって、まるで魔法みたいだよね！今日は、自分だけの迷路ゲームを作る方法を紹介するよ。しかも、ChatGPTを使えば、もっと簡単にゲームを作ることができちゃうんだ！

完成したらこんな感じになります→自分だけの迷路ゲーム

どうやってゲームを作るの？

このゲームでは、君が迷路の中で赤いキャラクターを動かして、ゴールを目指すんだ。でも、作るのに難しいことは一切ないよ！なんと、ChatGPTに「迷路ゲームを作りたい！」って言って、プロンプトを送るだけで、コードがもらえるんだ！そして、そのコードをコピーして、君のパソコンに貼り付けるだけで、ゲームが完成するよ。

どうやってChatGPTに頼むの？

最初に、ChatGPTにどんなゲームを作りたいのかを伝えよう。これを「プロンプト」っていうよ。プロンプトは、君が作りたいゲームの内容や、どんなふうに動かしたいかをChatGPTに教える言葉なんだ。

例えば、君が迷路ゲームを作りたいと思ったら、次のようなプロンプトをChatGPTに送るんだ。

プロンプト：

「迷路ゲームを作りたいです！HTMLとJavaScriptを使って、矢印キーで動かしてゴールを目指すゲームを作ってください。迷路は自動でランダムに生成され、ゴールにたどり着くと『クリア！』って表示されるようにしてください。20秒以内にゴールしないとゲームオーバーになるようにしたいです。よろしくお願いします！」

このように、ChatGPTにやりたいことを簡単に伝えるだけで、すぐにゲームのコードがもらえちゃうんだ！

どんなコードをもらえるの？

ChatGPTからもらったコードは、迷路ゲームの作り方が全部書かれたものだよ。このコードを君のパソコンで使うと、すぐにゲームが遊べるようになるんだ！

例えば、次のようなコードをもらえるよ。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ランダム迷路ゲーム（完全版）</title>
<style>
body {
text-align: center;
font-family: sans-serif;
}
canvas {
border: 2px solid black;
margin-top: 10px;
}
#info {
margin: 20px;
font-size: 20px;
}
#retryButton {
padding: 10px 20px;
font-size: 18px;
margin-top: 20px;
display: none;
}
#howto {
margin: 20px;
font-size: 18px;
color: #555;
}
</style>
</head>
<body>

<h1>迷路ゲーム（完全版）</h1>

<div id=”howto”>
【遊び方】<br>
赤い四角（プレイヤー）を矢印キーで操作して、<br>
緑のゴールを目指そう！<br>
※20秒以内にゴールしないとゲームオーバー！
</div>

<div id=”info”>
歩数: <span id=”steps”>0</span>歩 ｜
タイム: <span id=”timer”>0.0</span>秒
</div>

<canvas id=”maze” width=”301″ height=”301″></canvas>

<p id=”message” style=”font-size:24px; color:green;”></p>
<button id=”retryButton”>リトライ</button>

<script>
const canvas = document.getElementById(‘maze’);
const ctx = canvas.getContext(‘2d’);
const message = document.getElementById(‘message’);
const stepsDisplay = document.getElementById(‘steps’);
const timerDisplay = document.getElementById(‘timer’);
const retryButton = document.getElementById(‘retryButton’);

const tileSize = 30;
const mazeSize = 11; // 奇数にする
let maze = [];
let playerX = 1;
let playerY = 1;
let goalX = mazeSize – 2;
let goalY = mazeSize – 2;
let steps = 0;
let startTime = null;
let timerInterval = null;
let gameOver = false;

// 深さ優先探索で迷路生成
function generateMaze() {
maze = Array.from({ length: mazeSize }, () => Array(mazeSize).fill(1)); // 全壁

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]];
}
return array;
}

function carve(x, y) {
const directions = shuffle([
[2, 0], [-2, 0], [0, 2], [0, -2]
]);

for (const [dx, dy] of directions) {
const nx = x + dx;
const ny = y + dy;

if (nx > 0 && ny > 0 && nx < mazeSize && ny < mazeSize && maze[ny][nx] === 1) {
maze[ny][nx] = 0;
maze[y + dy/2][x + dx/2] = 0;
carve(nx, ny);
}
}
}

maze[1][1] = 0;
carve(1, 1);
maze[goalY][goalX] = 0;
}

// 迷路描画
function drawMaze() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let y = 0; y < maze.length; y++) {
for (let x = 0; x < maze[y].length; x++) {
ctx.fillStyle = maze[y][x] === 1 ? ‘black’ : ‘white’;
ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);
}
}
}

// プレイヤー描画
function drawPlayer() {
ctx.fillStyle = ‘red’;
ctx.fillRect(playerX * tileSize, playerY * tileSize, tileSize, tileSize);
}

// ゴール描画
function drawGoal() {
ctx.fillStyle = ‘green’;
ctx.fillRect(goalX * tileSize, goalY * tileSize, tileSize, tileSize);
}

// 画面更新
function draw() {
drawMaze();
drawGoal();
drawPlayer();
}

// タイマー開始
function startTimer() {
startTime = Date.now();
timerInterval = setInterval(() => {
if (gameOver) return;
const elapsed = (Date.now() – startTime) / 1000;
timerDisplay.textContent = elapsed.toFixed(1);
if (elapsed >= 20) {
clearInterval(timerInterval);
message.textContent = “ゲームオーバー！⏰”;
message.style.color = “red”;
retryButton.style.display = “inline-block”;
gameOver = true;
}
}, 100);
}

// タイマー停止
function stopTimer() {
clearInterval(timerInterval);
}

// リトライ
function resetGame() {
playerX = 1;
playerY = 1;
steps = 0;
stepsDisplay.textContent = steps;
timerDisplay.textContent = “0.0”;
message.textContent = “”;
retryButton.style.display = “none”;
gameOver = false;
generateMaze();
draw();
startTimer();
}

// キー操作
document.addEventListener(‘keydown’, (e) => {
if (gameOver) return;

let newX = playerX;
let newY = playerY;
if (e.key === ‘ArrowUp’) newY–;
if (e.key === ‘ArrowDown’) newY++;
if (e.key === ‘ArrowLeft’) newX–;
if (e.key === ‘ArrowRight’) newX++;

if (maze[newY] && maze[newY][newX] === 0) {
playerX = newX;
playerY = newY;
steps++;
stepsDisplay.textContent = steps;
}

if (playerX === goalX && playerY === goalY) {
stopTimer();
message.textContent = `クリア！🎉 歩数:${steps}歩 タイム:${timerDisplay.textContent}秒`;
message.style.color = “green”;
retryButton.style.display = “inline-block”;
gameOver = true;
}

draw();
});

// 初期スタート
generateMaze();
draw();
startTimer();

// リトライボタン
retryButton.addEventListener(‘click’, resetGame);
</script>

</body>
</html>

ゲームの内容

このゲームでは、赤い四角（プレイヤー）を矢印キーで動かして、緑のゴールを目指して進みます。途中で迷路にぶつかっちゃうと、また最初からやり直さないといけないよ！

でも、焦らないで！もし、20秒以内にゴールにたどり着けなかったら、「ゲームオーバー！」になっちゃうけど、もう一度リトライできるボタンもあるから安心してね！

みんなが作れるゲーム！

この迷路ゲームは、君が作ったコードをブラウザで開くだけで、すぐに遊べるんだ！次のステップを見てみよう。

1. まずは、コードをコピーしよう！

ChatGPTからもらったコードをそのままコピーして、パソコンに「maze_game.html」って名前で保存しよう。保存したら、そのファイルをダブルクリックして、ブラウザで開いてみてね。

2. 矢印キーで迷路を動かそう！

ゲームが始まったら、矢印キーでプレイヤーを動かして、ゴールを目指して進んでみよう！うまくいったら、「クリア！」って表示されるよ。

3. 20秒以内にゴールできるかな？

タイマーが動いてるよ！20秒以内にゴールできると、クリア！でも、時間が過ぎると「ゲームオーバー」になっちゃうから、焦らずに頑張って！

他にもできること

君が作った迷路ゲームをもっと楽しくする方法もあるよ！例えば、迷路の難易度を変えたり、タイムアタックモードにしてみたり、もっとたくさんのゴールを作ったりもできるよ。自分だけのゲームにカスタマイズして、みんなと遊んでみてね！

おわりに

どうだったかな？自分だけの迷路ゲームを作れたかな？ChatGPTを使って、自分でゲームを作ることができたら、もっといろんなゲームも作りたくなるよね！次は、どんなゲームを作りたいかな？君のアイデアを教えてね！

ゲーム作りは楽しさがいっぱい！君の次のゲーム作りを楽しみにしているよ！😊

そして、次は君が作りたいゲームをChatGPTにお願いしてみよう！

コメント

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