aoirint/reversi.html

## reversi.html
<!DOCTYPE html>
<!-- @lb1-sot -->
<meta charset="UTF-8">
<style>
body {
  margin: 0 auto;
}
</style>

<div style="text-align: center;">
  <canvas id="gcvs"></canvas>
</div>

<div id="out"></div>
<script>
(function() {
  var SCELL = 48;
  var BG = '#006600';
  var FG = '#FFFFFF';
  var CFG = '#888800';
  var SIDE = 8;
  var turnWhite = false;
  var cheat = false;

  var cells = [];
  for (var i=0; i<SIDE*SIDE; i++) cells[i] = 0;
  cells[SIDE/2*SIDE + SIDE/2 - 1] = 2;
  cells[SIDE/2*SIDE + SIDE/2] = 1;
  cells[(SIDE/2 - 1)*SIDE + SIDE/2 - 1] = 1;
  cells[(SIDE/2 - 1)*SIDE + SIDE/2] = 2;
  var cvs = document.getElementById('gcvs');
  var ctx = cvs.getContext('2d');
  var selectedX = -1, selectedY = -1;

  function init() {
    cvs.width = cvs.height = SIDE*SCELL;
    render();
  }


  function get(x, y) {
    return valid(x, y) ? cells[y*SIDE + x] : -1;
  }
  function set(x, y, cell) {
    cells[y*SIDE + x] = cell;
  }
  function valid(x, y) { return Math.min(x, y) >= 0 && Math.max(x, y) < SIDE; }
  function empty(x, y) { return !valid(x, y) || same(x, y, 0); }
  function same(x, y, b) { return valid(x, y) && get(x, y) == b; }
  function getNext() { return turnWhite ? 2 : 1; }

  function put(x, y, cell, demo) {
    var count = 0;
    if (!empty(x, y)) return count;
    if (!demo) set(x, y, cell);
    count ++;
    var i;
    for (var s=-1; s<=1; s++) {
      for (var t=-1; t<=1; t++) {
        if (s == 0 && t == 0) continue;
        for (i=1; valid(x+i*s, y+i*t) && !empty(x+i*s, y+i*t); i++) {
          if (same(x+i*s, y+i*t, cell)) {
            i --;
            count += i;
            if (!demo) for (; 0<i; i--) set(x+i*s, y+i*t, cell);
            break;
          }
        }
      }
    }

    return count;
  }

  function render() {
    ctx.fillStyle = BG;
    ctx.fillRect(0, 0, SIDE*SCELL, SIDE*SCELL);
    ctx.strokeStyle = FG;
    ctx.beginPath();
    for (var i=0; i<SIDE; i++) {
      ctx.moveTo(i*SCELL, 0);
      ctx.lineTo(i*SCELL, SIDE*SCELL);
      ctx.moveTo(0, i*SCELL);
      ctx.lineTo(SIDE*SCELL, i*SCELL);
    }
    ctx.stroke();
    for (var i=0; i<SIDE*SIDE; i++) {
      var x = i % SIDE;
      var y = Math.floor(i/SIDE);
      if (cells[i] != 0) {
        ctx.beginPath();
        ctx.fillStyle = cells[i] == 1 ? 'black' : 'white';
        ctx.arc(x * SCELL + SCELL/2, y * SCELL + SCELL/2, SCELL/2.5, 0, Math.PI*2);
        ctx.fill();
      }
      if (cheat) {
        var count = put(x, y, getNext(), true);
        if (count > 1) {
          ctx.fillStyle = '#8888FF';
          ctx.font = '12pt Arial';
          ctx.fillText(count - 1, x*SCELL + SCELL/2, y*SCELL + SCELL/2);
        }
      }
    }

    if (selectedX != -1) {
      ctx.beginPath();
      ctx.strokeStyle = CFG;
      ctx.rect(selectedX * SCELL, selectedY * SCELL, SCELL, SCELL);
      ctx.stroke();
    }
    out.innerText += '[' + selectedX + ',' +selectedY + ']';
  }

  cvs.addEventListener('click', function(e) {
    var x = e.offsetX || e.layerX;
    var y = e.offsetY || e.layerY;

    selectedX = Math.floor(x / SCELL);
    selectedY = Math.floor(y / SCELL);
    var cell = getNext();
    var count = put(selectedX, selectedY, cell, true);
    if (count > 1) {
      put(selectedX, selectedY, cell, false);
      turnWhite = ! turnWhite;
    }
    render();
  });

  init();
})();
</script>
	<!DOCTYPE html>
	<!-- @lb1-sot -->
	<meta charset="UTF-8">
	<style>
	body {
	margin: 0 auto;
	}
	</style>

	<div style="text-align: center;">
	<canvas id="gcvs"></canvas>
	</div>

	<div id="out"></div>
	<script>
	(function() {
	var SCELL = 48;
	var BG = '#006600';
	var FG = '#FFFFFF';
	var CFG = '#888800';
	var SIDE = 8;
	var turnWhite = false;
	var cheat = false;

	var cells = [];
	for (var i=0; i<SIDE*SIDE; i++) cells[i] = 0;
	cells[SIDE/2*SIDE + SIDE/2 - 1] = 2;
	cells[SIDE/2*SIDE + SIDE/2] = 1;
	cells[(SIDE/2 - 1)*SIDE + SIDE/2 - 1] = 1;
	cells[(SIDE/2 - 1)*SIDE + SIDE/2] = 2;
	var cvs = document.getElementById('gcvs');
	var ctx = cvs.getContext('2d');
	var selectedX = -1, selectedY = -1;

	function init() {
	cvs.width = cvs.height = SIDE*SCELL;
	render();
	}


	function get(x, y) {
	return valid(x, y) ? cells[y*SIDE + x] : -1;
	}
	function set(x, y, cell) {
	cells[y*SIDE + x] = cell;
	}
	function valid(x, y) { return Math.min(x, y) >= 0 && Math.max(x, y) < SIDE; }
	function empty(x, y) { return !valid(x, y) \|\| same(x, y, 0); }
	function same(x, y, b) { return valid(x, y) && get(x, y) == b; }
	function getNext() { return turnWhite ? 2 : 1; }

	function put(x, y, cell, demo) {
	var count = 0;
	if (!empty(x, y)) return count;
	if (!demo) set(x, y, cell);
	count ++;
	var i;
	for (var s=-1; s<=1; s++) {
	for (var t=-1; t<=1; t++) {
	if (s == 0 && t == 0) continue;
	for (i=1; valid(x+is, y+it) && !empty(x+is, y+it); i++) {
	if (same(x+is, y+it, cell)) {
	i --;
	count += i;
	if (!demo) for (; 0<i; i--) set(x+is, y+it, cell);
	break;
	}
	}
	}
	}

	return count;
	}

	function render() {
	ctx.fillStyle = BG;
	ctx.fillRect(0, 0, SIDESCELL, SIDESCELL);
	ctx.strokeStyle = FG;
	ctx.beginPath();
	for (var i=0; i<SIDE; i++) {
	ctx.moveTo(i*SCELL, 0);
	ctx.lineTo(iSCELL, SIDESCELL);
	ctx.moveTo(0, i*SCELL);
	ctx.lineTo(SIDESCELL, iSCELL);
	}
	ctx.stroke();
	for (var i=0; i<SIDE*SIDE; i++) {
	var x = i % SIDE;
	var y = Math.floor(i/SIDE);
	if (cells[i] != 0) {
	ctx.beginPath();
	ctx.fillStyle = cells[i] == 1 ? 'black' : 'white';
	ctx.arc(x * SCELL + SCELL/2, y * SCELL + SCELL/2, SCELL/2.5, 0, Math.PI*2);
	ctx.fill();
	}
	if (cheat) {
	var count = put(x, y, getNext(), true);
	if (count > 1) {
	ctx.fillStyle = '#8888FF';
	ctx.font = '12pt Arial';
	ctx.fillText(count - 1, xSCELL + SCELL/2, ySCELL + SCELL/2);
	}
	}
	}

	if (selectedX != -1) {
	ctx.beginPath();
	ctx.strokeStyle = CFG;
	ctx.rect(selectedX * SCELL, selectedY * SCELL, SCELL, SCELL);
	ctx.stroke();
	}
	out.innerText += '[' + selectedX + ',' +selectedY + ']';
	}

	cvs.addEventListener('click', function(e) {
	var x = e.offsetX \|\| e.layerX;
	var y = e.offsetY \|\| e.layerY;

	selectedX = Math.floor(x / SCELL);
	selectedY = Math.floor(y / SCELL);
	var cell = getNext();
	var count = put(selectedX, selectedY, cell, true);
	if (count > 1) {
	put(selectedX, selectedY, cell, false);
	turnWhite = ! turnWhite;
	}
	render();
	});

	init();
	})();
	</script>