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

No:526

401

←

Prev Next

→

tic-tac-toe but the circle is replaced with a star
Developer User2996｜Date and time 23/6/15 7:36:31
Build time 35.947 sec｜Game capacity 2.702KB｜

Script

Star-tac-toe

This is an implementation of the classic tic-tac-toe game, but with stars instead of circles. The game is playable on a smartphone and uses emojis throughout the interface. To play, simply tap on a cell to place a star in that location. The game ends when one player gets three in a row, or if all the cells are filled without any three in a row. The winner is announced with a celebratory message, while a tie is signalled with a more neutral message.

←

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>Star-tac-toe</title>
	<style>
		body {
			font-size: 2em;
			text-align: center;
		}
		table {
			margin: auto;
			border-collapse: collapse;
		}
		td {
			width: 1.5em;
			height: 1.5em;
			border: 1px solid black;
			cursor: pointer;
			text-align: center;
			vertical-align: middle;
			font-size: 2em;
		}
	</style>
</head>
<body>
	<h1>Star-tac-toe</h1>
	<table>
		<tr>
			<td id="00"></td>
			<td id="01"></td>
			<td id="02"></td>
		</tr>
		<tr>
			<td id="10"></td>
			<td id="11"></td>
			<td id="12"></td>
		</tr>
		<tr>
			<td id="20"></td>
			<td id="21"></td>
			<td id="22"></td>
		</tr>
	</table>
	<h2 id="message"></h2>
	<script>
		let currentPlayer = "o";
		let gameOver = false;
		let board = [
			[null, null, null],
			[null, null, null],
			[null, null, null]
		];
	
		const table = document.querySelector("table");
		table.addEventListener("click", event => {
			const cell = event.target;
			const row = parseInt(cell.id[0]);
			const col = parseInt(cell.id[1]);
			if (board[row][col] === null && !gameOver) {
				cell.textContent = "★";
				board[row][col] = currentPlayer;
				if (checkWin()) {
					document.querySelector("#message").textContent = `${currentPlayer.toUpperCase()} wins!`;
					gameOver = true;
				} else if (checkTie()) {
					document.querySelector("#message").textContent = "It's a tie!";
					gameOver = true;
				} else {
					currentPlayer = currentPlayer === "o" ? "x" : "o";
				}
			}
		});
	
		function checkWin() {
			for (let i = 0; i < 3; i++) {
				if (board[i][0] !== null && board[i][0] === board[i][1] && board[i][0] === board[i][2]) {
					return true;
				}
				if (board[0][i] !== null && board[0][i] === board[1][i] && board[0][i] === board[2][i]) {
					return true;
				}
			}
			if (board[0][0] !== null && board[0][0] === board[1][1] && board[0][0] === board[2][2]) {
				return true;
			}
			if (board[0][2] !== null && board[0][2] === board[1][1] && board[0][2] === board[2][0]) {
				return true;
			}
			return false;
		}
	
		function checkTie() {
			for (let row of board) {
				for (let cell of row) {
					if (cell === null) {
						return false;
					}
				}
			}
			return true;
		}
	</script>
</body>
</html>