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

No:1559

1217

←

Prev Next

→

"Marubatsu Game" Divided into a person who writes ..ALL
Developer User3293｜Date and time 23/6/18 18:35:34
Build time 72.229 sec｜Game capacity 6.051KB｜

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 {
			margin: 0;
			padding: 0;
			background-color: #f9f9f9;
			font-family: Arial, sans-serif;
		}
		h1 {
			text-align: center;
			margin: 30px 0;
		}
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}
		.cell {
			width: 80px;
			height: 80px;
			margin: 10px;
			font-size: 60px;
			text-align: center;
			line-height: 1;
			cursor: pointer;
			border: 2px solid #ccc;
			border-radius: 10px;
			box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
			background-color: #fff;
			transition: all 0.2s ease-in-out;
		}
		.cell:hover {
			background-color: #e6e6e6;
			box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
		}
		.cell.clicked {
			background-color: #f9f9f9;
			box-shadow: none;
			border-color: #666;
			color: #666;
		}
		.message {
			margin-top: 30px;
			text-align: center;
			font-size: 30px;
			font-weight: bold;
			color: #666;
			display: none;
		}
		.restart-button {
			margin-top: 20px;
			padding: 10px 20px;
			background-color: #4CAF50;
			color: #fff;
			font-size: 20px;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			border-radius: 10px;
			box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
			cursor: pointer;
			transition: all 0.2s ease-in-out;
		}
		.restart-button:hover {
			background-color: #3e8e41;
			box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
		}
	</style>
</head>
<body>
	<h1>マルバツゲーム</h1>
	<div class="container">
		<div id="cell-1" class="cell"></div>
		<div id="cell-2" class="cell"></div>
		<div id="cell-3" class="cell"></div>
		<div id="cell-4" class="cell"></div>
		<div id="cell-5" class="cell"></div>
		<div id="cell-6" class="cell"></div>
		<div id="cell-7" class="cell"></div>
		<div id="cell-8" class="cell"></div>
		<div id="cell-9" class="cell"></div>
	</div>
	<div class="message" id="message"></div>
	<div class="restart-button" id="restart-button">もう一度プレイする</div>

// 指定されたセルをクリックした時の処理
		function cellClickHandler() {
			if (this.innerHTML !== "") {
				return;
			}
			// セルにシンボルを書き込む
			this.innerHTML = currentPlayer;
			this.classList.add("clicked");
			checkGameResult();
			switchPlayer();
			if (currentPlayer === aiSymbol) {
				setTimeout(aiTurn, 1000);
			}
		}

// プレイヤーとAIのシンボルを入れ替える
		function switchPlayer() {
			currentPlayer = (currentPlayer === playerSymbol) ? aiSymbol : playerSymbol;
		}

// AIが自分のターンでランダムなセルを選択する
		function aiTurn() {
			let remainingCells = getRemainingCells();
			let randomIndex = Math.floor(Math.random() * remainingCells.length);
			let selectedCell = remainingCells[randomIndex];
			selectedCell.innerHTML = aiSymbol;
			selectedCell.classList.add("clicked");
			checkGameResult();
			switchPlayer();
		}

// 勝敗を判定する
		function checkGameResult() {
			let winPatterns = [
				[1,2,3], [4,5,6], [7,8,9], // 横一列
				[1,4,7], [2,5,8], [3,6,9], // 縦一列
				[1,5,9], [3,5,7] // 斜め
			];
			for (let i = 0; i < winPatterns.length; i++) {
				let pattern = winPatterns[i];
				let cellsInPattern = getCellsInPattern(pattern);
				let symbolInPattern = getSymbolInPattern(cellsInPattern);
				if (symbolInPattern !== "") {
					showMessage(symbolInPattern + "の勝ち！");
					disableCells();
					break;
				}
			}
			if (isDraw()) {
				showMessage("引き分け！");
				disableCells();
			}
		}

// 指定されたパターンに含まれるセルの配列を返す
		function getCellsInPattern(pattern) {
			let cellsInPattern = [];
			for (let i = 0; i < pattern.length; i++) {
				let cell = document.getElementById("cell-" + pattern[i]);
				cellsInPattern.push(cell);
			}
			return cellsInPattern;
		}

// 指定されたセルの配列に含まれるシンボルを返す
		function getSymbolInPattern(cellsInPattern) {
			let symbolsInPattern = [];
			for (let i = 0; i < cellsInPattern.length; i++) {
				let symbol = cellsInPattern[i].innerHTML;
				if (symbol !== "") {
					symbolsInPattern.push(symbol);
				}
			}
			if (symbolsInPattern.length === 3 && symbolsInPattern[0] === symbolsInPattern[1] && symbolsInPattern[1] === symbolsInPattern[2]) {
				return symbolsInPattern[0];
			} else {
				return "";
			}
		}

// 残っている空きセルの配列を返す
		function getRemainingCells() {
			let remainingCells = [];
			for (let i = 0; i < cells.length; i++) {
				if (cells[i].innerHTML === "") {
					remainingCells.push(cells[i]);
				}
			}
			return remainingCells;
		}

// 引き分けかどうかを判定する
		function isDraw() {
			let remainingCells = getRemainingCells();
			return (remainingCells.length === 0);
		}

// 全てのセルを無効化する
		function disableCells() {
			for (let i = 0; i < cells.length; i++) {
				cells[i].removeEventListener("click", cellClickHandler);
			}
		}

// メッセージを表示する
		function showMessage(msg) {
			message.innerHTML = msg;
			message.style.display = "block";
		}

// ゲームをリスタートする
		function restartGame() {
			for (let i = 0; i < cells.length; i++) {
				cells[i].innerHTML = "";
				cells[i].classList.remove("clicked");
			}
			message.style.display = "none";
			currentPlayer = playerSymbol;
			for (let i = 0; i < cells.length; i++) {
				cells[i].addEventListener("click", cellClickHandler);
			}
		}

// 初期化処理
		function init() {
			for (let i = 0; i < cells.length; i++) {
				cells[i].addEventListener("click", cellClickHandler);
			}
			restartButton.addEventListener("click", restartGame);
		}
		init();
	</script>
</body>
</html>