Chess's game | AI game creator

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

No:93

289

Chess
Developer User1815｜Date and time 23/5/15 1:12:33
Build time 221.64 sec｜Game capacity 8.367KB｜

→ 　

5　

2　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Chess Game</title>
	<script type="text/javascript">
		var turn = "white"; // 初手は白番
		var selectedPiece = null; // 選択された駒

function initBoard() {
			var table = document.createElement("table");
			for (var i = 0; i < 8; i++) {
				var tr = document.createElement("tr");
				for (var j = 0; j < 8; j++) {
					var td = document.createElement("td");
					td.id = "cell_" + i + "_" + j;
					if ((i + j) % 2 === 0) { // チェス盤の柄を作成
						td.className = "white";
					} else {
						td.className = "black";
					}
					td.onclick = cellClick;
					tr.appendChild(td);
				}
				table.appendChild(tr);
			}
			document.body.appendChild(table);
			initPieces();
		}

function initPieces() {
			// 白の駒
			createPiece(0, 0, "rook", "white");
			createPiece(0, 1, "knight", "white");
			createPiece(0, 2, "bishop", "white");
			createPiece(0, 3, "queen", "white");
			createPiece(0, 4, "king", "white");
			createPiece(0, 5, "bishop", "white");
			createPiece(0, 6, "knight", "white");
			createPiece(0, 7, "rook", "white");
			for (var i = 0; i < 8; i++) {
				createPiece(1, i, "pawn", "white");
			}

// 黒の駒
			createPiece(7, 0, "rook", "black");
			createPiece(7, 1, "knight", "black");
			createPiece(7, 2, "bishop", "black");
			createPiece(7, 3, "queen", "black");
			createPiece(7, 4, "king", "black");
			createPiece(7, 5, "bishop", "black");
			createPiece(7, 6, "knight", "black");
			createPiece(7, 7, "rook", "black");
			for (var i = 0; i < 8; i++) {
				createPiece(6, i, "pawn", "black");
			}
		}

function createPiece(row, col, type, color) {
			var piece = document.createElement("div");
			piece.className = "piece " + type;
			piece.style.color = color;
			piece.onclick = pieceClick;
			document.getElementById("cell_" + row + "_" + col).appendChild(piece);
		}

function cellClick() {
			if (selectedPiece !== null) { // 駒が選択されている場合
				var cell = this;
				var row = cell.id.split("_")[1];
				var col = cell.id.split("_")[2];
				var selectedRow = selectedPiece.parentNode.id.split("_")[1];
				var selectedCol = selectedPiece.parentNode.id.split("_")[2];
				if (isLegalMove(selectedRow, selectedCol, row, col)) { // 合法手である場合
					if (cell.children.length > 0) { // 相手の駒を取る場合
						cell.children[0].parentNode.removeChild(cell.children[0]);
					}
					cell.appendChild(selectedPiece); // 駒を移動させる
					selectedPiece = null;
					if (turn === "white") {
						turn = "black";
					} else {
						turn = "white";
					}
				} else {
					alert("その手は打てません。");
				}
			}
		}

function pieceClick() {
			if (this.style.color === turn) { // 駒の色が正しい場合
				selectedPiece = this.cloneNode(true); // 選択された駒を複製する
				this.parentNode.removeChild(this); // 元の駒は削除する
			}
		}

