html记录之康威生命游戏（一）

原创

已于 2023-03-23 17:13:05 修改 · 887 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #游戏 #javascript

于 2023-03-23 16:27:13 首次发布

该文章介绍了如何使用HTML和JavaScript实现康威生命游戏，这是一种基于元胞自动机的规则，通过细胞的生死状态模拟动态变化。文中提供了代码示例，包括游戏的初始化、格子创建、颜色转换事件以及游戏的开始和暂停功能。

html记录之康威生命游戏（一）

第一版代码内容，有待优化的代码。

html记录之康威生命游戏（二）
html记录之康威生命游戏（三）

生命游戏是康威发明的，一种基于元胞自动机下的一种特殊规则，这个规则很简单，但是很强大，这个规则仿佛赋予了静态的东西有了生命一样在运动，有生存和死亡。

生命游戏规则：
每个细胞的生或者死均由周围的8个细胞决定，如果周围生命过多，将会因为资源不足而死亡，如果周围生命过少将会因为孤独而死亡，只有周围生命刚刚好才能处于生的状态。
规则一：如果周围细胞数大于3或者小于2，将会因为资源不足或者孤独而死。
规则二：如果周围刚好有3个细胞，如果原来是生则不变，如果是死将变为生，即为生命的诞生。
规则三：如果周围刚好有2个细胞，那么无论是生是死都不发生任何改变。

实现代码如下：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="hwq">
        <title>康威生命游戏</title>
        <style>
            *{
   
   
                box-sizing: border-box;
            }
            #content{
   
   
                width: 1502px;
                height: 902px;
                border: 1px solid #666;
                margin: 0;
                position: relative;
            }
            #zanting{
   
   
                margin: 0 auto;
            }
            #restart{
   
   
                margin: 0 auto;
            }
            .cell{
   
   
                border: 1px solid #999;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <button id="zanting">开始暂停</button>
        <button id="restart">初始化</button>
        <div id="content">
            
        </div>
        <script>
            console.log("初始化生命游戏");
            let zanting = document.getElementById('zanting');//获取暂停按钮dom元素
            let restart = document.getElementById('restart');//获取重新开始dom元素
            let content = document.getElementById("content");//获取容器dom元素
            let width = content.clientWidth;//容器宽度
            let height = content.clientHeight;//容器高度
            let sizeLeft = 250;//横向格子数
            let sizeTop = 150;//纵向格子数
            let sizeLeftCal = sizeLeft - 1;//横向坐标上限
            let sizeTopCal = sizeTop - 1;//纵向坐标上限
            let cellWidth = width/sizeLeft;//单个格子宽度
            let cellHeight = height/sizeTop;//单个格子高度
            let lifeCount = 0;//存活计数
            let clickStatus = true;//是否可点击，开始之后不再点亮格子
            let lifeReal = {
   
   };//保存所有存活格子，存活放入，死亡移除
            let lifeRealJudge = {
   
   };//保存所有需要判断周围生存数量的格子
            let lifeDead = {
   
   };//保存所有需要死亡的格子，死亡放入
            let generation = 1;//演化代数
            console.log("width:" + width);
            console.log("height:" + height);
            console.log("sizeLeft:" + sizeLeft);
            console.log("sizeTop:" + sizeTop);
            console.log("cellWidth:" + cellWidth);
            console.log("cellHeight:" + cellHeight);
            //格子实时信息0死1生
            let cellArray = new Array();
            //格子周围实时数量信息（用来判断下一轮生和死的状态）
            //也可以不保存实时数量，采用周围8个格子的方式判断生和死
            let cellLife = new Array();
            //初始化
            createCells();
            //新建格子
            function createCells(){
   
   
                for(let i=0; i<sizeLeft; i++){
   
   
                    cellArray[i] = new Array();
                    cellLife[i] = new Array();
                    for(let j=0; j<sizeTop; j++){
   
   
                        createCell(i, j);
                        cellArray[i][j] = 0;
                        cellLife[i][j] = 0;
                    }
                }
            }
            //新建格子
            function createCell(i, j){
   
   
                let div = document.createElement("div");
                div.id = "cell-" + i + "-" + j;
                div.style.width = cellWidth;
                div.style.height = cellHeight;
                div.style.left = (cellWidth*i) + "px";
                div.style.top = (cellHeight*j) + "px";
                // div.style.fontSize = 5;
                // div.innerHTML = i + "" + j;
                div.setAttribute("class", "cell");
                div.addEventListener("click", colorChange, false);//绑定格子颜色转换事件
                content.appendChild(div);
            }
            //格子颜色转换事件
            function colorChange(){
   
   
                if(!clickStatus){
   
   
                    return;
                }
                console.log(this.id);
                let arr = this.id.split("-");
                let i = arr[1] * 1;
                let j = arr[2] * 1;
                if(this.style.backgroundColor){
   
   
                    this.style.backgroundColor = "";
                    if(cellArray[i][j] == 1){
   
   
                        lifeNumber(i, j, -1, cellLife);
                        lifeCount--;
                        delete lifeReal["cell-" + i + "-" + j];
                        // delete lifeRealJudge["cell-" + i + "-" + j];
                        // delete lifeRealJudge["cell-" + i + "-" + (j-1)];
                        // delete lifeRealJudge["cell-" + i + "-" +

最低0.47元/天解锁文章