AI game creator

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

No:3717

4198

←

Prev Next

→

Chess and Sushi
Developer User3589｜Date and time 23/6/26 10:48:35
Build time 94.056 sec｜Game capacity 8.717KB｜

Script

チェスをゲーム化して実装しました。以下がコードです。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

チェスをゲーム化して実装しました。以下がコードです。

<!DOCTYPE html>
<html>
<head>
	<title>Chess Game</title>
	<style>
		.square {
			height: 50px;
			width: 50px;
			display: inline-block;
			border: 1px solid black;
			text-align: center;
			font-size: 30px;
			cursor: pointer;
		}

.black {
			background-color: gray;
			color: white;
		}

.white {
			background-color: white;
			color: black;
		}
	</style>
	<script>
		let board = [
			["♜", "♞", "♝", "♛", "♚", "♝", "♞", "♜"],
			["♟", "♟", "♟", "♟", "♟", "♟", "♟", "♟"],
			["", "", "", "", "", "", "", ""],
			["", "", "", "", "", "", "", ""],
			["", "", "", "", "", "", "", ""],
			["", "", "", "", "", "", "", ""],
			["♙", "♙", "♙", "♙", "♙", "♙", "♙", "♙"],
			["♖", "♘", "♗", "♕", "♔", "♗", "♘", "♖"]
		];

let currentSquare = null;
		let possibleMoves = [];
		let isGameOver = false;

function initializeBoard() {
			let boardElement = document.getElementById("board");

for (let i = 0; i < 8; i++) {
				for (let j = 0; j < 8; j++) {
					let square = document.createElement("div");
					square.id = "square" + i + j;
					square.className = "square " + ((i+j) % 2 === 0 ? "white" : "black");
					square.innerText = board[i][j];
					square.onclick = function() {
						if (isGameOver) {
							return;
						}

if (currentSquare === null) {
							if (square.innerText === "") {
								return;
							}

currentSquare = {
								row: i,
								col: j
							};

possibleMoves = getMoves(currentSquare);
							highlightPossibleMoves(possibleMoves);
						} else {
							if (possibleMoves.filter(move => move.row === i && move.col === j).length > 0) {
								board[i][j] = board[currentSquare.row][currentSquare.col];
								board[currentSquare.row][currentSquare.col] = "";
								renderBoard();
							}

unhighlightPossibleMoves(possibleMoves);
							currentSquare = null;
							possibleMoves = [];
						}
					};

boardElement.appendChild(square);
				}

boardElement.appendChild(document.createElement("br"));
			}
		}

function getMoves(square) {
			let moves = [];

switch (board[square.row][square.col]) {
				case "♟":
					// check for forward move
					if (square.row > 0 && board[square.row-1][square.col] === "") {
						moves.push({
							row: square.row-1,
							col: square.col
						});
					}

// check for capturing move
					if (square.row > 0 && square.col > 0 && board[square.row-1][square.col-1] !== "" && board[square.row-1][square.col-1].toUpperCase() !== board[square.row][square.col].toUpperCase()) {
						moves.push({
							row: square.row-1,
							col: square.col-1
						});
					}

if (square.row > 0 && square.col < 7 && board[square.row-1][square.col+1] !== "" && board[square.row-1][square.col+1].toUpperCase() !== board[square.row][square.col].toUpperCase()) {
						moves.push({
							row: square.row-1,
							col: square.col+1
						});
					}

break;
				case "♙":
					// check for forward move
					if (square.row < 7 && board[square.row+1][square.col] === "") {
						moves.push({
							row: square.row+1,
							col: square.col
						});
					}

// check for capturing move
					if (square.row < 7 && square.col > 0 && board[square.row+1][square.col-1] !== "" && board[square.row+1][square.col-1].toUpperCase() !== board[square.row][square.col].toUpperCase()) {
						moves.push({
							row: square.row+1,
							col: square.col-1
						});
					}

if (square.row < 7 && square.col < 7 && board[square.row+1][square.col+1] !== "" && board[square.row+1][square.col+1].toUpperCase() !== board[square.row][square.col].toUpperCase()) {
						moves.push({
							row: square.row+1,
							col: square.col+1
						});
					}

break;
				case "♜":
					// check for left
					for (let i = square.col-1; i >= 0; i--) {
						if (board[square.row][i] === "") {
							moves.push({
								row: square.row,
								col: i
							});
						} else if (board[square.row][i].toUpperCase() !== board[square.row][square.col].toUpperCase()){
							moves.push({
								row: square.row,
								col: i
							});
							break;
						} else {
							break;
						}
					}

// check for right
					for (let i = square.col+1; i < 8; i++) {
						if (board[square.row][i] === "") {
							moves.push({
								row: square.row,
								col: i
							});
						} else if (board[square.row][i].toUpperCase() !== board[square.row][square.col].toUpperCase()){
							moves.push({
								row: square.row,
								col: i
							});
							break;
						} else {
							break;
						}
					}

// check for up
					for (let i = square.row-1; i >= 0; i--) {
						if (board[i][square.col] === "") {
							moves.push({
								row: i,
								col: square.col
							});
						} else if (board[i][square.col].toUpperCase() !== board[square.row][square.col].toUpperCase()){
							moves.push({
								row: i,
								col: square.col
							});
							break;
						} else {
							break;
						}
					}

// check for down
					for (let i = square.row+1; i < 8; i++) {
						if (board[i][square.col] === "") {
							moves.push({
								row: i,
								col: square.col
							});
						} else if (board[i][square.col].toUpperCase() !== board[square.row][square.col].toUpperCase()){
							moves.push({
								row: i,
								col: square.col
							});
							break;
						} else {
							break;
						}
					}

break;
				case "♖":
					// check for left
					for (let i = square.col-1; i >= 0; i--) {
						if (board[square.row][i] === "") {
							moves.push({
								row: square.row,
								col: i
							});
						} else if (board[square.row][i].toUpperCase() !== board[square.row][square.col].toUpperCase()){
							moves.push({
								row: square.row,
								col: i
							});
							break;
						} else {
							break;
						}
					}

break;
				default:
					break;
			}

return moves;
		}

function highlightPossibleMoves(moves) {
			moves.forEach(move => {
				let square = document.getElementById("square" + move.row + move.col);
				square.style.backgroundColor = "yellow";
			});
		}

function unhighlightPossibleMoves(moves) {
			moves.forEach(move => {
				let square = document.getElementById("square" + move.row + move.col);
				square.style.backgroundColor = ((move.row+move.col) % 2 === 0 ? "white" : "black");
			});
		}

function checkWinCondition() {
			let whiteKingIndex = {
				row: null,
				col: null
			};

let blackKingIndex = {
				row: null,
				col: null
			};

for (let i = 0; i < 8; i++) {
				for (let j = 0; j < 8; j++) {
					if (board[i][j] === "♔") {
						whiteKingIndex.row = i;
						whiteKingIndex.col = j;
					} else if (board[i][j] === "♚") {
						blackKingIndex.row = i;
						blackKingIndex.col = j;
					}
				}
			}

if (whiteKingIndex.row === null || whiteKingIndex.col === null) {
				alert("Black wins!");
				isGameOver = true;
			} else if (blackKingIndex.row === null || blackKingIndex.col === null) {
				alert("White wins!");
				isGameOver = true;
			}
		}

window.onload = function() {
			initializeBoard();
		};
	</script>
</head>
<body>
	<div id="board"></div>
</body>
</html>