Marubatsu game There are 3 vertical and 3 horizontal squares in a square of the same size. A person (hereinafter referred to as the player) who writes only circles in the squares and an AI who writes only crosses (hereinafter referred to as AI) each fills one square at a time. A game that fills in the blanks Players can write three consecutive circles vertically, horizontally, or diagonally in a row, then they will say "win". AI aims to write three Xs in a row vertically, horizontally, or diagonally. If the player can make a row of 3 circles vertically, horizontally or diagonally, it will say "lost". If you write one row in a row, either vertically, horizontally, or diagonally, fill in the third square in that row with a cross.'s game

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

No:1575

2219

←

Prev Next

→

Marubatsu game There are 3 vertical and 3 horizont..ALL
Developer User3293｜Date and time 23/6/18 18:45:57
Build time 38.83 sec｜Game capacity 3.28KB｜

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>
		body {
			font-size: 48px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		
		.square {
			width: 100px;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid black;
			cursor: pointer;
		}
		
		.square:hover {
			background-color: gray;
		}
	</style>
</head>
<body>
	<div id="board">
		<div class="square" id="0"></div>
		<div class="square" id="1"></div>
		<div class="square" id="2"></div>
		<div class="square" id="3"></div>
		<div class="square" id="4"></div>
		<div class="square" id="5"></div>
		<div class="square" id="6"></div>
		<div class="square" id="7"></div>
		<div class="square" id="8"></div>
	</div>
	<div id="result"></div>
	
	<script>
		const squares = document.querySelectorAll('.square');
		const result = document.getElementById('result');
		let playerTurn = true;
		let gameOver = false;
		
		squares.forEach(square => {
			square.addEventListener('click', (e) => {
				if (!gameOver && e.target.innerHTML === '' && playerTurn) {
					e.target.innerHTML = '○';
					checkWin('player');
					playerTurn = false;
					setTimeout(aiTurn, 200);
				}
			});
		});
		
		function aiTurn() {
			if (!gameOver) {
				const squareIds = Array.from(Array(9).keys());
				let availableSquares = squareIds.filter(id => !document.getElementById(id).innerHTML);
				let aiChoice = availableSquares[Math.floor(Math.random() * availableSquares.length)]
				document.getElementById(aiChoice).innerHTML = '×';
				checkWin('ai');
				playerTurn = true;
			}
		}
		
		function checkWin(playerType) {
			let board = [];
			squares.forEach(square => board.push(square.innerHTML));
			
			const rows = [[0, 1, 2], [3, 4, 5], [6, 7, 8]];
			const columns = [[0, 3, 6], [1, 4, 7], [2, 5, 8]];
			const diagonals = [[0, 4, 8], [2, 4, 6]];
			
			let win = rows.concat(columns, diagonals).some(line => {
				return board[line[0]] !== '' && board[line[0]] === board[line[1]] && board[line[1]] === board[line[2]];
			});
			
			if (win) {
				if (playerType === 'player') {
					result.innerHTML = '勝ち';
				} else {
					result.innerHTML = '負け';
				}
				gameOver = true;
			} else if (!board.includes('')) {
				result.innerHTML = '引き分け';
				gameOver = true;
			}
			
			if (!gameOver && playerType === 'player') {
				blockPlayerWin(board);
			}
		}
		
		function blockPlayerWin(board) {
			const rows = [[0, 1, 2], [3, 4, 5], [6, 7, 8]];
			const columns = [[0, 3, 6], [1, 4, 7], [2, 5, 8]];
			const diagonals = [[0, 4, 8], [2, 4, 6]];
			
			let dangerLines = [];
			rows.concat(columns, diagonals).forEach(line => {
				if (board[line[0]] === '○' && board[line[1]] === '○' && !board[line[2]]) {
					dangerLines.push(line[2]);
				} else if (board[line[1]] === '○' && board[line[2]] === '○' && !board[line[0]]) {
					dangerLines.push(line[0]);
				} else if (board[line[0]] === '○' && board[line[2]] === '○' && !board[line[1]]) {
					dangerLines.push(line[1]);
				}
			});
			
			if (dangerLines.length > 0) {
				document.getElementById(dangerLines[0]).innerHTML = '×';
				playerTurn = true;
			}
		}
	</script>
</body>
</html>