kazasiki/WhiteDay_Reversi.html

## WhiteDay_Reversi.html
<!DOCTYPE html>
<html>
<head>
<title>WhiteDay_Reversi</title>
</head>
<body>
<p>
ホワイトデーということでちょっとした遊びをご用意しました。<br>
息抜きにでも遊んでくださると幸いです(^^)<br>
<font color="red">HTML5を使用したので比較的新しいブラウザ（IEなら9以降）でしか動作しませんorz</font><br>
<br>
【ルール】<br>
4x4のマスが白と黒で塗り分けられています。<BR>
任意のマスについて、そのマスをクリックすると、その行と列の色をすべて反転（白→黒、黒→白）します。<BR>
この作業を繰り返し行うことで、すべてのマスを「白」に変更してください。<BR>
</p>
<canvas id="canvas" width="260" height="260"></canvas><br>
<input type="button" onClick="init_board()" value = "最初の状態に戻る">
<div id="clear">
<p>クリアおめでとうございます！ ハッピーホワイトデー！！</p>
<p>（もう一度プレイする場合は「最初の状態に戻る」ボタンを押してください）</p>
</div>
<script type="text/javascript">
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
var canvas_size = 4;
var square_size = (250 - 10)/canvas_size;
var board = [
		[2, 1, 1, 2],
		[1, 2, 2, 1],
		[1, 2, 2, 1],
		[2, 1, 1, 2]
	];
var clearState = false;

function init_board(){
	board = [
		[2, 1, 1, 2],
		[1, 2, 2, 1],
		[1, 2, 2, 1],
		[2, 1, 1, 2]
	]
	drawBoard()
	document.getElementById("clear").style.display="none"
	clearState = false
}

function drawStone(x, y, c) {
	if (c == 1) {
		ctx.fillStyle = "black"
	} else if (c == 2) {
		ctx.fillStyle = "white"
	} else {
		return
	}
	ctx.beginPath()
	ctx.arc(x * square_size + square_size * 2 / 3, y * square_size + square_size * 2 / 3, square_size * 7/ 15, 0, 2 * Math.PI)
	ctx.fill()
}

function drawBoard() {
	ctx.fillStyle = "green"
	ctx.fillRect(0, 0, canvas.width, canvas.height)
	ctx.strokeStyle = "black"
	for (var i = 0; i <= canvas_size; i++){
		ctx.beginPath()
		ctx.moveTo(i * square_size + 10, 10)
		ctx.lineTo(i * square_size + 10, 250)
		ctx.moveTo( 10, i * square_size + 10)
		ctx.lineTo(250, i * square_size + 10)
		ctx.stroke()
	}
	for (var y = 0; y < canvas_size; y++) {
		for (var x = 0; x < canvas_size; x++) {
			drawStone(x, y, board[y][x])
		}
	}
}

function reverse(x, y) {
	if (0 <= x && x < canvas_size && 0 <= y && y < canvas_size) {
		for(var i=0;i<canvas_size;i++){
			board[y][i] = notValue(board[y][i])
			board[i][x] = notValue(board[i][x])
		}
		board[y][x] = notValue(board[y][x])
	}
}

function notValue(board_value){
	if (board_value == 2) {
		return 1
	} else {
		return 2
	}
}

function check(){

	var result = 0;
	for (var y = 0; y < canvas_size; y++) {
		for (var x = 0; x < canvas_size; x++) {
			if(board[y][x] == 1 ){
				result++;
			}
		}
	}

	return result
}

drawBoard()
init_board()

