2011-06-16 06:30:30 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>The Game of Life: HTML Canvas Demo</title>
|
|
|
|
|
<script language="javascript">
|
|
|
|
|
var size;
|
|
|
|
|
var speed;
|
|
|
|
|
var height;
|
|
|
|
|
var width;
|
2011-06-16 14:15:21 +00:00
|
|
|
var cells;
|
2011-06-16 06:30:30 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
function btn_control_set_name(name) {
|
|
|
|
|
var btn = document.getElementById('control-btn');
|
|
|
|
|
btn.value = name;
|
|
|
|
|
}
|
|
|
|
|
|
2011-06-16 14:15:21 +00:00
|
|
|
function init_cells() {
|
|
|
|
|
var hcells = height/size;
|
|
|
|
|
var wcells = width/size;
|
|
|
|
|
cells = new Array(hcells);
|
|
|
|
|
for(var i = 0; i < hcells; i++) {
|
|
|
|
|
cells[i] = new Array(wcells);
|
|
|
|
|
}
|
|
|
|
|
for (var y = 0; y < hcells; y++) {
|
|
|
|
|
for (var x = 0; x < wcells; x++) {
|
|
|
|
|
cells[y][x] = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2011-06-16 06:30:30 +00:00
|
|
|
function board_init() {
|
2011-06-16 14:15:21 +00:00
|
|
|
var canvas = document.getElementById('board');
|
|
|
|
|
width = canvas.width;
|
|
|
|
|
height = canvas.height;
|
2011-06-16 06:30:30 +00:00
|
|
|
btn_control_set_name('Start');
|
|
|
|
|
size = 10;
|
|
|
|
|
speed = 50;
|
2011-06-16 14:15:21 +00:00
|
|
|
init_cells();
|
2011-06-16 06:30:30 +00:00
|
|
|
redraw();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function redraw() {
|
|
|
|
|
var canvas = document.getElementById('board');
|
|
|
|
|
var c = canvas.getContext('2d');
|
|
|
|
|
draw_grid(c);
|
2011-06-16 14:15:21 +00:00
|
|
|
c.stroke();
|
|
|
|
|
|
|
|
|
|
cells[1][2] = true;
|
|
|
|
|
cells[3][4] = true;
|
|
|
|
|
cells[5][5] = true;
|
|
|
|
|
|
|
|
|
|
draw_cells(c);
|
|
|
|
|
c.stroke();
|
|
|
|
|
c.fill();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function draw_cells(c) {
|
|
|
|
|
var hcells = height/size;
|
|
|
|
|
var wcells = width/size;
|
|
|
|
|
for (var y = 0; y < hcells; y++) {
|
|
|
|
|
for (var x =0; x < wcells; x ++) {
|
|
|
|
|
if (cells[y][x] == true) {
|
|
|
|
|
c.moveTo(x*size, y*size);
|
|
|
|
|
c.lineTo(x*size+ size, y*size);
|
|
|
|
|
c.lineTo(x*size+ size, y*size + size);
|
|
|
|
|
c.lineTo(x*size, y*size + size);
|
|
|
|
|
// auto return home?
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2011-06-16 06:30:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function draw_grid(c) {
|
|
|
|
|
// Horizontal lines
|
|
|
|
|
for (var y = 0; y <= height; y += size) {
|
|
|
|
|
c.moveTo(0, y);
|
|
|
|
|
c.lineTo(width, y);
|
|
|
|
|
}
|
|
|
|
|
// Vertical lines
|
|
|
|
|
for (var x = 0; x <= width; x += size) {
|
|
|
|
|
c.moveTo(x, 0);
|
|
|
|
|
c.lineTo(x, height);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.onload = board_init;
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<input type="button" id="control-btn"/>
|
|
|
|
|
<br/>
|
|
|
|
|
<canvas width="800" height="400" id="board" ></canvas>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
