The Last Game of Mankind's game

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

No:1421

116

←

Prev Next

→

The Last Game of Mankind
Developer User3025｜Date and time 23/6/18 15:20:49
Build time 42.303 sec｜Game capacity 3.427KB｜

Script

リセットする

ボックスをクリックして、✖️または◯を入力してください。3つのマークをそろえると勝ちます！

人類最後のゲームは、3×3のマス目になっていて、交互にマス目に✖️か◯を入力していきます。3つのマークが横・縦・斜めのいずれかの方向でそろえば勝ちです。ゲームが終了したらリセットボタンを押してもう一度遊ぶことができます。絵文字を多用して、スマホでもわかりやすくしました。

←

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 {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			background-color: #eee;
		}
		.container {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.board {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(3, 1fr);
			grid-gap: 10px;
			background-color: #fff;
			padding: 10px;
			box-shadow: 0 0 10px rgba(0,0,0,0.2);
			border-radius: 10px;
		}
		.box {
			background-color: #ddd;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 48px;
			cursor: pointer;
			transition: background-color 0.2s ease;
			border-radius: 5px;
		}
		.box:hover {
			background-color: #bbb;
		}
		.reset {
			margin-top: 20px;
			padding: 10px 30px;
			background-color: #4285f4;
			color: #fff;
			border-radius: 5px;
			cursor: pointer;
			transition: opacity 0.2s ease;
		}
		.reset:hover {
			opacity: 0.8;
		}
		.instructions {
			margin-top: 20px;
			font-size: 18px;
			text-align: center;
			color: #666;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="board">
			<div class="box" id="box1"></div>
			<div class="box" id="box2"></div>
			<div class="box" id="box3"></div>
			<div class="box" id="box4"></div>
			<div class="box" id="box5"></div>
			<div class="box" id="box6"></div>
			<div class="box" id="box7"></div>
			<div class="box" id="box8"></div>
			<div class="box" id="box9"></div>
		</div>
		<div class="reset" id="reset">リセットする</div>
		<div class="instructions">ボックスをクリックして、✖️または◯を入力してください。3つのマークをそろえると勝ちます！</div>
	</div>

function handleClick() {
			if (gameWon) return;
			if (!this.textContent) {
				this.textContent = turn;
				checkWin();
				turn = turn === 'X' ? '◯' : 'X';
			}
		}

function handleReset() {
			boxes.forEach(box => box.textContent = '');
			turn = 'X';
			gameWon = false;
		}

boxes.forEach(box => box.addEventListener('click', handleClick));
		resetButton.addEventListener('click', handleReset);
	</script>
</body>
</html>