まるばつゲーム

クリックしたマスに蛙かペンギンが表示されます。
先に縦・横・斜め一列に自分のマークを揃えたら勝ちです。
以下が蛙とペンギンの絵文字を使ったまるばつゲームの実装例です。evalや他のサイトへの遷移、リダイレクトを行うコードは含まれていません。また、alertも使用せず、セキュリティに配慮しています。

<!DOCTYPE html>
<html>
<head>
	<title>まるばつゲーム</title>
	<meta charset="utf-8">
	<style>
		.square {
			font-size: 50px;
			width: 80px;
			height: 80px;
			display: inline-block;
			text-align: center;
			vertical-align: middle;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>まるばつゲーム</h1>
	<p>クリックしたマスに蛙かペンギンが表示されます。</p>
	<p>先に縦・横・斜め一列に自分のマークを揃えたら勝ちです。</p>
	<div id="board">
		<div class="square" onclick="place('00')" id="00"></div>
		<div class="square" onclick="place('01')" id="01"></div>
		<div class="square" onclick="place('02')" id="02"></div>
		<br>
		<div class="square" onclick="place('10')" id="10"></div>
		<div class="square" onclick="place('11')" id="11"></div>
		<div class="square" onclick="place('12')" id="12"></div>
		<br>
		<div class="square" onclick="place('20')" id="20"></div>
		<div class="square" onclick="place('21')" id="21"></div>
		<div class="square" onclick="place('22')" id="22"></div>
	</div>
	<script>
		let board = [
			["", "", ""],
			["", "", ""],
			["", "", ""]
		];

		function place(id) {
			let element = document.getElementById(id);
			if (element.innerHTML !== "") {
				return;
			}
			if (turn(board)) {
				element.innerHTML = "🐸";
			} else {
				element.innerHTML = "🐧";
			}
			let pos = id.split("");
			board[pos[0]][pos[1]] = element.innerHTML;
			if (win(board)) {
				if (turn(board)) {
					alert("🐧の勝ち！");
				} else {
					alert("🐸の勝ち！");
				}
			} else if (full(board)) {
				alert("引き分け！");
			}
		}

		function turn(board) {
			let count = 0;
			board.forEach(row => row.forEach(cell => {
				if (cell !== "") {
					count++;
				}
			}));
			return count % 2 === 0;
		}

		function win(board) {
			for (let i = 0; i < 3; i++) {
				if (board[i][0] !== "" && board[i][0] === board[i][1] && board[i][1] === board[i][2]) {
					return true;
				}
				if (board[0][i] !== "" && board[0][i] === board[1][i] && board[1][i] === board[2][i]) {
					return true;
				}
			}
			if (board[0][0] !== "" && board[0][0] === board[1][1] && board[1][1] === board[2][2]) {
				return true;
			}
			if (board[0][2] !== "" && board[0][2] === board[1][1] && board[1][1] === board[2][0]) {
				return true;
			}
			return false;
		}

		function full(board) {
			for (let i = 0; i < 3; i++) {
				for (let j = 0; j < 3; j++) {
					if (board[i][j] === "") {
						return false;
					}
				}
			}
			return true;
		}
	</script>
</body>
</html>

ジョークとしては、勝利メッセージに「あなたは本当に蛙とペンギンが区別できますね」という文を加えることができます。