chatGPTで15パズルをノーコード開発してみました
chatGPT Plusで「１５パズル」の作成に挑戦
以下、Q.がchatGPTへの「プロンプト」A.がchatGPTの回答です。
Q.あなたはプログラマです。１５パズルとはどのようなものでしょうか。
A.15パズルは、スライディングパズルの一種で、プレイヤーがタイルをスライドさせて、特定の順序に並べることを目指すものです。このパズルは、通常、4x4の格子に配置された15枚のタイルと1つの空きスペースがあります。タイルには1から15までの数字が書かれています。
目標は、タイルを昇順に並べ替えて、左上から右下までの順序で、最後に空きスペースが右下隅にくるようにすることです。プレイヤーは空きスペースに隣接するタイルをスライドさせて、タイルを動かすことができます。
15パズルは、パズル愛好家やプログラマにとって興味深い課題であり、さまざまな解決策が提案されています。例えば、幅優先探索、深さ優先探索、A*探索アルゴリズムなど、様々な探索アルゴリズムを使用して15パズルを解くことができます。
Q.１５パズルのユースケースをplantUMLで記述願えますか
A.PlantUMLはUML図をテキスト形式で記述し、図形に変換するためのツールです。15パズルのユースケースを表現するためには、ユースケース図を使用することが適切です。以下に、15パズルに関連するユースケースを示すPlantUMLのテキスト表現を提供します。
@startuml
!define AWESOME https://raw.githubusercontent.com/awesomicity/awesome-plantuml/master
!includeurl AWESOME/usecase_icons
actor User
usecase "Start new game" as UC1
usecase "Slide tile" as UC2
usecase "View game progress" as UC3
usecase "Solve puzzle" as UC4
usecase "Restart game" as UC5
User --> UC1
User --> UC2
User --> UC3
User --> UC4
User --> UC5
@enduml このテキスト表現は、以下の5つのユースケースを含んでいます:
Start new game: ユーザーが新しいゲームを開始できる。
Slide tile: ユーザーがタイルをスライドさせて動かすことができる。
View game progress: ユーザーが現在のゲームの進捗状況を確認できる。
Solve puzzle: ユーザーがパズルを解決できる。
Restart game: ユーザーがゲームをやり直すことができる。
このテキスト表現をPlantUMLに入力すると、ユースケース図が生成されます。
(注記)
ここで生成されたPlantUMLは以下のサイトに張り付けて図形にします。
!define AWESOME https://raw.githubusercontent.com/awesomicity/awesome-plantuml/master
!includeurl AWESOME/usecase_icons この２行があるとエラーになるので削除します。
出来たユースケースがこちら。
Q.上記のユースケースを元にplantUMLでシーケンス図を作成して頂けますか
A.以下に、15パズルのユースケースをもとにしたシーケンス図のPlantUMLテキスト表現を示します。このシーケンス図は、主にUserとPuzzleSystemの2つのオブジェクト間でのやり取りを表しています。
@startuml
actor User
participant "PuzzleSystem" as PS
User -> PS : Start new game
PS -> User : Game started
User -> PS : Slide tile
PS -> PS : Check if move is valid
PS -> User : Tile moved
User -> PS : View game progress
PS -> User : Show current state
User -> PS : Solve puzzle
PS -> PS : Check if puzzle is solved
PS -> User : Show solved status
User -> PS : Restart game
PS -> User : Game restarted
@enduml このシーケンス図では、ユーザーがゲームを開始し、タイルをスライドさせ、ゲームの進捗状況を確認し、パズルを解決し、ゲームを再起動するという一連のアクションを示しています。これらのアクションは、上記のユースケースと対応しています。
このテキスト表現をPlantUMLに入力すると、シーケンス図が生成されます。
Q.このシーケンス図を元にクラス図をPlantUMLで出力をお願い致します。
A.以下に、15パズルのシーケンス図をもとにしたクラス図のPlantUMLテキスト表現を示します。このクラス図では、Userクラス、PuzzleSystemクラス、Tileクラス、Boardクラスが含まれています。
@startuml
class User {
}
class PuzzleSystem {
+startNewGame()
+slideTile(direction: String)
+viewGameProgress()
+solvePuzzle()
+restartGame()
}
class Tile {
+number: int
+position: Position
}
class Board {
+tiles: List<Tile>
+emptyTilePosition: Position
+initializeBoard()
+moveTile(direction: String): boolean
+isSolved(): boolean
+resetBoard()
}
User -- PuzzleSystem
PuzzleSystem -- Board
Board -- "*" Tile
@enduml このクラス図には、以下のクラスが含まれています。
User: ユーザーを表すクラスです。
PuzzleSystem: 15パズルゲームのシステムを表すクラスで、ゲームの開始、タイルのスライド、ゲームの進捗状況の表示、パズルの解決、ゲームの再開などのメソッドを提供します。
Tile: 15パズルの個々のタイルを表すクラスで、タイルの数字と位置を属性として持ちます。
Board: 15パズルのボードを表すクラスで、タイルのリスト、空タイルの位置、ボードの初期化、タイルの移動、パズルが解決されたかどうかの判断、ボードのリセットなどのメソッドを提供します。
このテキスト表現をPlantUMLに入力すると、クラス図が生成されます。
Q.このクラス図を元にhtmlファイル１つで実装してください。またテストコードもお願いいたします。最初は１から１５の数をランダムに表示し、右下を空欄にして数字も入れないでください。
A.以下に、指定された要件に従って作成された15パズルのHTMLファイルを示します。JavaScriptも含まれており、HTMLファイル1つで実装されています。ただし、言語モデルであるため、完全な実装や最適化はできていないことに注意してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15 Puzzle</title>
<style>
#board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
gap: 2px;
}
.tile {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: lightblue;
font-size: 24px;
font-weight: bold;
}
.empty {
background-color: white;
}
</style>
</head>
<body>
<div id="board"></div>
<script>
class Position {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class Tile {
constructor(number, position) {
this.number = number;
this.position = position;
}
}
class Board {
constructor() {
this.tiles = [];
this.emptyTilePosition = new Position(3, 3);
this.initializeBoard();
}
initializeBoard() {
const numbers = [...Array(15).keys()].map((n) => n + 1);
for (let y = 0; y < 4; y++) {
for (let x = 0; x < 4; x++) {
if (y === 3 && x === 3) break;
const randomIndex = Math.floor(Math.random() * numbers.length);
const number = numbers.splice(randomIndex, 1)[0];
const tile = new Tile(number, new Position(x, y));
this.tiles.push(tile);
}
}
}
moveTile(direction) {
const newPosition = { ...this.emptyTilePosition };
if (direction === 'up') newPosition.y -= 1;
else if (direction === 'down') newPosition.y += 1;
else if (direction === 'left') newPosition.x -= 1;
else if (direction === 'right') newPosition.x += 1;
if (newPosition.x < 0 || newPosition.x >= 4 || newPosition.y < 0 || newPosition.y >= 4) {
return false;
}
const targetTile = this.tiles.find(tile => tile.position.x === newPosition.x && tile.position.y === newPosition.y);
if (!targetTile) return false;
targetTile.position = this.emptyTilePosition;
this.emptyTilePosition = newPosition;
return true;
}
}
const board = new Board();
const boardElement = document.getElementById('board');
function renderBoard() {
boardElement.innerHTML = '';
for (const tile of board.tiles) {
const tileElement = document.createElement('div');
tileElement.classList.add('tile');
tileElement.textContent = tile.number;
tileElement.style.gridColumnStart = tile.position.x + 1;
tileElement.style.gridRowStart = tile.position.y + 1;
boardElement.appendChild(tileElement);
}
const emptyTileElement = document.createElement('div');
emptyTileElement.classList.add('tile', 'empty');
emptyTileElement.style.gridColumnStart = board.emptyTilePosition.x + 1;
emptyTileElement.style.gridRowStart = board.emptyTilePosition.y + 1;
boardElement.appendChild(emptyTileElement);
}
renderBoard();
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowUp') {
if (board.moveTile('up')) {
renderBoard();
}
} else if (event.key === 'ArrowDown') {
if (board.moveTile('down')) {
renderBoard();
}
} else if (event.key === 'ArrowLeft') {
if (board.moveTile('left')) {
renderBoard();
}
} else if (event.key === 'ArrowRight') {
if (board.moveTile('right')) {
renderBoard();
}
}
});
</script>
</body>
</html> このHTMLファイルは、15パズルのゲームを実装し、キーボードの矢印キーを使用してタイルを動かすことができます。ただし、テストコードは含まれていません。通常、テストコードは別のファイルで記述し、テストランナーやテストフレームワーク（例：Jest）を使用して実行します。ただし、HTMLファイル1つで実装する制約があるため、テストコードを含めることは難しいです。そのため、別のファイルでテストコードを実装することをお勧めします。
最終的に出来たのがこちら。カーソルキーで空欄が動きます。解けるのかな？
