基于html+js编写的生命游戏

haohulala2023-10-15 21:37

前言

本文将介绍一个基于html+js的生命游戏，该项目只有一个html代码，无任何其他以来，UI方面采用了vue+element-plus进行渲染，游戏的界面基于canvas进行渲染，先来看一下成果。

我不知道游戏规则有没有写错，感觉经常会陷入循环中。

游戏规则

这边给出文心一言给出的游戏规则

根据以上规则写的代码如下

javascript 复制代码 
    function calIter() {
        var tmp = new Array(cellHeight).fill(0).map(() => new Array(cellWidth).fill(0));
        for(let i=0; i<cellWidth; i++) {
            for(let j=0; j<cellHeight; j++) {
                // 计算周围的细胞数
                let num = 0;
                if (i-1>=0 && j-1>=0 && cells[i-1][j-1]==1) num++;
                if (i-1>=0 && cells[i-1][j]==1) num++;
                if (i-1>=0 && cells[i-1][j+1]==1) num++;
                if (i+1<cellWidth && cells[i+1][j]==1) num++;
                if (i+1<cellWidth && j-1>=0 && cells[i+1][j-1]==1) num++;
                if (i+1<cellWidth && j+1<cellHeight && cells[i+1][j+1]==1) num++;
                if (j-1>=0 && cells[i][j-1]==1) num++;
                if (j+1<cellHeight && cells[i][j+1]==1) num++;
                if (cells[i][j] == 0 && num >= 3) {
                    tmp[i][j] = 1;
                } else if (num<=1 || num>4){
                    tmp[i][j] = 0;
                }
            }
        }
        for(let i=0; i<cellWidth; i++) {
            for(let j=0; j<cellHeight; j++) {
                cells[i][j] = tmp[i][j];
            }
        }
        rounds++;
    }

代码

所有的代码都写在了一个html里面，没有任何其他依赖，复制后就能运行，不过需要联网，因为通过cdn的方式引入了vue+element-plus。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.css" rel="stylesheet">
    <!-- 引入vue3 -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- 引入element plus -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.js"></script>
    
    <title>hello world</title>
    <style lang="scss">
        #app {
          font-family: Avenir, Helvetica, Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-align: center;
          color: #2c3e50;
          margin: 0;
          padding: 0;
        }
        .gameCanvas {
            /* background-color: burlywood; */
            /* width: 60%; */
            height: 650px;
        }
        .infoDiv {
            /* background-color: darkcyan; */
            /* width: 40%; */
            height: 650px;
        }
        .el-text {
            font-size: middle;
            align: left;
        }
    </style>
  </head>
  <body>
    <div id="app">
        <el-container>
            <el-header>
                <el-text style="text-align: center;" :size="large">
                    <h1>生命游戏</h1>
                </el-text>
            </el-header>
            <el-row>
                <el-col :span="14" class="gameCanvas">
                    <canvas id="gameCanvas" width="600" height="600" style="border: gray solid 5px"></canvas>  
                </el-col>
                <el-col :span="10" class="infoDiv">
                <el-descriptions title="数据面板"
                    :column="1"
                    :size="large"
                    :border="true">
                    <el-descriptions-item label="存活的细胞数：">
                        <el-text>
                            <span id="span1">{{numSurvivors}} / {{numAll}}</span>
                        </el-text>
                    </el-descriptions-item><br>
                    <el-descriptions-item label="迭代轮次：">
                        <el-text>
                            <span id="span2">{{rounds}}</span>
                        </el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label="当前状态：">
                        <span id="span3">
                            <el-text v-if="state==0">未开始迭代</el-text>
                            <el-text v-else-if="state==1">迭代进行中</el-text>
                            <el-text v-else>未知状态</el-text>
                        </span>
                    </el-descriptions-item>
                    <el-descriptions-item label="操作">
                        <el-button type="primary" onclick="clickInitBtn()">初始化</el-button>
                        <el-button type="info" onclick="clickClearBtn()">清空面板</el-button>
                        <el-button type="success" onclick="clickStartBtn()">开始迭代</el-button>
                        <el-button type="danger" onclick="clickEndBtn()">结束迭代</el-button>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
            </el-row>
        </el-container>

    </div>
    
  
 
  </body>

