html5版生命游戏

2015/11/23 46090
<!DOCTYPE html>
<!--
生命游戏：
每个格子是一个细胞。
当一个格子周围有3个细胞生，该细胞为生。
周围有2个细胞生，该细胞生死不变。
其他情况，细胞死。
---------------D'T PH 7.0
-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta author="D'T PH 7.0">
    <title></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;
    }

    <!--start -->
    function start() {
        setTimeout(function () {
            reverse();
            paint();
            setTimeout(arguments.callee, 1000);
        }, 1000);
    }
</script>
</body>

</html>
代码片段
