ChatGPT によるリバーシゲームの作成手順を変えてみます。
概要
前回（ChatGPT によるリバーシの作成その２）のように、チャットを続けて機能を追加すると、エラー・修正の繰り返しになったので、最初にある程度仕様を与えて開発してみます。
- 仕様に応じてコードが作成されるが、仕様追加・変更すると以前のコードと継続性が無くなり、新たな問題が発生する
- ある程度仕様を修正した後は、チャットで機能追加・変更を行う
- 盤面の位置ズレについては、表示された盤面の画像を読み込ませても、うまく修正されない
※実際の画面をChatGPTに読み込ませても位置ズレは認識できないようです - 位置を調整した CSS を直接指定すると、CSS に余計な変更を加えて結局ズレる
保守する場合は、ある程度固まったコードをベースにして、コードの一部を ChatGPT に出してもらうくらいしかなさそう
現状の問題点
- パス機能が未実装
- 「もどす」後に、別の手順を行うとNG
盤面の変更過程
いろいろ位置が変わったり、盤面の位置ズレ、画面サイズの変更によるズレなど試行錯誤の結果です。
結局、ChatGPT がコードが書けてもその結果のズレをフィードバックするのが困難で、細かな調整は手作業でやるしかなさそう。
チャットの内容
下記仕様で、リバーシゲームを作成してください
・盤面は、div と css で正方形にする
・盤面の上部に a-h の位置を枠の中央に表示
・盤面の左に 1-8 の位置を枠の中央に表示
・盤面と位置表示がずれないように
・白と黒の駒は、丸くわかりやすいように表示
・初期画面で、白2個と黒2個の駒を中央に表示
・黒先行で、どちらの順番かわかるように表示
・盤面をクリックすると、駒がおけるか判定し、おける場合は、駒を配置し、はさんだ駒を反転表示
・ゲームの履歴を右側に固定長で表示
・リセット機能を実装
・もどす・すすむの機能を実装
・リセット・もどす・すすむのボタンは横幅を統一
チャット中の問題
- 盤面と位置表示がズレて表示される
- いろいろ修正指示を行ったが、ダメで直接 CSS の変更コードを指示
- 履歴の表示が冗長
- フォーマット指定
チャットの共有がエラーになるので、共有は後程。
コード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>リバーシゲーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>リバーシゲーム</h1>
<div class="game-container">
<div class="board-info">
<div id="turn">黒の番です</div>
<button id="reset">リセット</button>
<button id="undo">もどす</button>
<button id="redo">すすむ</button>
<div id="history">履歴</div>
</div>
<div class="board-wrapper">
<div class="column-labels">
<div>a</div><div>b</div><div>c</div><div>d</div><div>e</div><div>f</div><div>g</div><div>h</div>
</div>
<div class="board-container">
<div class="row-labels">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div>
</div>
<div id="board"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.game-container {
display: flex;
justify-content: center;
gap: 20px;
}
.board-info {
display: flex;
flex-direction: column;
align-items: center;
}
#turn {
font-size: 18px;
margin-bottom: 10px;
}
button {
width: 100px;
margin: 5px 0;
}
#history {
width: 100px;
height: 200px;
overflow-y: scroll;
border: 1px solid #000;
margin-top: 10px;
}
.board-wrapper {
display: grid;
grid-template-columns: 50px repeat(8, 50px);
grid-template-rows: 50px repeat(8, 50px);
justify-content: center;
margin-top: 20px; /* 追加: 縦のスペースを調整 */
}
.column-labels, .row-labels {
display: grid;
gap: 0;
}
.column-labels {
grid-column: 2 / span 8;
display: grid;
grid-template-columns: repeat(8, 50px);
text-align: center;
}
.row-labels {
grid-row: 2 / span 8;
display: grid;
grid-template-rows: repeat(8, 50px);
text-align: center;
justify-items: center;
}
#board {
grid-column: 2 / span 8;
grid-row: 2 / span 8;
display: grid;
grid-template-columns: repeat(8, 50px);
grid-template-rows: repeat(8, 50px);
gap: 1px;
position: absolute;
top: 140px;
left: calc(50% - 115px); /* 画面の中央に配置 */
}
.cell {
width: 50px;
height: 50px;
background-color: green;
position: relative;
}
.piece {
border-radius: 50%;
width: 80%;
height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.black {
background-color: black;
}
.white {
background-color: white;
}
script.js
const board = document.getElementById('board');
const turnDisplay = document.getElementById('turn');
const resetButton = document.getElementById('reset');
const undoButton = document.getElementById('undo');
const redoButton = document.getElementById('redo');
const historyDisplay = document.getElementById('history');
let boardState = Array(8).fill().map(() => Array(8).fill(null));
let history = [];
let currentHistoryIndex = -1;
let currentTurn = 'black';
const columns = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']; // 列名の定義
const directions = [
[-1, 0], [1, 0], [0, -1], [0, 1], // 上、下、左、右
[-1, -1], [-1, 1], [1, -1], [1, 1] // 斜め方向
];
// 初期の駒配置
function initializeBoard() {
board.innerHTML = '';
boardState = Array(8).fill().map(() => Array(8).fill(null));
boardState[3][3] = 'white';
boardState[3][4] = 'black';
boardState[4][3] = 'black';
boardState[4][4] = 'white';
history = [];
currentHistoryIndex = -1;
renderBoard();
updateHistory();
}
// ボードの描画
function renderBoard() {
board.innerHTML = '';
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.row = row;
cell.dataset.col = col;
cell.addEventListener('click', handleCellClick);
const piece = boardState[row][col];
if (piece) {
const pieceElement = document.createElement('div');
pieceElement.classList.add('piece', piece);
cell.appendChild(pieceElement);
}
board.appendChild(cell);
}
}
}
// 駒のクリック処理
function handleCellClick(e) {
const row = parseInt(e.target.dataset.row);
const col = parseInt(e.target.dataset.col);
if (boardState[row][col]) return;
if (isValidMove(row, col, currentTurn)) {
makeMove(row, col, currentTurn);
history = history.slice(0, currentHistoryIndex + 1); // 履歴を更新
const move = `${columns[col]}${row + 1}`; // 置いた場所を「列+行」で記録
history.push({ board: JSON.parse(JSON.stringify(boardState)), move, player: currentTurn });
currentHistoryIndex++;
switchTurn();
renderBoard();
updateHistory();
}
}
// 有効な手かどうかを判定する
function isValidMove(row, col, color) {
// 8方向のチェックを行い、少なくとも1方向で挟める駒があればtrueを返す
return directions.some(direction => canFlip(row, col, direction, color));
}
// 駒を挟めるかどうかを確認
function canFlip(row, col, direction, color) {
let [dx, dy] = direction;
let x = row + dx;
let y = col + dy;
let hasOpponentPiece = false;
while (x >= 0 && x < 8 && y >= 0 && y < 8 && boardState[x][y] && boardState[x][y] !== color) {
hasOpponentPiece = true;
x += dx;
y += dy;
}
// 最後に自分の色の駒があれば、その間にある駒を挟めると判断
return hasOpponentPiece && x >= 0 && x < 8 && y >= 0 && y < 8 && boardState[x][y] === color;
}
// 駒を配置し、挟んだ駒を反転させる
function makeMove(row, col, color) {
boardState[row][col] = color;
flipPieces(row, col, color);
}
// 駒を反転させる処理
function flipPieces(row, col, color) {
directions.forEach(direction => {
if (canFlip(row, col, direction, color)) {
let [dx, dy] = direction;
let x = row + dx;
let y = col + dy;
while (x >= 0 && x < 8 && y >= 0 && y < 8 && boardState[x][y] && boardState[x][y] !== color) {
boardState[x][y] = color; // 駒を反転
x += dx;
y += dy;
}
}
});
}
// ターンの切り替え
function switchTurn() {
currentTurn = currentTurn === 'black' ? 'white' : 'black';
turnDisplay.textContent = currentTurn === 'black' ? '黒の番です' : '白の番です';
}
// リセット
resetButton.addEventListener('click', initializeBoard);
// 履歴を戻す
undoButton.addEventListener('click', () => {
if (currentHistoryIndex > 0) {
currentHistoryIndex--;
boardState = JSON.parse(JSON.stringify(history[currentHistoryIndex].board));
renderBoard();
updateHistory();
}
});
// 履歴を進める
redoButton.addEventListener('click', () => {
if (currentHistoryIndex < history.length - 1) {
currentHistoryIndex++;
boardState = JSON.parse(JSON.stringify(history[currentHistoryIndex].board));
renderBoard();
updateHistory();
}
});
// 履歴表示の更新
function updateHistory() {
historyDisplay.innerHTML = history.map((entry, index) => {
const playerName = entry.player === 'black' ? '黒' : '白'; // プレイヤー名を日本語に
return `<div>${index + 1}. ${playerName}: ${entry.move}</div>`;
}).join('');
}
// ゲーム開始時の初期化
initializeBoard();