小学生でもできる！五目並べアプリをつくろう【ChatGPTとメモ帳だけ】

AI・プログラミング

小学生でもできる！五目並べアプリをつくろう【ChatGPTとメモ帳だけ】

こんにちは！
今日はパソコンとメモ帳だけで「五目並べ（ごもくならべ）」のゲームを作る方法をしょうかいするよ。
しかもプログラムはChatGPTが作ってくれるから、むずかしいコードは心配いらないよ！

ChatGPTへのプロンプト（たのみかた）

まずはChatGPTに、こんなふうにたのもう！

五目並べの2人対戦ゲームをメモ帳だけで作りたいです。<br> HTMLとJavaScriptで、○と×が交互に打てるようにして、5つ並べたら勝ちと表示してください。<br> 勝敗のあとに「リセット」ボタンで最初から遊べるようにしてください。

メモ帳の使い方（はりつけ〜保存まで）

  1. パソコンで「メモ帳（Notepad）」を開こう

  2. ChatGPTが出してくれたプログラム全部をコピーしてメモ帳にはりつけよう

  3. メモ帳の上の「ファイル」→「名前を付けて保存」をえらぼう

  4. 名前は好きなものでいいけど、さいごに「.html」をつけよう（例：gomoku.html）

  5. 「保存する場所」はデスクトップがオススメ！

  6. 「保存の種類」は「すべてのファイル」にしてね

  7. 保存したファイルをダブルクリックすると、ゲームがはじまる！

 ChatGPTが作ってくれたプログラム（コード）

これが実際にChatGPTが作ってくれたプログラムだよ！
コピーしてメモ帳にそのままはりつけてね👇

<details> <summary>クリックしてコードをひらく</summary>

html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五目並べ（2人対戦）</title>
<style>
body { text-align: center; font-family: sans-serif; }
table { border-collapse: collapse; margin: auto; }
td {
width: 40px; height: 40px;
border: 1px solid #555;
font-size: 28px;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
#info { margin: 10px; font-size: 20px; }
button { margin-top: 10px; padding: 10px 20px; font-size: 16px; }
</style>
</head>
<body>
<h1>五目並べ（2人対戦）</h1>
<div id="info">先手：○</div>
<table id="board"></table>
<button onclick="resetGame()">リセット</button>

<script>
const SIZE = 15;
const board = document.getElementById("board");
const info = document.getElementById("info");
let cells = [];
let turn = "○";
let gameOver = false;

function createBoard() {
board.innerHTML = "";
cells = [];
for (let y = 0; y < SIZE; y++) {
let row = board.insertRow();
cells[y] = [];
for (let x = 0; x < SIZE; x++) {
let cell = row.insertCell();
cell.dataset.x = x;
cell.dataset.y = y;
cell.addEventListener("click", handleClick);
cells[y][x] = cell;
}
}
turn = "○";
gameOver = false;
info.textContent = "先手：" + turn;
}

function handleClick(e) {
if (gameOver) return;
const x = parseInt(e.target.dataset.x);
const y = parseInt(e.target.dataset.y);
if (cells[y][x].textContent !== "") return;

cells[y][x].textContent = turn;

if (checkWin(x, y, turn)) {
info.textContent = turn + "の勝ち！";
gameOver = true;
return;
}

turn = (turn === "○") ? "×" : "○";
info.textContent = "次の手：" + turn;
}

function checkWin(x, y, player) {
const dx = [1, 0, 1, 1];
const dy = [0, 1, 1, -1];

for (let dir = 0; dir < 4; dir++) {
let count = 1;
for (let d = 1; d < 5; d++) {
let nx = x + dx[dir] * d;
let ny = y + dy[dir] * d;
if (nx < 0 || ny < 0 || nx >= SIZE || ny >= SIZE) break;
if (cells[ny][nx].textContent === player) count++;
else break;
}
for (let d = 1; d < 5; d++) {
let nx = x - dx[dir] * d;
let ny = y - dy[dir] * d;
if (nx < 0 || ny < 0 || nx >= SIZE || ny >= SIZE) break;
if (cells[ny][nx].textContent === player) count++;
else break;
}
if (count >= 5) return true;
}
return false;
}

function resetGame() {
createBoard();
}

createBoard();
</script>
</body>
</html>

</details>

 まとめとおすすめの追加アイデア

  • 「リセット」ボタンをつけることで、何回でも遊べるよ！

  • スマホでもあそびやすいようにマスを大きくするのもおすすめ！

  • 「勝ったときに音を出す」「手番の回数を表示する」などのアイデアもおもしろい！

おわりに

これで、自分だけの五目並べアプリができたね！
ChatGPTをつかえば、ほかにも「すごろく」や「シューティングゲーム」なども作れるよ。
どんどん作って、おうちの人や友だちといっしょにあそんでみよう！

コメント

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