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

No:1498

295

←

Prev Next

→

3×A person who writes a circle in square 3 and a p..ALL
Developer User3293｜Date and time 23/6/18 17:38:41
Build time 51.511 sec｜Game capacity 4.343KB｜

Script

Tic Tac Toe

クリックしてスタート

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title> Tic Tac Toe </title>
	<style>
		body {
			font-size: 2rem;
			text-align: center;
		}
		table {
			margin: 0 auto;
			border-collapse: collapse;
			width: 80vw;
			max-width: 400px;
			height: 80vw;
			max-height: 400px;
		}
		td {
			border: 1px solid black;
			text-align: center;
			font-weight: bold;
			cursor: pointer;
			font-size: 5rem;
		}
	</style>
</head>
<body>
	<h1> Tic Tac Toe </h1>
	<table id="gameBoard">
		<tr>
			<td id="0"></td>
			<td id="1"></td>
			<td id="2"></td>
		</tr>
		<tr>
			<td id="3"></td>
			<td id="4"></td>
			<td id="5"></td>
		</tr>
		<tr>
			<td id="6"></td>
			<td id="7"></td>
			<td id="8"></td>
		</tr>
	</table>
	<h2 id="message"> クリックしてスタート </h2>
	<script>
		// 初期化
		let currentPlayer = "O";
		let board = [0, 1, 2, 3, 4, 5, 6, 7, 8];
		const gameBoard = document.querySelector("#gameBoard");
		const message = document.querySelector("#message");

// クリックされたらマス目を変更する
		gameBoard.addEventListener("click", event => {
			const cellId = Number(event.target.id);
			if (typeof board[cellId] == "number") {
				event.target.textContent = currentPlayer;
				board[cellId] = currentPlayer;
				if (checkWin(currentPlayer)) {
					message.textContent = currentPlayer + "の勝ち！";
					disableBoard();
				} else if (checkTie()) {
					message.textContent = "引き分け";
				} else {
					currentPlayer = "X";
					message.textContent = "AIのターン";
					setTimeout(aiTurn, 1000);
				}
			}
		});

// AIのターン
		function aiTurn() {
			let move = minimax(board, "X").index;
			let cell = document.getElementById(move);
			cell.textContent = "X";
			board[move] = "X";
			if (checkWin("X")) {
				message.textContent = "AIの勝ち！";
				disableBoard();
			} else if (checkTie()) {
				message.textContent = "引き分け";
			} else {
				currentPlayer = "O";
				message.textContent = "クリックして次へ";
			}
		}

// 勝利チェック
		function checkWin(player) {
			return (
				(board[0] == player && board[1] == player && board[2] == player) ||
				(board[3] == player && board[4] == player && board[5] == player) ||
				(board[6] == player && board[7] == player && board[8] == player) ||
				(board[0] == player && board[3] == player && board[6] == player) ||
				(board[1] == player && board[4] == player && board[7] == player) ||
				(board[2] == player && board[5] == player && board[8] == player) ||
				(board[0] == player && board[4] == player && board[8] == player) ||
				(board[2] == player && board[4] == player && board[6] == player)
			);
		}

// 引き分けチェック
		function checkTie() {
			return board.every((elem) => {
				return typeof elem == 'string';
			});
		}
		
		// 埋め込み禁止
		function disableBoard() { 
			Array.from(document.querySelectorAll("td")).forEach(cell => {
				cell.style.cursor = "not-allowed";
			});
		}
		
		// minimaxアルゴリズム
		function minimax(newBoard, player) {
			var availSpots = emptyIndexies(newBoard);

if (checkWin("O")) {
				return { score: -10 };
			} else if (checkWin("X")) {
				return { score: 10 };
			} else if (availSpots.length === 0) {
				return { score: 0 };
			}
			
			var moves = [];

for (var i = 0; i < availSpots.length; i++) {
				var move = {};
				move.index = newBoard[availSpots[i]];
				newBoard[availSpots[i]] = player;

if (player == "X") {
					var result = minimax(newBoard, "O");
					move.score = result.score;
				} else {
					var result = minimax(newBoard, "X");
					move.score = result.score;
				}

newBoard[availSpots[i]] = move.index;

moves.push(move);
			}

var bestMove;
			if (player === "X") {
				var bestScore = -10000;
				for (var i = 0; i < moves.length; i++) {
					if (moves[i].score > bestScore) {
						bestScore = moves[i].score;
						bestMove = i;
					}
				}
			} else {
				var bestScore = 10000;
				for (var i = 0; i < moves.length; i++) {
					if (moves[i].score < bestScore) {
						bestScore = moves[i].score;
						bestMove = i;
					}
				}
			}

return moves[bestMove];
		}

// 空きマス目のインデックスを返す
		function emptyIndexies(board) {
			return board.filter((elem) => {
				return typeof elem == 'number';
			});
		}
	</script>
</body>
</html>