html5版生命游戏

只有一个.html文件，无任何依赖。

使用canvas

1.[文件] index.html ~ 4KB     下载(206)

canvas {

background: #eeeeee;

border: 1px solid #c3c3c3;

}

button {

background: #aaaaaa;

}

start

var xOffset = 20;

var yOffset = 20;

var gridSize = 40;

var size = 10;

var board = new Array(

[1, 1, 0, 0, 0, 0, 0, 0, 0, 0],

[1, 1, 0, 0, 0, 0, 0, 0, 0, 0],

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

[0, 0, 0, 0, 0, 1, 0, 0, 0, 0],

[0, 0, 0, 0, 1, 0, 1, 0, 0, 0],

[0, 0, 0, 0, 1, 0, 1, 0, 0, 0],

[0, 0, 0, 0, 0, 1, 0, 0, 0, 0],

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);

var c = document.getElementById("myCanvas");

var cxt = c.getContext("2d");

cxt.fillStyle = "#FF0000";

paint();

function paint() {

cxt.fillStyle = "#eeeeee";

cxt.fillRect(0, 0, 500, 500);

cxt.fillStyle = "#00ff00";

for (var i = 0; i <= size; i++) {

cxt.moveTo(xOffset, yOffset + i * gridSize);

cxt.lineTo(xOffset + gridSize * size, yOffset + i * gridSize);

}

for (var i = 0; i <= size; i++) {

cxt.moveTo(xOffset + i * gridSize, yOffset);

cxt.lineTo(xOffset + i * gridSize, yOffset + gridSize * size);

}

cxt.stroke();

for (var x = 0; x < board.length; x++) {

for (var y = 0; y < board[x].length; y++) {

//alert(x+" "+y+" "+board[x][y]);

if (board[x][y] == 1) {

cxt.fillRect(xOffset + x * gridSize, yOffset + y * gridSize, gridSize - 1, gridSize - 1);

}

}

}

}

function mouseClick(event) {

var x = parseInt((event.layerX - xOffset) / gridSize);

var y = parseInt((event.layerY - yOffset) / gridSize);

board[x][y] = !board[x][y];

paint();

}

function reverse() {

var copy = board;

for (var i = 0; i < board.length; i++) {

for (var j = 0; j < board[i].length; j++) {

var count = aroundCount(i, j);

if (count == 3) {

copy[i][j] = 1;

} else if (count == 2) {

} else {

copy[i][j] = 0;

}

}

}

board = copy;

}

function aroundCount(x, y) {

var count = 0;

for (var i = x - 1; i <= x + 1; i++) {

for (var j = y - 1; j <= y + 1; j++) {

if (i < 0 || i >= board.length || j < 0 || j >= board.length) {

continue;

}

if (board[i][j]) {

count++;

}

}

}

if (board[x][y]) {

count--;

}

return count;

}

function start() {

setTimeout(function () {

reverse();

paint();

setTimeout(arguments.callee, 1000);

}, 1000);

}

2.[代码][HTML]代码

canvas {

background: #eeeeee;

border: 1px solid #c3c3c3;

}

button {

background: #aaaaaa;

}

start

var xOffset = 20;

var yOffset = 20;

var gridSize = 40;

var size = 10;

var board = new Array(

[1, 1, 0, 0, 0, 0, 0, 0, 0, 0],

[1, 1, 0, 0, 0, 0, 0, 0, 0, 0],

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

[0, 0, 0, 0, 0, 1, 0, 0, 0, 0],

[0, 0, 0, 0, 1, 0, 1, 0, 0, 0],

[0, 0, 0, 0, 1, 0, 1, 0, 0, 0],

[0, 0, 0, 0, 0, 1, 0, 0, 0, 0],

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);

var c = document.getElementById("myCanvas");

var cxt = c.getContext("2d");

cxt.fillStyle = "#FF0000";

paint();

function paint() {

cxt.fillStyle = "#eeeeee";

cxt.fillRect(0, 0, 500, 500);

cxt.fillStyle = "#00ff00";

for (var i = 0; i <= size; i++) {

cxt.moveTo(xOffset, yOffset + i * gridSize);

cxt.lineTo(xOffset + gridSize * size, yOffset + i * gridSize);

}

for (var i = 0; i <= size; i++) {

cxt.moveTo(xOffset + i * gridSize, yOffset);

cxt.lineTo(xOffset + i * gridSize, yOffset + gridSize * size);

}

cxt.stroke();

for (var x = 0; x < board.length; x++) {

for (var y = 0; y < board[x].length; y++) {

//alert(x+" "+y+" "+board[x][y]);

if (board[x][y] == 1) {

cxt.fillRect(xOffset + x * gridSize, yOffset + y * gridSize, gridSize - 1, gridSize - 1);

}

}

}

}

function mouseClick(event) {

var x = parseInt((event.layerX - xOffset) / gridSize);

var y = parseInt((event.layerY - yOffset) / gridSize);

board[x][y] = !board[x][y];

paint();

}

function reverse() {

var copy = board;

for (var i = 0; i < board.length; i++) {

for (var j = 0; j < board[i].length; j++) {

var count = aroundCount(i, j);

if (count == 3) {

copy[i][j] = 1;

} else if (count == 2) {

} else {

copy[i][j] = 0;

}

}

}

board = copy;

}

function aroundCount(x, y) {

var count = 0;

for (var i = x - 1; i <= x + 1; i++) {

for (var j = y - 1; j <= y + 1; j++) {

if (i < 0 || i >= board.length || j < 0 || j >= board.length) {

continue;

}

if (board[i][j]) {

count++;

}

}

}

if (board[x][y]) {

count--;

}

return count;

}

function start() {

setTimeout(function () {

reverse();

paint();

setTimeout(arguments.callee, 1000);

}, 1000);

}