1 move (in go, shogi, etc.)'s game

Click here for free DL of the app version that can save data.

No:4126

1188

←

Prev Next

→

1 move (in go, shogi, etc.)
Developer sayaensm｜Date and time 23/6/27 12:42:00
Build time 52.4 sec｜Game capacity 4.14KB｜

Script

ご注文の内容は理解しました。以下が私が作成した1手詰めゲームのコードです。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

ご注文の内容は理解しました。以下が私が作成した1手詰めゲームのコードです。

<!DOCTYPE html>
<html>
<head>
	<title>1手詰めゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #333;
			color: #fff;
			font-size: 2em;
			text-align: center;
		}
		
		#board {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			flex-direction: column;
		}
		
		.row {
			display: flex;
		}
		
		.tile {
			width: 100px;
			height: 100px;
			margin: 5px;
			border-radius: 50%;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 3em;
			color: #333;
			cursor: pointer;
		}
		
		.highlight {
			background-color: #ff0;
			color: #333;
		}
	</style>
</head>
<body>
	<div id="board"></div>
	<script>
		// ゲームの状態を表す配列
		let board = [
			2, 2, 1,
			2, 1, 1,
			1, 1, 1
		];
		
		// 現在選択されているマスのインデックス
		let selectedIndex = null;
		
		// 選択されたマスを表すクラス名
		const SELECTED_CLASS = 'highlight';
		
		// ページが読み込まれたときに実行
		window.onload = function() {
			// 盤面を描画
			drawBoard();
			
			// 全てのタイルにクリックイベントを追加
			document.querySelectorAll('.tile').forEach((tile, index) => {
				tile.addEventListener('click', () => {
					// 選択されたマスのインデックスを更新
					if (selectedIndex === null) {
						// 選択されていない状態だった場合、選択したマスを強調表示
						tile.classList.add(SELECTED_CLASS);
						selectedIndex = index;
					} else {
						// 選択されている状態だった場合、選択したマスと現在選択中のマスを交換
						if (canMove(selectedIndex, index)) {
							swap(selectedIndex, index);
							drawBoard();
							
							// ゲームクリアの判定を行う
							if (isClear()) {
								alert('ゲームクリア！');
							}
						}
						
						// 選択中の状態を解除
						document.querySelectorAll('.tile').forEach(tile => tile.classList.remove(SELECTED_CLASS));
						selectedIndex = null;
					}
				});
			});
		}
		
		// 盤面を描画する関数
		function drawBoard() {
			const boardElement = document.querySelector('#board');
			
			// 既存のタイルを削除
			boardElement.innerHTML = '';
			
			// 新しいタイルを作成
			for (let i = 0; i < 9; i++) {
				const tile = document.createElement('div');
				tile.classList.add('tile');
				if (board[i] === 1) {
					tile.textContent = '🐱';
				} else if (board[i] === 2) {
					tile.textContent = '🐶';
				}
				boardElement.appendChild(tile);
				if ((i + 1) % 3 === 0) {
					boardElement.appendChild(document.createElement('br'));
				}
			}
		}
		
		// 2つのマスが隣り合っているかどうかを判定する関数
		function areAdjacent(index1, index2) {
			const x1 = index1 % 3;
			const y1 = Math.floor(index1 / 3);
			const x2 = index2 % 3;
			const y2 = Math.floor(index2 / 3);
			return Math.abs(x1 - x2) + Math.abs(y1 - y2) === 1;
		}
		
		// 2つのマスが交換可能かどうかを判定する関数
		function canMove(index1, index2) {
			const piece1 = board[index1];
			const piece2 = board[index2];
			if (piece1 === piece2) {
				return false;
			}
			if (!areAdjacent(index1, index2)) {
				return false;
			}
			// 交換しても良いかどうかを判定する
			board[index1] = piece2;
			board[index2] = piece1;
			const isOk = isClear();
			board[index1] = piece1;
			board[index2] = piece2;
			return isOk;
		}
		
		// 2つのマスを交換する関数
		function swap(index1, index2) {
			const piece1 = board[index1];
			board[index1] = board[index2];
			board[index2] = piece1;
		}
		
		// ゲームクリアかどうかを判定する関数
		function isClear() {
			for (let i = 0; i < 8; i++) {
				if (board[i] !== board[i + 1]) {
					return false;
				}
			}
			return true;
		}
	</script>
</body>
</html>