Othello (board game)'s game

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

No:4270

1082

←

Prev Next

→

Othello (board game)
Developer User3769｜Date and time 23/6/27 17:50:51
Build time 47.196 sec｜Game capacity 3.674KB｜

Script

了解しました。以下がオセロの実装です。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解しました。以下がオセロの実装です。

<!DOCTYPE html>
<html>
<head>
	<title>オセロ</title>
	<style>
		td{
			width: 50px;
			height: 50px;
			border: 1px solid black;
			background-color: green;
			text-align: center;
			color: white;
			font-size: 30px;
			cursor: pointer;
		}
		table{
			border-collapse: collapse;
		}
		#player{
			font-size: 24px;
			color: black;
			margin-top: 10px;
		}
	</style>
</head>
<body>

var player = "black";
		var directions = [[0,1],[1,0],[0,-1],[-1,0],[1,1],[1,-1],[-1,1],[-1,-1]];

window.onload = function(){

var cells = document.querySelectorAll("td");
			for(var i = 0; i < cells.length; i++){
				cells[i].addEventListener("click", play);
			}

updatePlayer();

}

function play(){

if(this.innerHTML == ""){
				var row = this.parentNode.rowIndex;
				var col = this.cellIndex;
				var flips = [];

for(var i = 0; i < directions.length; i++){
					var r = row + directions[i][0];
					var c = col + directions[i][1];
					var count = 0;
					var current = [];

while(r >= 0 && r < 8 && c >= 0 && c < 8){
						var cell = document.querySelectorAll("tr")[r].querySelectorAll("td")[c];
						if(cell.innerHTML == ""){
							break;
						}
						if(cell.id == player){
							flips = flips.concat(current);
							break;
						}
						if(cell.id != player){
							count++;
							current.push(cell);
						}
						r += directions[i][0];
						c += directions[i][1];
					}
				}

if(flips.length > 0){
					this.innerHTML = player == "black" ? "⚫" : "⚪";
					this.style.background = player;
					for(var i = 0; i < flips.length; i++){
						flips[i].style.background = player;
						flips[i].id = player;
						flips[i].innerHTML = player == "black" ? "⚫" : "⚪";
					}
					player = player == "black" ? "white" : "black";
					updatePlayer();
					checkGameOver();
				}

}

function updatePlayer(){
			document.querySelector("#player").innerHTML = "Player: " + player.toUpperCase();
		}

function checkGameOver(){

var cells = document.querySelectorAll("td");
			var blackCount = 0;
			var whiteCount = 0;

for(var i = 0; i < cells.length; i++){
				if(cells[i].innerHTML == "⚪"){
					whiteCount++;
				}
				if(cells[i].innerHTML == "⚫"){
					blackCount++;
				}
			}

if(blackCount + whiteCount == 64){
				if(blackCount > whiteCount){
					alert("Game Over: Black wins!");
				} else if (blackCount < whiteCount) {
					alert("Game Over: White wins!");
				} else {
					alert("Game Over: Tie!");
				}
			}

}

</script>

</body>
</html>