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

No:1542

3652

←

Prev Next

→

Title "Marubatsu Game" Parting between the person ..ALL
Developer User3293｜Date and time 23/6/18 18:21:31
Build time 27.149 sec｜Game capacity 2.216KB｜

Script

マルバツゲーム

←

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>マルバツゲーム</title>
	<style>
		#container {
			display: flex;
			flex-wrap: wrap;
			max-width: 300px;
			margin: 0 auto;
		}

.box {
			width: 100px;
			height: 100px;
			border: 1px solid black;
			text-align: center;
			font-size: 4rem;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>マルバツゲーム</h1>
	<div id="container">
		<div class="box" id="0"></div>
		<div class="box" id="1"></div>
		<div class="box" id="2"></div>
		<div class="box" id="3"></div>
		<div class="box" id="4"></div>
		<div class="box" id="5"></div>
		<div class="box" id="6"></div>
		<div class="box" id="7"></div>
		<div class="box" id="8"></div>
	</div>
	<script>
		const container = document.getElementById("container");
		const boxes = document.getElementsByClassName("box");

let player = "o";
		let ai = "x";
		let gameState = ["", "", "", "", "", "", "", "", ""];

const winningCombinations = [
			[0, 1, 2],
			[3, 4, 5],
			[6, 7, 8],
			[0, 3, 6],
			[1, 4, 7],
			[2, 5, 8],
			[0, 4, 8],
			[2, 4, 6]
		];

for (let i = 0; i < boxes.length; i++) {
			boxes[i].addEventListener("click", function() {
				if (gameState[i] === "" && player === "o") {
					boxes[i].textContent = player;
					gameState[i] = player;
					if (checkWin(player)) {
						alert("勝ち！");
						location.reload();
					} else if (checkGameOver()) {
						alert("引き分け！");
						location.reload();
					} else {
						player = "x";
						aiTurn();
					}
				}
			});
		}

function checkWin(player) {
			return winningCombinations.some(combination => {
				return combination.every(index => {
					return gameState[index] === player;
				});
			});
		}

function checkGameOver() {
			return !gameState.includes("");
		}
	</script>
</body>
</html>