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

No:790

189

Othello (board game)
Developer User3131｜Date and time 23/6/17 17:47:36
Build time 65.994 sec｜Game capacity 4.585KB｜

オセロ

※絵文字については、ブラウザやOSによって表示が異なる可能性があります。

→ 　

0　

0　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>オセロ</title>
	<style>
	body {
		font-size: 20px;
		font-family: sans-serif;
		text-align: center;
	}
	.board {
		display: inline-block;
		margin-top: 20px;
	}
	.piece {
		display: inline-block;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		margin: 5px;
		font-size: 30px;
		cursor: pointer;
		background-color: #008000;
		color: #FFFFFF;
		text-align: center;
		line-height: 50px;
	}
	.black {
		background-color: #000000;
	}
	.white {
		background-color: #FFFFFF;
		color: #000000;
	}
	</style>
</head>
<body>
	<h1>オセロ</h1>
	<div class="board"></div>
	<script>
	var board = [];
	var turn = 1; // 1: black's turn, -1: white's turn

function initBoard() {
		for (var i = 0; i < 8; i++) {
			board[i] = [];
			for (var j = 0; j < 8; j++) {
				board[i][j] = 0; // 0: empty, 1: black, -1: white
			}
		}
		board[3][3] = board[4][4] = 1;
		board[3][4] = board[4][3] = -1;
	}

function initUI() {
		var boardElem = document.querySelector('.board');
		for (var i = 0; i < 8; i++) {
			for (var j = 0; j < 8; j++) {
				var piece = document.createElement('div');
				piece.classList.add('piece');
				piece.dataset.row = i;
				piece.dataset.col = j;
				piece.addEventListener('click', onClickPiece);
				boardElem.appendChild(piece);
			}
			boardElem.appendChild(document.createElement('br'));
		}
	}

function updateUI() {
		var pieces = document.querySelectorAll('.board .piece');
		for (var i = 0; i < pieces.length; i++) {
			var row = parseInt(pieces[i].dataset.row);
			var col = parseInt(pieces[i].dataset.col);
			pieces[i].classList.remove('black');
			pieces[i].classList.remove('white');
			if (board[row][col] == 1) {
				pieces[i].classList.add('black');
				pieces[i].innerHTML = '●';
			} else if (board[row][col] == -1) {
				pieces[i].classList.add('white');
				pieces[i].innerHTML = '○';
			} else {
				pieces[i].innerHTML = '';
			}
		}
	}

function onClickPiece() {
		if (!isValidMove(parseInt(this.dataset.row), parseInt(this.dataset.col))) {
			return;
		}
		board[parseInt(this.dataset.row)][parseInt(this.dataset.col)] = turn;
		flipPieces(parseInt(this.dataset.row), parseInt(this.dataset.col));
		turn = -turn;
		updateUI();
		if (isGameOver()) {
			showResult();
		} else if (isSkipTurn()) {
			turn = -turn;
			if (isSkipTurn()) {
				showResult();
			}
		}
	}

function isValidMove(row, col) {
		if (board[row][col] != 0) {
			return false;
		}
		for (var i = -1; i <= 1; i++) {
			for (var j = -1; j <= 1; j++) {
				if (i == 0 && j == 0) {
					continue;
				}
				var r = row + i;
				var c = col + j;
				if (r < 0 || r >= 8 || c < 0 || c >= 8) {
					continue;
				}
				if (board[r][c] == -turn) {
					while (r >= 0 && r < 8 && c >= 0 && c < 8 && board[r][c] == -turn) {
						r += i;
						c += j;
					}
					if (r >= 0 && r < 8 && c >= 0 && c < 8 && board[r][c] == turn) {
						return true;
					}
				}
			}
		}
		return false;
	}

function flipPieces(row, col) {
		for (var i = -1; i <= 1; i++) {
			for (var j = -1; j <= 1; j++) {
				if (i == 0 && j == 0) {
					continue;
				}
				var r = row + i;
				var c = col + j;
				if (r < 0 || r >= 8 || c < 0 || c >= 8) {
					continue;
				}
				if (board[r][c] == -turn) {
					var piecesToFlip = [];
					while (r >= 0 && r < 8 && c >= 0 && c < 8 && board[r][c] == -turn) {
						piecesToFlip.push([r, c]);
						r += i;
						c += j;
					}
					if (r >= 0 && r < 8 && c >= 0 && c < 8 && board[r][c] == turn) {
						for (var k = 0; k < piecesToFlip.length; k++) {
							board[piecesToFlip[k][0]][piecesToFlip[k][1]] = turn;
						}
					}
				}
			}
		}
	}

function isGameOver() {
		for (var i = 0; i < 8; i++) {
			for (var j = 0; j < 8; j++) {
				if (board[i][j] == 0 && isValidMove(i, j)) {
					return false;
				}
			}
		}
		return true;
	}

function isSkipTurn() {
		for (var i = 0; i < 8; i++) {
			for (var j = 0; j < 8; j++) {
				if (board[i][j] == 0 && isValidMove(i, j)) {
					return false;
				}
			}
		}
		return true;
	}

function showResult() {
		var blackCount = 0;
		var whiteCount = 0;
		for (var i = 0; i < 8; i++) {
			for (var j = 0; j < 8; j++) {
				if (board[i][j] == 1) {
					blackCount++;
				} else if (board[i][j] == -1) {
					whiteCount++;
				}
			}
		}
		alert('黒: ' + blackCount + ' 個, 白: ' + whiteCount + ' 個\n' + (blackCount > whiteCount ? '黒' : '白') + 'の勝ち！');
	}

initBoard();
	initUI();
	updateUI();
	</script>
</body>
</html>

※絵文字については、ブラウザやOSによって表示が異なる可能性があります。