HTML5游戏：生命游戏+代码

2024-09-05 12:19:11

字体：大中小

来源：转载

供稿：网友

HTML5生命游戏：每个格子是一个细胞。当一个格子周围有3个细胞生，该细胞为生。周围有2个细胞生，该细胞生死不变。其他情况，细胞死。作者By D'T PH 7.0。忙累了玩一玩，放松一下吧。

<!DOCTYPE html><html><meta charset="UTF-8"><title>HTML5生命游戏</title><style>canvas {    background: #eeeeee;    border: 1px solid #c3c3c3;}button {    background: #aaaaaa;}</style></head><body><canvas id="myCanvas" width="500" height="500" onclick="mouseClick(event)"></canvas></canvas><button onclick="start()">start</button><script type="text/javascript">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);}</script></body></html>

上一篇：点击后文字会炸开的HTML5特效图片爆炸效果

下一篇：HTML5仿android手机下滑菜单效果