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

    前言

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

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

    游戏规则

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

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

    1.     function calIter() {
    2.         var tmp = new Array(cellHeight).fill(0).map(() => new Array(cellWidth).fill(0));
    3.         for(let i=0; i
    4.             for(let j=0; j
    5.                 // 计算周围的细胞数
    6.                 let num = 0;
    7.                 if (i-1>=0 && j-1>=0 && cells[i-1][j-1]==1) num++;
    8.                 if (i-1>=0 && cells[i-1][j]==1) num++;
    9.                 if (i-1>=0 && cells[i-1][j+1]==1) num++;
    10.                 if (i+11][j]==1) num++;
    11.                 if (i+11>=0 && cells[i+1][j-1]==1) num++;
    12.                 if (i+111][j+1]==1) num++;
    13.                 if (j-1>=0 && cells[i][j-1]==1) num++;
    14.                 if (j+11]==1) num++;
    15.                 if (cells[i][j] == 0 && num >= 3) {
    16.                     tmp[i][j] = 1;
    17.                 } else if (num<=1 || num>4){
    18.                     tmp[i][j] = 0;
    19.                 }
    20.             }
    21.         }
    22.         for(let i=0; i
    23.             for(let j=0; j
    24.                 cells[i][j] = tmp[i][j];
    25.             }
    26.         }
    27.         rounds++;
    28.     }

    代码

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

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
    7.     
    8.     
    9.     <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.css" rel="stylesheet">
    10.     
    11.     <script src="https://unpkg.com/vue@3">script>
    12.     
    13.     <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.3/index.full.js">script>
    14.     
    15.     <title>hello worldtitle>
    16.     <style lang="scss">
    17.         #app {
    18.           font-family: Avenir, Helvetica, Arial, sans-serif;
    19.           -webkit-font-smoothing: antialiased;
    20.           -moz-osx-font-smoothing: grayscale;
    21.           text-align: center;
    22.           color: #2c3e50;
    23.           margin: 0;
    24.           padding: 0;
    25.         }
    26.         .gameCanvas {
    27.             /* background-color: burlywood; */
    28.             /* width: 60%; */
    29.             height: 650px;
    30.         }
    31.         .infoDiv {
    32.             /* background-color: darkcyan; */
    33.             /* width: 40%; */
    34.             height: 650px;
    35.         }
    36.         .el-text {
    37.             font-size: middle;
    38.             align: left;
    39.         }
    40.     style>
    41.   head>
    42.   <body>
    43.     <div id="app">
    44.         <el-container>
    45.             <el-header>
    46.                 <el-text style="text-align: center;" :size="large">
    47.                     <h1>生命游戏h1>
    48.                 el-text>
    49.             el-header>
    50.             <el-row>
    51.                 <el-col :span="14" class="gameCanvas">
    52.                     <canvas id="gameCanvas" width="600" height="600" style="border: gray solid 5px">canvas>  
    53.                 el-col>
    54.                 <el-col :span="10" class="infoDiv">
    55.                 <el-descriptions title="数据面板"
    56.                     :column="1"
    57.                     :size="large"
    58.                     :border="true">
    59.                     <el-descriptions-item label="存活的细胞数：">
    60.                         <el-text>
    61.                             <span id="span1">{{numSurvivors}} / {{numAll}}span>
    62.                         el-text>
    63.                     el-descriptions-item><br>
    64.                     <el-descriptions-item label="迭代轮次：">
    65.                         <el-text>
    66.                             <span id="span2">{{rounds}}span>
    67.                         el-text>
    68.                     el-descriptions-item>
    69.                     <el-descriptions-item label="当前状态：">
    70.                         <span id="span3">
    71.                             <el-text v-if="state==0">未开始迭代el-text>
    72.                             <el-text v-else-if="state==1">迭代进行中el-text>
    73.                             <el-text v-else>未知状态el-text>
    74.                         span>
    75.                     el-descriptions-item>
    76.                     <el-descriptions-item label="操作">
    77.                         <el-button type="primary" onclick="clickInitBtn()">初始化el-button>
    78.                         <el-button type="info" onclick="clickClearBtn()">清空面板el-button>
    79.                         <el-button type="success" onclick="clickStartBtn()">开始迭代el-button>
    80.                         <el-button type="danger" onclick="clickEndBtn()">结束迭代el-button>
    81.                     el-descriptions-item>
    82.                   el-descriptions>
    83.                 el-col>
    84.             el-row>
    85.         el-container>
    86.  
    87.     div>
    88.     
    89.   
    90.  
    91.   body>
    92.  
    93. html>
    94.  
    95.  
    96. <script type="text/javascript">
    97.     // 定义格子数以及每个格子的大小
    98.     var cellWidth = 30;
    99.     var cellHeight = 30;
    100.     var cellSize = 20;
    101.     // 定义一个二维数组存储每个格子的值
    102.     var cells = new Array(cellHeight).fill(0).map(() => new Array(cellWidth).fill(0));
    103.     var canvas;
    104.     var ctx;
    105.     var widht;
    106.     var height;
    107.  
    108.     var numSurvivors = 0;
    109.     var numAll = cellWidth*cellHeight;
    110.     var state = 0;
    111.     var rounds = 0;
    112.  
    113.     // 用于启动和停止定时任务
    114.     var myInterval;
    115.     // 迭代的间隔时间，单位是毫秒
    116.     var time = 500;
    117.  
    118.     // 计算存活细胞数
    119.     function calNumSurvivors() {
    120.         numSurvivors = 0;
    121.         for(let i=0; i
    122.             for(let j=0; j
    123.                 if (cells[i][j] == 1) {
    124.                     numSurvivors++;
    125.                 }
    126.             }
    127.         }
    128.     }
    129.  
    130.     // 随机初始化细胞
    131.     function randomInitLife() {
    132.         for(let i=0; i
    133.             for(let j=0; j
    134.                 if (Math.random() < 0.2) {
    135.                     cells[i][j] = 1;
    136.                 }
    137.             }
    138.         }
    139.     }
    140.  
    141.     // 清空面板中所有的细胞
    142.     function clearAllCells() {
    143.         cells = new Array(cellHeight).fill(0).map(() => new Array(cellWidth).fill(0));
    144.     }
    145.  
    146.     // 绘制一帧图像
    147.     function draw() {
    148.         ctx.lineWidth = 2;
    149.         ctx.strokeStyle = "gray"; 
    150.         ctx.lineJoin = 'round';
    151.         for(let i=0; i
    152.             for(let j=0; j
    153.                 if (cells[i][j] === 1) {
    154.                     ctx.fillStyle = "LightSalmon";
    155.                 } else {
    156.                     ctx.fillStyle = "AliceBlue";
    157.                 }
    158.                 ctx.fillRect(i*cellSize, j*cellSize, cellSize, cellSize);
    159.                 ctx.strokeRect(i*cellSize, j*cellSize, cellSize, cellSize);
    160.             }
    161.         }
    162.     }
    163.  
    164.     // 更新数据面板
    165.     function updateInfo() {
    166.         var span1 = document.getElementById("span1");
    167.         var span2 = document.getElementById("span2");
    168.         var span3 = document.getElementById("span3");
    169.         span1.innerText = numSurvivors + " / " + numAll;
    170.         span2.innerText = rounds;
    171.         if (state == 0) {
    172.             span3.innerText = "未开始迭代";
    173.         } else if (state == 1) {
    174.             span3.innerText = "迭代进行中";
    175.         } else {
    176.             span3.innerText = "未知状态";
    177.         }
    178.     }
    179.  
    180.     /**
    181.      * 每个细胞在每一轮的状态都依赖于其邻居的数量。
    182.      * 如果细胞的邻居数量少于一个，那么该细胞在下一次状态将死亡。
    183.      * 如果细胞的邻居数量超过四个，那么该细胞在下一次状态将死亡。
    184.      * 如果细胞的邻居数量为二或三个，那么该细胞下一次状态将稳定存活。
    185.      * 如果某位置原无细胞存活，但该位置的邻居数量为三个，那么该位置将复活一细胞。
    186.      * 
    187.     */
    188.     function calIter() {
    189.         var tmp = new Array(cellHeight).fill(0).map(() => new Array(cellWidth).fill(0));
    190.         for(let i=0; i
    191.             for(let j=0; j
    192.                 // 计算周围的细胞数
    193.                 let num = 0;
    194.                 if (i-1>=0 && j-1>=0 && cells[i-1][j-1]==1) num++;
    195.                 if (i-1>=0 && cells[i-1][j]==1) num++;
    196.                 if (i-1>=0 && cells[i-1][j+1]==1) num++;
    197.                 if (i+11][j]==1) num++;
    198.                 if (i+11>=0 && cells[i+1][j-1]==1) num++;
    199.                 if (i+111][j+1]==1) num++;
    200.                 if (j-1>=0 && cells[i][j-1]==1) num++;
    201.                 if (j+11]==1) num++;
    202.                 if (cells[i][j] == 0 && num >= 3) {
    203.                     tmp[i][j] = 1;
    204.                 } else if (num<=1 || num>4){
    205.                     tmp[i][j] = 0;
    206.                 }
    207.             }
    208.         }
    209.         for(let i=0; i
    210.             for(let j=0; j
    211.                 cells[i][j] = tmp[i][j];
    212.             }
    213.         }
    214.         rounds++;
    215.     }
    216.  
    217.     function run() {
    218.         calIter();
    219.         calNumSurvivors();
    220.         draw();
    221.         updateInfo();
    222.     } 
    223.  
    224.     function clickInitBtn(event) {
    225.         console.log("点击了 [初始化] 按钮");
    226.         if (state == 1) {
    227.             alert("还在迭代呢！");
    228.         }
    229.         clearAllCells();
    230.         randomInitLife();
    231.         calNumSurvivors();
    232.         draw();
    233.         updateInfo();
    234.     }
    235.     function clickClearBtn(event) {
    236.         console.log("点击了 [清空面板] 按钮");
    237.         rounds = 0;
    238.         clearAllCells();
    239.         calNumSurvivors();
    240.         draw();
    241.         updateInfo();
    242.     }
    243.     function clickStartBtn(event) {
    244.         console.log("点击了 [开始迭代] 按钮");
    245.         if (state == 0) {
    246.             state = 1;
    247.         }
    248.         myInterval = window.setInterval("run()", time);
    249.         updateInfo();
    250.     }
    251.     function clickEndBtn(event) {
    252.         console.log("点击了 [结束迭代] 按钮");
    253.         if (state == 1) {
    254.             state = 0;
    255.         }
    256.         clearInterval(myInterval);
    257.     }
    258.  
    259.     
    260.     const app = Vue.createApp({
    261.       mounted() {
    262.         canvas = document.getElementById("gameCanvas");
    263.         ctx = canvas.getContext('2d'); 
    264.         width = canvas.width;
    265.         height = canvas.height;
    266.         draw();
    267.       },
    268.       data() {
    269.         return {
    270.             numSurvivors : 0,
    271.             numAll : cellWidth*cellHeight,
    272.             state : 0,
    273.             rounds : 0,
    274.         }
    275.       },
    276.       methods() { 
    277.       }
    278.     }).use(ElementPlus).mount('#app');  
    279.     
    280.  
    281.     console.log("初始化结束")
    282. script>

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

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

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

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

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

    1.     function updateInfo() {
    2.         var span1 = document.getElementById("span1");
    3.         var span2 = document.getElementById("span2");
    4.         var span3 = document.getElementById("span3");
    5.         span1.innerText = numSurvivors + " / " + numAll;
    6.         span2.innerText = rounds;
    7.         if (state == 0) {
    8.             span3.innerText = "未开始迭代";
    9.         } else if (state == 1) {
    10.             span3.innerText = "迭代进行中";
    11.         } else {
    12.             span3.innerText = "未知状态";
    13.         }
    14.     }

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

    总结

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

  • 相关阅读:
    让org mode导出结果更好看
    AK F.*ing leetcode 流浪计划之半平面求交
    47-用户和权限管理
    数据湖还没玩明白，就别想着湖仓一体了！ by 傅一平
    ConsulManager开源项目推荐
    如何限制内网网速
    【C++ techniques】限制某个class所能产生的对象数量
    python异常处理
    圆弧插补【C#】
    es6 正则表达式
  • 原文地址：https://blog.csdn.net/haohulala/article/details/133845041