grid
CSS
body {
background: lightblue;
}
canvas {
background: #fff;
margin: 20px;
}
JavaScript
//grid width and height
var num_rows = 30;
var num_cols = 30;
var cell_width = 40;
var cell_height = 40;
//size of canvas
var cw = num_cols * cell_width;
var ch = num_rows * cell_height;
var selected_cell = {
r: 0,
c: 0,
}
var actions = Array();
var grid = new Array(num_rows);
for (var i = 0; i < num_rows; i++) {
grid[i] = new Array(num_cols);
}
function initGrid(upper_value, lower_value) {
for(var r=0; r<num_rows;r++) {
for (var c=0;c < num_cols;c++) {
grid[r][c] = 0;
}
}
grid[0][Math.floor(num_cols / 2)] = upper_value;
grid[1][Math.floor(num_cols / 2)] = lower_value;
actions.length=0;
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function getCell(pos) {
return {
c: Math.floor(pos.x / cell_width),
r: Math.floor(pos.y / cell_height)
};
}
var description = $('<div>').appendTo('body').get(0);
description.innerText = "Select any non-empty cell with a mouse and press left/right/up/down. This will subtract 1 from the selected value and add 1 to two cells on the left/right/up/down. The goal is to make all cells equal 1 (i.e. get rid of black cells). Also you can press U to undo last action";
$('<br/>').appendTo(description);
var link53 = $('<a>').attr({href:"#"}).appendTo(description).get(0);
link53.innerText = "Play 5-3 variant (easy)";
$('<br/>').appendTo(description);
var link85 = $('<a>').attr({href:"#"}).appendTo(description).get(0);
link85.innerText = "Play 8-5 variant (hard)";
link53.onclick = function(){initGrid(5,3); drawBoard();}
link85.onclick = function(){initGrid(8,5); drawBoard();}
var canvas = $('<canvas/>').attr({width: cw, height: ch, tabindex: 1}).appendTo('body').get(0);
var actions_display = $('<div>').appendTo('body').get(0);
function doMouseMove(event){
var pos = getMousePos(canvas, event);
var cell = getCell(pos);
selected_cell = cell;
...