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

No:1340

202

←

Prev Next

→

Othello (board game)
Developer User3312｜Date and time 23/6/18 11:33:07
Build time 64.857 sec｜Game capacity 5.06KB｜

Script

🐼オセロ🐼

石を置く場所をクリックしてください

⚫のターン

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>オセロ</title>
	<style>
		* {
			box-sizing: border-box;
		}
		body {
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #005a55;
			color: white;
		}
		h1 {
			font-size: 50px;
			font-weight: bold;
			margin-bottom: 0;
		}
		h2 {
			font-size: 30px;
			font-weight: normal;
			margin-top: 0;
		}
		#board {
			display: flex;
			flex-wrap: wrap;
			width: 320px;
			height: 320px;
			border: 3px solid white;
			border-radius: 10px;
			overflow: hidden;
		}
		.cell {
			width: calc(100% / 8);
			height: calc(100% / 8);
			background-color: green;
			position: relative;
			cursor: pointer;
		}
		#turn {
			font-size: 40px;
			margin-top: 20px;
		}
		#message {
			font-size: 30px;
			margin-top: 20px;
			display: none;
		}
		button {
			font-size: 30px;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			background-color: white;
			margin-top: 20px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>🐼オセロ🐼</h1>
	<h2>石を置く場所をクリックしてください</h2>
	<div id="board"></div>
	<div id="turn">⚫のターン</div>
	<div id="message"></div>
	<button id="reset">もう一度遊ぶ</button>
	<script>
		// 盤面の情報を表す配列(0: 空, 1: 黒石, -1: 白石)
		let board = [
			0, 0, 0, 0, 0, 0, 0, 0,
			0, 0, 0, 0, 0, 0, 0, 0,
			0, 0, 0, 0, 0, 0, 0, 0,
			0, 0, 0, 1, -1, 0, 0, 0,
			0, 0, 0, -1, 1, 0, 0, 0,
			0, 0, 0, 0, 0, 0, 0, 0,
			0, 0, 0, 0, 0, 0, 0, 0,
			0, 0, 0, 0, 0, 0, 0, 0
		];
		// 現在のターン(1: 黒, -1:白)
		let turn = 1;
		// ゲームの終了フラグ
		let gameOver = false;

// 盤面を初期化する
		function initBoard() {
			let boardDiv = document.getElementById("board");
			for (let i = 0; i < board.length; i++) {
				let cell = document.createElement("div");
				cell.className = "cell";
				if (board[i] === 1) {
					cell.textContent = "⚫";
				} else if (board[i] === -1) {
					cell.textContent = "⚪";
				}
				cell.addEventListener("click", () => {
					if (!gameOver && board[i] === 0) {
						let flipped = getFlippedStones(i, turn);
						if (flipped.length > 0) {
							board[i] = turn;
							updateBoard();
							turn *= -1;
							updateTurn();
							let nextMoves = getNextMoves(turn);
							if (nextMoves.length === 0) {
								turn *= -1;
								updateTurn();
								nextMoves = getNextMoves(turn);
								if (nextMoves.length === 0) {
									gameOver = true;
									let blackCount = 0;
									let whiteCount = 0;
									for (let j = 0; j < board.length; j++) {
										if (board[j] === 1) {
											blackCount++;
										} else if (board[j] === -1) {
											whiteCount++;
										}
									}
									showMessage(`ゲーム終了！⚫${blackCount} vs ⚪${whiteCount}`);
								} else {
									showMessage(`${turn === 1 ? "⚫" : "⚪"}はパスです`);
								}
							}
						}
					}
				});
				boardDiv.appendChild(cell);
			}
		}

// 盤面を更新する
		function updateBoard() {
			let cells = document.getElementsByClassName("cell");
			for (let i = 0; i < cells.length; i++) {
				if (board[i] === 1) {
					cells[i].textContent = "⚫";
				} else if (board[i] === -1) {
					cells[i].textContent = "⚪";
				}
			}
		}

// ターンの表示を更新する
		function updateTurn() {
			document.getElementById("turn").textContent = `${turn === 1 ? "⚫" : "⚪"}のターン`;
		}

// 指定されたマスに石を置いたときに裏返す石を求める
		function getFlippedStones(idx, color) {
			let flipped = [];
			let dirs = [-9, -8, -7, -1, 1, 7, 8, 9];
			for (let i = 0; i < dirs.length; i++) {
				let dir = dirs[i];
				let pos = idx + dir;
				let line = [];
				while (board[pos] === -color) {
					line.push(pos);
					pos += dir;
				}
				if (board[pos] === color) {
					flipped = flipped.concat(line);
				}
			}
			return flipped;
		}

// 次に置ける場所を求める
		function getNextMoves(color) {
			let moves = [];
			for (let i = 0; i < board.length; i++) {
				if (board[i] === 0) {
					let flipped = getFlippedStones(i, color);
					if (flipped.length > 0) {
						moves.push(i);
					}
				}
			}
			return moves;
		}

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

// メイン処理
		initBoard();
		updateTurn();

// もう一度遊ぶボタンの動作
		document.getElementById("reset").addEventListener("click", () => {
			board = [
				0, 0, 0, 0, 0, 0, 0, 0,
				0, 0, 0, 0, 0, 0, 0, 0,
				0, 0, 0, 0, 0, 0, 0, 0,
				0, 0, 0, 1, -1, 0, 0, 0,
				0, 0, 0, -1, 1, 0, 0, 0,
				0, 0, 0, 0, 0, 0, 0, 0,
				0, 0, 0, 0, 0, 0, 0, 0,
				0, 0, 0, 0, 0, 0, 0, 0
			];
			gameOver = false;
			updateBoard();
			updateTurn();
			document.getElementById("message").style.display = "none";
		});
	</script>
</body>
</html>