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

No:50

340

←

Prev Next

→

reversible
Developer anonymous｜Date and time 23/5/6 2:43:23
Build time 62.508 sec｜Game capacity 2.746KB｜

Script

reversible

Black stones are marked with ● and white stones are marked with ○ will be displayed.

Click on a stone to turn over the opponents stone.

The state of the board is automatically saved in the URL.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>リバーシ</title>
	<meta charset="UTF-8">
	<style>
		body{
			font-size: 24px;
			text-align: center;
			padding-top: 50px;
		}

button{
			font-size: 24px;
			padding: 10px 20px;
			margin: 20px;
			border-radius: 10px;
			background-color: white;
			color: black;
		}

.black{
			background-color: black;
		}

.white{
			background-color: white;
		}
	</style>
</head>
<body>
	<h1>リバーシ</h1>
	<p>黒い石は"●"、白い石は"○"と表示されます。</p>
	<p>石をクリックすると相手の石を裏返せます。</p>
	<p>盤面の状態はURLに自動保存されます。</p>
	<div id="board"></div>
	<button onclick="reset()">リセットする</button>
	<script>
		var SIZE = 8;
		var currColor = "black";
		var board = [];
		var divs = [];

for(var i=0;i<SIZE;i++){
			board[i] = [];
			divs[i] = [];
			for(var j=0;j<SIZE;j++){
				board[i][j] = "";
				var div = document.createElement("div");
				div.style.width = "50px";
				div.style.height = "50px";
				div.style.display = "inline-block";
				if((i+j)%2==0){
					div.classList.add("black");
				}else{
					div.classList.add("white");
				}
				div.addEventListener("click", function(x, y){
					return function(){
						if(board[x][y]==""){
							var flippables = findFlippables(x, y);
							if(flippables.length > 0){
								board[x][y] = currColor;
								for(var i=0;i<flippables.length;i++){
									board[flippables[i][0]][flippables[i][1]] = currColor;
								}
								currColor = (currColor=="black"?"white":"black");
								updateBoard();
							}
						}
					}
				}(i, j));
				document.getElementById("board").appendChild(div);
				divs[i][j] = div;
			}
			document.getElementById("board").appendChild(document.createElement("br"));
		}

function updateBoard(){
			for(var i=0;i<SIZE;i++){
				for(var j=0;j<SIZE;j++){
					divs[i][j].innerText = (board[i][j]=="black"?"●":(board[i][j]=="white"?"○":""));
				}
			}
		}

function reset(){
			currColor = "black";
			for(var i=0;i<SIZE;i++){
				for(var j=0;j<SIZE;j++){
					board[i][j] = "";
				}
			}
			updateBoard();
		}
	</script>
</body>
</html>