function isLegalMove(fromRow, fromCol, toRow, toCol) {
			var fromCell = document.getElementById("cell_" + fromRow + "_" + fromCol);
			var toCell = document.getElementById("cell_" + toRow + "_" + toCol);
			if (fromCell.children.length === 0) { // 始点に駒がない場合
				return false;
			}
			if (toCell.children.length > 0 && toCell.children[0].style.color === fromCell.children[0].style.color) { // 終点に自分の駒がある場合
				return false;
			}
			var type = fromCell.children[0].className.split(" ")[1];
			switch (type) {
				case "pawn":
					if (fromCol === toCol) { // 前進する場合
						if (fromCell.children[0].style.color === "white") {
							if (toRow == fromRow - 1 && toCell.children.length === 0) { // 1マス前進
								return true;
							}
							if (toRow == fromRow - 2 && fromRow == 6 && toCell.children.length === 0 && document.getElementById("cell_" + (fromRow - 1) + "_" + fromCol).children.length === 0) { // 2マス前進
								return true;
							}
						} else { // 黒の場合
							if (toRow == fromRow + 1 && toCell.children.length === 0) { // 1マス前進
								return true;
							}
							if (toRow == fromRow + 2 && fromRow == 1 && toCell.children.length === 0 && document.getElementById("cell_" + (fromRow + 1) + "_" + fromCol).children.length === 0) { // 2マス前進
								return true;
							}
						}
						return false;
					} else { // 斜めに動く場合
						if (toRow == fromRow - 1 || toRow == fromRow + 1) {
							if (toCell.children.length > 0 && toCell.children[0].style.color !== fromCell.children[0].style.color) { // 相手の駒を取る場合
								return true;
							}
						}
						return false;
					}
					break;
				case "rook":
					if (fromRow !== toRow && fromCol !== toCol) { // 直線移動でない場合
						return false;
					}
					if (fromRow === toRow) { // 横移動
						var step = fromCol < toCol ? 1 : -1;
						for (var i = fromCol + step; i !== toCol; i += step) {
							if (document.getElementById("cell_" + fromRow + "_" + i).children.length > 0) { // 駒が途中にある場合
								return false;
							}
						}
					} else { // 縦移動
						var step = fromRow < toRow ? 1 : -1;
						for (var i = fromRow + step; i !== toRow; i += step) {
							if (document.getElementById("cell_" + i + "_" + fromCol).children.length > 0) { // 駒が途中にある場合
								return false;
							}
						}
					}
					break;
				case "knight":
					if (Math.abs(fromRow - toRow) + Math.abs(fromCol - toCol) !== 3 || Math.abs(fromRow - toRow) === 3 || Math.abs(fromCol - toCol) === 3) { // L字移動でない場合
						return false;
					}
					break;
				case "bishop":
					if (Math.abs(fromRow - toRow) !== Math.abs(fromCol - toCol)) { // 斜め移動でない場合
						return false;
					}
					var rowStep = fromRow < toRow ? 1 : -1;
					var colStep = fromCol < toCol ? 1 : -1;
					var r = fromRow + rowStep;
					var c = fromCol + colStep;
					while (r !== toRow && c !== toCol) {
						if (document.getElementById("cell_" + r + "_" + c).children.length > 0) { // 駒が途中にある場合
							return false;
						}
						r += rowStep;
						c += colStep;
					}
					break;
				case "queen":
					if (fromRow === toRow || fromCol === toCol) { // 横/縦移動
						var step = fromRow === toRow ? fromCol < toCol ? 1 : -1 : fromRow < toRow ? 1 : -1;
						if (fromRow === toRow) { // 横移動
							for (var i = fromCol + step; i !== toCol; i += step) {
								if (document.getElementById("cell_" + fromRow + "_" + i).children.length > 0) { // 駒が途中にある場合
									return false;
								}
							}
						} else { // 縦移動
							for (var i = fromRow + step; i !== toRow; i += step) {
								if (document.getElementById("cell_" + i + "_" + fromCol).children.length > 0) { // 駒が途中にある場合
									return false;
								}
							}
						}
					} else if (Math.abs(fromRow - toRow) === Math.abs(fromCol - toCol)) { // 斜め移動
						var rowStep = fromRow < toRow ? 1 : -1;
						var colStep = fromCol < toCol ? 1 : -1;
						var r = fromRow + rowStep;
						var c = fromCol + colStep;
						while (r !== toRow && c !== toCol) {
							if (document.getElementById("cell_" + r + "_" + c).children.length > 0) { // 駒が途中にある場合
								return false;
							}
							r += rowStep;
							c += colStep;
						}
					} else { // 不正な移動
						return false;
					}
					break;
				case "king":
					if (Math.abs(fromRow - toRow) > 1 || Math.abs(fromCol - toCol) > 1) { // 直線距離が1以下
						return false;
					}
					break;
			}
			return true;
		}
	</script>
	<style type="text/css">
		table {
			border-collapse: collapse;
			margin: auto;
		}

td {
			width: 60px;
			height: 60px;
			border: 1px solid black;
			position: relative;
		}

.white {
			background-color: #EEEEEE;
		}

.black {
			background-color: #BBBBBB;
		}

.piece {
			font-size: 50px;
			position: absolute;
			top: 5px;
			left: 5px;
		}

.rook::before, .rook::after {
			content: "\265C";
		}

.knight {
			font-size: 65px;
			line-height: 55px;
		}

.knight::before {
			content: "\265E";
		}

.bishop::before, .bishop::after {
			content: "\265D";
		}

.queen::before {
			content: "\265B";
		}

.king::before {
			content: "\265A";
		}
	</style>
</head>
<body onload="initBoard()">
</body>
</html>