Tile Pattern Game

by aholdorf

HTML

<input type="button" id="randomButton" value="Randomize">
<br/>
<div>
    <canvas id="canvas" width="400" height="400"></canvas>
</div>

CSS

div {
    margin: 2em;
}
#canvas{
  border: 1px solid black;
}

JavaScript

var g;
var grid = [];

function randomizeGrid(){
	grid = [];
  for(var i=0;i<5;i++){
  	var thisRow = [];
    var sum = 0;
  	for(var j=0;j<5;j++){
    	var value = Math.floor(Math.random()*2);
      sum += value;
    	thisRow.push(value);
    }
    thisRow.push(sum%2);
    grid.push(thisRow);
  }
  var thisRow = [];
  for(var j=0;j<6;j++){
  	var sum = 0;
    for(var i=0;i<5;i++){
    	sum += grid[i][j];
    }
    thisRow.push(sum%2);
  }
  grid.push(thisRow);
}

$(document).ready(function(){
	c = $("#canvas")[0];
  g = c.getContext("2d");
  randomizeGrid();
  draw();
});

$("#randomButton").on("click",function(){
	randomizeGrid();
  draw();
});

$("#canvas").on("mousedown",function(e){
  var rect = c.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  x -= 20;
  y -= 20;
  var i = Math.floor(x/60);
  var j = Math.floor(y/60);
  grid[i][j] = 1-grid[i][j];
  draw();
});

function draw(){
	g.fillStyle = "#FFFFFF";
  g.fillRect(0,0,400,400);
  for(var i=0;i<6;i++){
  	for(var j=0;j<6;j++){
    	if(grid[i][j] == 1){
      	g.fillStyle = "#0000CC";
      }else{
      	g.fillStyle = "#EEEE00";
      }
      g.fillRect(20+60*i,20+60*j,58,58);
    }
  }
}