HTML5游戏：生命游戏+代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

HTML5游戏：生命游戏+代码

分类

游戏

描述

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