【かんたん】パックマンみたいなゲームを作ろう！【小学生でもできる】

【かんたん】パックマンみたいなゲームを作ろう！【小学生でもできる】
準備するもの
ChatGPTにお願いする言葉（プロンプト）
1. プロンプト：
ChatGPTが作ってくれたプログラム
ゲームであそぼう！
さらにすごいゲームにしたいときは？
まとめ

【かんたん】パックマンみたいなゲームを作ろう！【小学生でもできる】

こんにちは！
今日は、小学生でも作れる「パックマンみたいなゲーム」の作り方を紹介します！

パソコンと、無料のChatGPT（チャットジーピーティー）があれば、だれでも作れるよ。
むずかしいプログラミングも、やさしく説明するから安心してね！

完成するとこんなアプリができます。パックマンみたいなゲーム

準備するもの

パソコン
インターネット
メモ帳（パソコンに入ってるアプリだよ）
ChatGPT（無料のAIおてつだいロボ）

これだけ！
お金はかからないよ！

ChatGPTにお願いする言葉（プロンプト）

ChatGPTに「こんなゲームを作りたい！」と伝える言葉を考えたよ。

そのままコピーして使ってね！

👇ここから

プロンプト：

パックマンみたいなゲームをHTMLとJavaScriptで作ってください。
矢印キーで動かして、スタートとゴールを決めてください。
すべての通路がつながっていて、ゴールまでたどり着けるようにしてください。
移動は1マスずつ動くようにしてください。
小学生でもわかるようにコードを書いてください。

この「お願い」をChatGPTに送ると、プログラムを作ってくれるよ！

ChatGPTが作ってくれたプログラム

ChatGPTが作ったゲームのプログラムはこれだよ👇

（メモ帳にコピーして、名前を「pacman.html」とかにして保存してね！）

html

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>スタートとゴールのあるパックマン（修正版）</title>

<style>

body { margin: 0; background: black; }

canvas { display: block; margin: 0 auto; background: #222; }

.score { color: white; text-align: center; font-size: 24px; margin-top: 10px; }

</style>

</head>

<body>

<canvas id=“gameCanvas” width=“480” height=“480”></canvas>
<div class=“score”>スコア: <span id=“score”>0</span></div><script>
const canvas = document.getElementById(‘gameCanvas’);
const ctx = canvas.getContext(‘2d’);
const tileSize = 30;
const rows = 16;
const cols = 16;

// 1=かべ、0=道
const map = [
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1],
[1,0,1,1,1,1,1,0,1,0,1,1,1,1,0,1],
[1,0,1,0,0,0,1,0,1,0,1,0,0,1,0,1],
[1,0,1,0,1,0,1,0,1,0,1,0,1,1,0,1],
[1,0,1,0,1,0,1,0,1,0,1,0,0,0,0,1],
[1,0,1,0,1,0,1,0,1,0,1,1,1,1,0,1],
[1,0,1,0,1,0,1,0,1,0,0,0,0,1,0,1],
[1,0,1,0,1,0,1,0,1,1,1,1,0,1,0,1],
[1,0,1,0,1,0,1,0,0,0,0,1,0,1,0,1],
[1,0,1,0,1,0,1,1,1,1,0,1,0,1,0,1],
[1,0,1,0,1,0,0,0,0,1,0,1,0,1,0,1],
[1,0,1,0,1,1,1,1,0,1,0,1,0,1,0,1],
[1,0,0,0,0,0,0,1,0,1,0,0,0,1,0,1],
[1,1,1,1,1,1,0,1,0,1,1,1,0,1,0,1],
[1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1]
];

const pacman = {
x: 1,
y: 1
};

const goal = {
x: 13,
y: 15
};

let dots = [];
let score = 0;

// ドットをならべる
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
if (map[row][col] === 0 && !(row === goal.y && col === goal.x)) {
dots.push({ x: col, y: row });
}
}
}

// 矢印キーで1マスうごく
document.addEventListener(‘keydown’, e => {
let nextX = pacman.x;
let nextY = pacman.y;

if (e.key === ‘ArrowUp’) nextY -= 1;
if (e.key === ‘ArrowDown’) nextY += 1;
if (e.key === ‘ArrowLeft’) nextX -= 1;
if (e.key === ‘ArrowRight’) nextX += 1;

if (map[nextY][nextX] === 0) {
pacman.x = nextX;
pacman.y = nextY;
}
});

function drawDots() {
ctx.fillStyle = ‘white’;
dots.forEach(dot => {
ctx.beginPath();
ctx.arc(dot.x * tileSize + tileSize/2, dot.y * tileSize + tileSize/2, 5, 0, Math.PI * 2);
ctx.fill();
});
}

function drawGoal() {
ctx.fillStyle = ‘lime’;
ctx.fillRect(goal.x * tileSize, goal.y * tileSize, tileSize, tileSize);
}

function checkGoal() {
if (pacman.x === goal.x && pacman.y === goal.y) {
setTimeout(() => {
alert(“ゴールしたよ！すごい！”);
location.reload();
}, 100);
}
}

function drawPacman() {
ctx.beginPath();
ctx.arc(pacman.x * tileSize + tileSize/2, pacman.y * tileSize + tileSize/2, tileSize/2 – 2, 0.2 * Math.PI, 1.8 * Math.PI);
ctx.lineTo(pacman.x * tileSize + tileSize/2, pacman.y * tileSize + tileSize/2);
ctx.fillStyle = ‘yellow’;
ctx.fill();
ctx.closePath();
}