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

No:1785

818

←

Prev Next

→

Othello (board game)
Developer User3404｜Date and time 23/6/19 1:09:52
Build time 69.837 sec｜Game capacity 5.298KB｜

Script

オセロ

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>オセロ</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 25px;
			text-align: center;
		}
		button {
			padding: 10px 20px;
			margin: 5px;
			background-color: #ffb74d;
			color: #fff;
			border: none;
			border-radius: 5px;
			box-shadow: 2px 2px 6px #555;
			cursor: pointer;
		}
		#board {
			display: grid;
			grid-template-columns: repeat(8, 50px);
			grid-template-rows: repeat(8, 50px);
			margin: 20px auto;
			background-color: #2c3e50;
			border: 2px solid #ccc;
			border-radius: 5px;
			box-shadow: 2px 2px 6px #555;
		}
		.white {
			background: url("white.svg") center/40px no-repeat;
		}
		.black {
			background: url("black.svg") center/40px no-repeat;
		}
	</style>
</head>
<body>
	<h1>オセロ</h1>
	<div id="board"></div>
	<button id="startBtn">スタート</button>
	<button id="resetBtn">リセット</button>
	<script>
		// ゲームの概要
		alert("オセロをプレイしましょう。黒からスタートで、相手の石を挟むことで自分の石が増えます。最後に石の数が多いほうが勝ちです。");

// 盤面の初期化
		const board = document.getElementById("board");
		let squares = [];
		let turn = "black";
		let blackScore = 2;
		let whiteScore = 2;
		let canPlay = false;

function createBoard() {
			for (let i = 0; i < 64; i++) {
				let square = document.createElement("div");
				square.classList.add("square");
				squares.push(square);
				board.appendChild(square);
			}
			squares[27].classList.add("white");
			squares[28].classList.add("black");
			squares[35].classList.add("black");
			squares[36].classList.add("white");
		}

createBoard();

// 石を置く
		function placePiece(index) {
			if (squares[index].classList.contains("black") || squares[index].classList.contains("white")) {
				return;
			}
			let flipped = flipPieces(index);
			if (flipped.length > 0) {
				squares[index].classList.add(turn);
				for (let i = 0; i < flipped.length; i++) {
					squares[flipped[i]].classList.remove("black", "white");
					squares[flipped[i]].classList.add(turn);
				}
				if (turn === "black") {
					blackScore += 1 + flipped.length;
					whiteScore -= flipped.length;
					turn = "white";
				} else {
					whiteScore += 1 + flipped.length;
					blackScore -= flipped.length;
					turn = "black";
				}
				updateScore();
				checkEnd();
			}
		}

// 石をひっくり返す
		function flipPieces(index) {
			let flipped = [];
			let directions = [-9, -8, -7, -1, 1, 7, 8, 9];
			for (let i = 0; i < directions.length; i++) {
				let dir = directions[i];
				let newPos = index + dir;
				let piecesToFlip = [];
				while (newPos >= 0 && newPos < 64 && Math.abs(newPos % 8 - index % 8) <= Math.min(index % 8, 7 - index % 8, newPos % 8, 7 - newPos % 8)) {
					if (squares[newPos].classList.contains(turn)) {
						for (let j = 0; j < piecesToFlip.length; j++) {
							flipped.push(piecesToFlip[j]);
						}
						break;
					} else if (!squares[newPos].classList.contains("black") && !squares[newPos].classList.contains("white")) {
						break;
					} else {
						piecesToFlip.push(newPos);
						newPos += dir;
					}
				}
			}
			return flipped;
		}

// スコアを更新する
		function updateScore() {
			document.getElementById("blackScore").innerText = blackScore;
			document.getElementById("whiteScore").innerText = whiteScore;
		}

// ゲーム終了判定
		function checkEnd() {
			let emptySquares = 0;
			for (let i = 0; i < squares.length; i++) {
				if (!squares[i].classList.contains("black") && !squares[i].classList.contains("white")) {
					emptySquares++;
				}
			}
			if (emptySquares === 0 || blackScore === 0 || whiteScore === 0) {
				canPlay = false;
				setTimeout(function() {
					if (blackScore === whiteScore) {
						alert("引き分けです。");
					} else if (blackScore > whiteScore) {
						alert("黒の勝利です。");
					} else {
						alert("白の勝利です。");
					}
				}, 1000);
			}
		}

// スタートボタン
		document.getElementById("startBtn").addEventListener("click", function() {
			if (!canPlay) {
				canPlay = true;
				turn = "black";
				blackScore = 2;
				whiteScore = 2;
				for (let i = 0; i < squares.length; i++) {
					squares[i].classList.remove("black", "white");
				}
				squares[27].classList.add("white");
				squares[28].classList.add("black");
				squares[35].classList.add("black");
				squares[36].classList.add("white");
				updateScore();
			}
		});

// リセットボタン
		document.getElementById("resetBtn").addEventListener("click", function() {
			canPlay = false;
			turn = "black";
			blackScore = 2;
			whiteScore = 2;
			for (let i = 0; i < squares.length; i++) {
				squares[i].classList.remove("black", "white");
			}
			squares[27].classList.add("white");
			squares[28].classList.add("black");
			squares[35].classList.add("black");
			squares[36].classList.add("white");
			updateScore();
		});

// 盤面をクリックしたときの処理
		board.addEventListener("click", function(e) {
			if (!canPlay) {
				return;
			}
			if (e.target.classList.contains("square")) {
				let index = squares.indexOf(e.target);
				placePiece(index);
			}
		});
	</script>
</body>
</html>