</html>


<script type="text/javascript">
    // 定义格子数以及每个格子的大小
    var cellWidth = 30;
    var cellHeight = 30;
    var cellSize = 20;
    // 定义一个二维数组存储每个格子的值
    var cells = new Array(cellHeight).fill(0).map(() => new Array(cellWidth).fill(0));
    var canvas;
    var ctx;
    var widht;
    var height;

    var numSurvivors = 0;
    var numAll = cellWidth*cellHeight;
    var state = 0;
    var rounds = 0;

    // 用于启动和停止定时任务
    var myInterval;
    // 迭代的间隔时间，单位是毫秒
    var time = 500;

    // 计算存活细胞数
    function calNumSurvivors() {
        numSurvivors = 0;
        for(let i=0; i<height/cellSize; i++) {
            for(let j=0; j<width/cellSize; j++) {
                if (cells[i][j] == 1) {
                    numSurvivors++;
                }
            }
        }
    }

    // 随机初始化细胞
    function randomInitLife() {
        for(let i=0; i<height/cellSize; i++) {
            for(let j=0; j<width/cellSize; j++) {
                if (Math.random() < 0.2) {
                    cells[i][j] = 1;
                }
            }
        }
    }

    // 清空面板中所有的细胞
    function clearAllCells() {
        cells = new Array(cellHeight).fill(0).map(() => new Array(cellWidth).fill(0));
    }

    // 绘制一帧图像
    function draw() {
        ctx.lineWidth = 2;
        ctx.strokeStyle = "gray"; 
        ctx.lineJoin = 'round';
        for(let i=0; i<height/cellSize; i++) {
            for(let j=0; j<width/cellSize; j++) {
                if (cells[i][j] === 1) {
                    ctx.fillStyle = "LightSalmon";
                } else {
                    ctx.fillStyle = "AliceBlue";
                }
                ctx.fillRect(i*cellSize, j*cellSize, cellSize, cellSize);
                ctx.strokeRect(i*cellSize, j*cellSize, cellSize, cellSize);
            }
        }
    }

    // 更新数据面板
    function updateInfo() {
        var span1 = document.getElementById("span1");
        var span2 = document.getElementById("span2");
        var span3 = document.getElementById("span3");
        span1.innerText = numSurvivors + " / " + numAll;
        span2.innerText = rounds;
        if (state == 0) {
            span3.innerText = "未开始迭代";
        } else if (state == 1) {
            span3.innerText = "迭代进行中";
        } else {
            span3.innerText = "未知状态";
        }
    }

    /**
     * 每个细胞在每一轮的状态都依赖于其邻居的数量。
     * 如果细胞的邻居数量少于一个，那么该细胞在下一次状态将死亡。
     * 如果细胞的邻居数量超过四个，那么该细胞在下一次状态将死亡。
     * 如果细胞的邻居数量为二或三个，那么该细胞下一次状态将稳定存活。
     * 如果某位置原无细胞存活，但该位置的邻居数量为三个，那么该位置将复活一细胞。
     * 
    */
    function calIter() {
        var tmp = new Array(cellHeight).fill(0).map(() => new Array(cellWidth).fill(0));
        for(let i=0; i<cellWidth; i++) {
            for(let j=0; j<cellHeight; j++) {
                // 计算周围的细胞数
                let num = 0;
                if (i-1>=0 && j-1>=0 && cells[i-1][j-1]==1) num++;
                if (i-1>=0 && cells[i-1][j]==1) num++;
                if (i-1>=0 && cells[i-1][j+1]==1) num++;
                if (i+1<cellWidth && cells[i+1][j]==1) num++;
                if (i+1<cellWidth && j-1>=0 && cells[i+1][j-1]==1) num++;
                if (i+1<cellWidth && j+1<cellHeight && cells[i+1][j+1]==1) num++;
                if (j-1>=0 && cells[i][j-1]==1) num++;
                if (j+1<cellHeight && cells[i][j+1]==1) num++;
                if (cells[i][j] == 0 && num >= 3) {
                    tmp[i][j] = 1;
                } else if (num<=1 || num>4){
                    tmp[i][j] = 0;
                }
            }
        }
        for(let i=0; i<cellWidth; i++) {
            for(let j=0; j<cellHeight; j++) {
                cells[i][j] = tmp[i][j];
            }
        }
        rounds++;
    }

    function run() {
        calIter();
        calNumSurvivors();
        draw();
        updateInfo();
    } 

    function clickInitBtn(event) {
        console.log("点击了 [初始化] 按钮");
        if (state == 1) {
            alert("还在迭代呢！");
        }
        clearAllCells();
        randomInitLife();
        calNumSurvivors();
        draw();
        updateInfo();
    }
    function clickClearBtn(event) {
        console.log("点击了 [清空面板] 按钮");
        rounds = 0;
        clearAllCells();
        calNumSurvivors();
        draw();
        updateInfo();
    }
    function clickStartBtn(event) {
        console.log("点击了 [开始迭代] 按钮");
        if (state == 0) {
            state = 1;
        }
        myInterval = window.setInterval("run()", time);
        updateInfo();
    }
    function clickEndBtn(event) {
        console.log("点击了 [结束迭代] 按钮");
        if (state == 1) {
            state = 0;
        }
        clearInterval(myInterval);
    }

    
    const app = Vue.createApp({
      mounted() {
        canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext('2d'); 
        width = canvas.width;
        height = canvas.height;
        draw();
      },
      data() {
        return {
            numSurvivors : 0,
            numAll : cellWidth*cellHeight,
            state : 0,
            rounds : 0,
        }
      },
      methods() { 
      }
    }).use(ElementPlus).mount('#app');  
    

    console.log("初始化结束")
