dan
/
Life-Canvas
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Life-Canvas/life.html

194 lines
4.2 KiB
HTML
Raw Normal View History

initial commit
2011-06-16 06:30:30 +00:00
<html>
<head>
<title>The Game of Life: HTML Canvas Demo</title>
<script language="javascript">
var size;
most of step function
2011-06-20 05:39:10 +00:00
var hertz;
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
var height_px;
var width_px;
var height_c;
var width_c;
Basic cell drawing
2011-06-16 14:15:21 +00:00
var cells;
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
var timer;
initial commit
2011-06-16 06:30:30 +00:00
function btn_control_set_name(name) {
var btn = document.getElementById('control-btn');
btn.value = name;
}
most of step function
2011-06-20 05:39:10 +00:00
function gen_cells() {
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
var new_cells = new Array(height_c);
for(var i = 0; i < height_c; i++) {
new_cells[i] = new Array(width_c);
Basic cell drawing
2011-06-16 14:15:21 +00:00
}
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
for (var y = 0; y < height_c; y++) {
for (var x = 0; x < width_c; x++) {
most of step function
2011-06-20 05:39:10 +00:00
new_cells[y][x] = false;
Basic cell drawing
2011-06-16 14:15:21 +00:00
}
}
most of step function
2011-06-20 05:39:10 +00:00
return new_cells;
}
function init_cells() {
cells = gen_cells();
Basic cell drawing
2011-06-16 14:15:21 +00:00
}
initial commit
2011-06-16 06:30:30 +00:00
function board_init() {
Basic cell drawing
2011-06-16 14:15:21 +00:00
var canvas = document.getElementById('board');
initial commit
2011-06-16 06:30:30 +00:00
size = 10;
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
width_px = canvas.width;
width_c = width_px/ size;
height_px = canvas.height;
height_c = height_px/size;
btn_control_set_name('Start');
most of step function
2011-06-20 05:39:10 +00:00
hertz = 4;
Basic cell drawing
2011-06-16 14:15:21 +00:00
init_cells();
initial commit
2011-06-16 06:30:30 +00:00
redraw();
}
function redraw() {
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
console.log('redraw()');
initial commit
2011-06-16 06:30:30 +00:00
var canvas = document.getElementById('board');
var c = canvas.getContext('2d');
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
c.globalCompositeOperation = 'destination-over';
c.clearRect(0, 0, width_px, height_px);
c.fillStyle='rgba(0,0,0,0.)';
c.strokeStyle= 'rgba(192,192,192,1)';
c.save();
c.beginPath();
initial commit
2011-06-16 06:30:30 +00:00
draw_grid(c);
Basic cell drawing
2011-06-16 14:15:21 +00:00
c.stroke();
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
c.strokeStyle= 'rgba(0,0,0,1)';
c.fillStyle = c.strokeStyle;
c.beginPath();
Basic cell drawing
2011-06-16 14:15:21 +00:00
draw_cells(c);
c.stroke();
c.fill();
}
function draw_cells(c) {
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
for (var y = 0; y < height_c; y++) {
for (var x =0; x < width_c; x ++) {
Basic cell drawing
2011-06-16 14:15:21 +00:00
if (cells[y][x] == true) {
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
c.moveTo(x*size +1, y*size+1);
c.lineTo(x*size+ size-1, y*size+1);
c.lineTo(x*size+ size-1, y*size + size-1);
c.lineTo(x*size+1, y*size + size-1);
Basic cell drawing
2011-06-16 14:15:21 +00:00
// auto return home?
}
}
}
initial commit
2011-06-16 06:30:30 +00:00
}
function draw_grid(c) {
// Horizontal lines
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
for (var y = 0; y <= height_px; y += size) {
initial commit
2011-06-16 06:30:30 +00:00
c.moveTo(0, y);
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
c.lineTo(width_px, y);
initial commit
2011-06-16 06:30:30 +00:00
}
// Vertical lines
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
for (var x = 0; x <= width_px; x += size) {
initial commit
2011-06-16 06:30:30 +00:00
c.moveTo(x, 0);
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
c.lineTo(x, height_px);
initial commit
2011-06-16 06:30:30 +00:00
}
}
window.onload = board_init;
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
function cell_value(x, y) {
//console.log('(x:' + x + ',y:' + y + ') w/s:' + (width/size) + ' h/s:' + (height/size) );
if (x < 0 || x >= width_c || y < 0 || y >= height_c) {
return 0;
} else {
return cells[y][x];
}
}
function num_neighbours(x, y) {
var n = 0;
n += cell_value(x-1, y-1);
n += cell_value(x, y-1);
n += cell_value(x+1, y-1);
n += cell_value(x-1, y);
n += cell_value(x+1, y);
n += cell_value(x-1, y+1);
n += cell_value(x, y+1);
n += cell_value(x+1, y+1);
return n;
}
most of step function
2011-06-20 05:39:10 +00:00
function step() {
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
var new_cells = gen_cells();
for(var y=0; y < height_c; y++) {
for(var x =0 ; x < width_c; x++) {
most of step function
2011-06-20 05:39:10 +00:00
var n = num_neighbours(x, y);
if (cells[y][x] == true) {
if (n < 2 || n > 3) {
new_cells[y][x] = false;
} else {
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
console.log('ALIVE');
most of step function
2011-06-20 05:39:10 +00:00
new_cells[y][x] = true;
}
} else if (n == 3) {
new_cells[y][x] = true;
} else {
new_cells[y][x] = false;
}
}
}
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
//new_cells[Math.floor(Math.random()*8)][ Math.floor(Math.random()*8) ] = true;
cells = new_cells;
}
function control_click() {
var btn = document.getElementById('control-btn');
if (btn.value == 'Start') {
tick();
btn.value = 'Stop';
} else {
clearTimeout(timmer);
btn.value = 'Start';
}
}
function tick() {
step();
redraw();
timmer = setTimeout('tick();', 1000/hertz);
most of step function
2011-06-20 05:39:10 +00:00
}
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
function board_click(e) {
var canvas = document.getElementById('board');
var x = Math.floor((e.pageX-canvas.offsetLeft)/size);
var y = Math.floor((e.pageY-canvas.offsetTop)/size);
console.log(e.pageX + '/' + size + ' = ' + x + ' && ' + e.pageY + '/' + size + ' = ' +y);
cells[y][x] = ! cells[y][x];
redraw();
}
initial commit
2011-06-16 06:30:30 +00:00
</script>
</head>
<body>
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
<input type="button" id="control-btn" onClick="control_click(); return false;" />
initial commit
2011-06-16 06:30:30 +00:00
<br/>
basic working simulator hooked up to interface -- first 'it's alive' moment
2011-06-20 06:43:31 +00:00
<canvas width="800" height="400" id="board" onClick="board_click(event);"></canvas>
initial commit
2011-06-16 06:30:30 +00:00
</body>
</html>