Marubatsu game Parting between the person who draws a circle in a 3x3 square of the same size and the AI who draws a cross. AI moves to a page that says "win" AI aims to write three crosses in a row vertically, horizontally, and diagonally in a row. is written vertically, horizontally, and diagonally in a row, fill in the third square in the row with a cross.'s game

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

No:1543

7152

←

Prev Next

→

Marubatsu game Parting between the person who draw..ALL
Developer User3293｜Date and time 23/6/18 18:23:05
Build time 36.722 sec｜Game capacity 3.303KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>マルバツゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 2em;
			text-align: center;
			padding-top: 20px;
		}
		table {
			margin:auto;
			border-collapse: collapse;
		}
		td {
			width: 100px;
			height: 100px;
			background-color: #eee;
			text-align: center;
			font-size: 4em;
			cursor: pointer;
		}
		td:hover {
			background-color: #ddd;
		}
		td.played {
			cursor: default;
		}
		#message {
			font-size: 2.5em;
			margin-top: 20px;
			color: #666;
		}
		#message.win {
			color: green;
		}
		#message.lose {
			color: red;
		}
		#message.draw {
			color: blue;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<td class="box" id="box1"></td>
			<td class="box" id="box2"></td>
			<td class="box" id="box3"></td>
		</tr>
		<tr>
			<td class="box" id="box4"></td>
			<td class="box" id="box5"></td>
			<td class="box" id="box6"></td>
		</tr>
		<tr>
			<td class="box" id="box7"></td>
			<td class="box" id="box8"></td>
			<td class="box" id="box9"></td>
		</tr>
	</table>
	<div id="message"></div>

boxes.forEach(function(box){
			box.addEventListener("click", function(){
				if(!box.classList.contains("played")){
					box.textContent = player;
					box.classList.add("played");
					playerMoves.push(parseInt(box.id.charAt(3)));
					if(checkWin(playerMoves)){
						message.className = "win";
						message.textContent = "あなたの勝ち！";
						return;
					}
					if(playerMoves.length + computerMoves.length === 9){
						message.className = "draw";
						message.textContent = "引き分け！";
						return;
					}
					computerTurn();
				}
			});
		});