</script>

思路非常简单，就是首先定义一个棋盘，然后每次迭代都计算一下结果，再将结果绘制在画布中，其中灰色表示死细胞，橙色表示活细胞。

在写代码的过程中遇到了两个坑：

  1. canvas不能使用css定义大小，否则画出来的图会扭曲

  2. 这段代码中的按钮的点击事件如果写在 Vue.createApp 中的 methods 中的话会调用不到，有知道为什么的小伙伴可以给我留言

  3. 在 Vue.createApp 中的 data 所返回的四个变量都是外部定义的全局变量（用var修饰的），我们在外部更新变量值的时候，页面不会自动渲染，所以我写了一个函数手动进行数据更新，这个原因我也不太懂，有知道的小伙伴可以给我留言，更新数据的代码如下

javascript 复制代码 
    function updateInfo() {
        var span1 = document.getElementById("span1");
        var span2 = document.getElementById("span2");
        var span3 = document.getElementById("span3");
        span1.innerText = numSurvivors + " / " + numAll;
        span2.innerText = rounds;
        if (state == 0) {
            span3.innerText = "未开始迭代";
        } else if (state == 1) {
            span3.innerText = "迭代进行中";
        } else {
            span3.innerText = "未知状态";
        }
    }

不过我觉得，像这种简单页面的数据渲染，也用不到vue，我们自己写几个dom操作就行，不过为了使用element-plus还是需要引入vue，毕竟我不太会布局。

总结

本次项目可以算是对canvas的简单应用吧，我发现其实可以用canvas做很多东西，甚至可以用来制作一些简单的2D游戏，不过如果要做游戏的话，可能需要自己实现一下逻辑，还是挺复杂的。

相关推荐
一路向前的月光1 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   1 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Fan_web1 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
Jiaberrr2 小时前
Element UI教程：如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
安冬的码畜日常4 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签（上）
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
太阳花ˉ4 小时前
html+css+js实现step进度条效果
javascript·css·html
科技资讯早知道4 小时前
java计算机毕设课设—坦克大战游戏
java·开发语言·游戏·毕业设计·课程设计·毕设
程序员大金4 小时前
基于SpringBoot+Vue+MySQL的装修公司管理系统
vue.js·spring boot·mysql
john_hjy4 小时前
11. 异步编程
运维·服务器·javascript
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04CTF网络安全大赛简单的web抓包题目：HEADache05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07pve(Proxmox VE)安装i225v网卡驱动08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10分享几个惊艳的 Three.js 个人站点