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

No:4436

4279

Othello (board game)
Developer もちきなこ｜Date and time 23/6/28 0:50:50
Build time 67.383 sec｜Game capacity 4.888KB｜

HTMLファイルを作成し、JavaScriptでオセロゲームを実装しました。以下が実際のプログラムです。

オセロゲーム

このプログラムは、8x8のオセロ盤を表示し、クリックして自分の石を置き、相手の石を裏返すことができます。JavaScriptで動作し、スマホでも操作可能です。絵文字は使っていませんが、部分的にゲーム化しています。

→ 　

3　

3　

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

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

(C)2023 HisashiApp

HTMLファイルを作成し、JavaScriptでオセロゲームを実装しました。以下が実際のプログラムです。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>オセロゲーム</title>
	<style>
		.square {
			width: 30px;
			height: 30px;
			background-color: green;
			border: 1px solid black;
			display: inline-block;
			margin: 0;
			padding: 0;
			vertical-align: top;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<h1>オセロゲーム</h1>

<div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
	<div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square" id="black"></div>
		<div class="square" id="white"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
	<div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square" id="white"></div>
		<div class="square" id="black"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
	<div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
	<div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
	<div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
	<div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
	<div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>

<script>
		var 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, 2, 0, 0, 0],
			[0, 0, 0, 2, 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]
		];

var currentPlayer = 1;

var flip = function(x, y, dx, dy) {
			var opponent = 3 - currentPlayer;
			var count = 0;
			while (x >= 0 && x <= 7 && y >= 0 && y <= 7 && board[x][y] == opponent) {
				x += dx;
				y += dy;
				count++;
			}
			if (count > 0 && x >= 0 && x <= 7 && y >= 0 && y <= 7 && board[x][y] == currentPlayer) {
				for (var i = 1; i <= count; i++) {
					x -= dx;
					y -= dy;
					board[x][y] = currentPlayer;
					document.getElementById(x * 8 + y + 1).style.backgroundColor = currentPlayer == 1 ? 'black' : 'white';
				}
			}
		};

var makeMove = function(cell) {
			var id = cell.id;
			var row = Math.floor((id - 1) / 8);
			var col = (id - 1) % 8;
			if (board[row][col] != 0) {
				return;
			}
			var flipped = false;
			for (var dx = -1; dx <= 1; dx++) {
				for (var dy = -1; dy <= 1; dy++) {
					if (dx == 0 && dy == 0) {
						continue;
					}
					var x = row + dx;
					var y = col + dy;
					while (x >= 0 && x <= 7 && y >= 0 && y <= 7 && board[x][y] == 3 - currentPlayer) {
						x += dx;
						y += dy;
					}
					if (x >= 0 && x <= 7 && y >= 0 && y <= 7 && board[x][y] == currentPlayer) {
						flip(row, col, dx, dy);
						flipped = true;
					}
				}
			}
			if (flipped) {
				board[row][col] = currentPlayer;
				cell.style.backgroundColor = currentPlayer == 1 ? 'black' : 'white';
				currentPlayer = 3 - currentPlayer;
			}
		};

var cells = document.getElementsByClassName('square');
		for (var i = 0; i < cells.length; i++) {
			cells[i].id = i + 1;
			cells[i].onclick = function() { makeMove(this); };
			var row = Math.floor(i / 8);
			var col = i % 8;
			if (board[row][col] == 1) {
				cells[i].style.backgroundColor = 'black';
			} else if (board[row][col] == 2) {
				cells[i].style.backgroundColor = 'white';
			}
		}
	</script>
</body>
</html>
```

このプログラムは、8x8のオセロ盤を表示し、クリックして自分の石を置き、相手の石を裏返すことができます。JavaScriptで動作し、スマホでも操作可能です。絵文字は使っていませんが、部分的にゲーム化しています。