canvas.onmousedown = function(e) {
	if(clearState == false){
		var r = canvas.getBoundingClientRect()
		var x = Math.floor((e.clientX - r.left - 10) / square_size)
		var y = Math.floor((e.clientY - r.top - 10) / square_size)
		reverse(x, y)
		drawBoard()
		if(check() == 0){
			document.getElementById("clear").style.display="block"
			clearState = true;
		}
	}
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>WhiteDay_Reversi</title>
	</head>
	<body>
	<p>
	ホワイトデーということでちょっとした遊びをご用意しました。<br>
	息抜きにでも遊んでくださると幸いです(^^)<br>
	<font color="red">HTML5を使用したので比較的新しいブラウザ（IEなら9以降）でしか動作しませんorz</font><br>
	<br>
	【ルール】<br>
	4x4のマスが白と黒で塗り分けられています。<BR>
	任意のマスについて、そのマスをクリックすると、その行と列の色をすべて反転（白→黒、黒→白）します。<BR>
	この作業を繰り返し行うことで、すべてのマスを「白」に変更してください。<BR>
	</p>
	<canvas id="canvas" width="260" height="260"></canvas><br>
	<input type="button" onClick="init_board()" value = "最初の状態に戻る">
	<div id="clear">
	<p>クリアおめでとうございます！ハッピーホワイトデー！！</p>
	<p>（もう一度プレイする場合は「最初の状態に戻る」ボタンを押してください）</p>
	</div>
	<script type="text/javascript">
	var canvas = document.getElementById("canvas")
	var ctx = canvas.getContext("2d")
	var canvas_size = 4;
	var square_size = (250 - 10)/canvas_size;
	var board = [
	[2, 1, 1, 2],
	[1, 2, 2, 1],
	[1, 2, 2, 1],
	[2, 1, 1, 2]
	];
	var clearState = false;

	function init_board(){
	board = [
	[2, 1, 1, 2],
	[1, 2, 2, 1],
	[1, 2, 2, 1],
	[2, 1, 1, 2]
	]
	drawBoard()
	document.getElementById("clear").style.display="none"
	clearState = false
	}

	function drawStone(x, y, c) {
	if (c == 1) {
	ctx.fillStyle = "black"
	} else if (c == 2) {
	ctx.fillStyle = "white"
	} else {
	return
	}
	ctx.beginPath()
	ctx.arc(x * square_size + square_size * 2 / 3, y * square_size + square_size * 2 / 3, square_size * 7/ 15, 0, 2 * Math.PI)
	ctx.fill()
	}

	function drawBoard() {
	ctx.fillStyle = "green"
	ctx.fillRect(0, 0, canvas.width, canvas.height)
	ctx.strokeStyle = "black"
	for (var i = 0; i <= canvas_size; i++){
	ctx.beginPath()
	ctx.moveTo(i * square_size + 10, 10)
	ctx.lineTo(i * square_size + 10, 250)
	ctx.moveTo( 10, i * square_size + 10)
	ctx.lineTo(250, i * square_size + 10)
	ctx.stroke()
	}
	for (var y = 0; y < canvas_size; y++) {
	for (var x = 0; x < canvas_size; x++) {
	drawStone(x, y, board[y][x])
	}
	}
	}

	function reverse(x, y) {
	if (0 <= x && x < canvas_size && 0 <= y && y < canvas_size) {
	for(var i=0;i<canvas_size;i++){
	board[y][i] = notValue(board[y][i])
	board[i][x] = notValue(board[i][x])
	}
	board[y][x] = notValue(board[y][x])
	}
	}

	function notValue(board_value){
	if (board_value == 2) {
	return 1
	} else {
	return 2
	}
	}

	function check(){

	var result = 0;
	for (var y = 0; y < canvas_size; y++) {
	for (var x = 0; x < canvas_size; x++) {
	if(board[y][x] == 1 ){
	result++;
	}
	}
	}

	return result
	}

	drawBoard()
	init_board()

	canvas.onmousedown = function(e) {
	if(clearState == false){
	var r = canvas.getBoundingClientRect()
	var x = Math.floor((e.clientX - r.left - 10) / square_size)
	var y = Math.floor((e.clientY - r.top - 10) / square_size)
	reverse(x, y)
	drawBoard()
	if(check() == 0){
	document.getElementById("clear").style.display="block"
	clearState = true;
	}
	}
	}

	</script>
	</body>
	</html>