58 lines
1.0 KiB
HTML
58 lines
1.0 KiB
HTML
<html>
|
|
<head>
|
|
<title>The Game of Life: HTML Canvas Demo</title>
|
|
<script language="javascript">
|
|
var size;
|
|
var speed;
|
|
var height;
|
|
var width;
|
|
|
|
|
|
function btn_control_set_name(name) {
|
|
var btn = document.getElementById('control-btn');
|
|
btn.value = name;
|
|
}
|
|
|
|
function board_init() {
|
|
btn_control_set_name('Start');
|
|
size = 10;
|
|
speed = 50;
|
|
redraw();
|
|
}
|
|
|
|
function redraw() {
|
|
var canvas = document.getElementById('board');
|
|
width = canvas.width;
|
|
height = canvas.height;
|
|
var c = canvas.getContext('2d');
|
|
draw_grid(c);
|
|
}
|
|
|
|
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);
|
|
}
|
|
c.stroke();
|
|
|
|
}
|
|
|
|
|
|
window.onload = board_init;
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<input type="button" id="control-btn"/>
|
|
<br/>
|
|
<canvas width="800" height="400" id="board" ></canvas>
|
|
</body>
|
|
</html>
|
|
|