html5版生命游戏_html-js-css

概述html5版生命游戏

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家，也给大家做个参考。

<!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],[1,[0,0]);    var c = document.getElementByID("myCanvas");    var cxt = c.getContext("2d");    cxt.fillStyle = "#FF0000";    paint();    <!-- 主绘制函数 -->    function paint() {        cxt.fillStyle = "#eeeeee";        cxt.fillRect(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>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的html5版生命游戏全部内容，希望文章能够帮你解决html5版生命游戏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1090776.html