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

前言

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

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

游戏规则

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

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

    function calIter() {
        var tmp = new Array(cellHeight).fill(0).map(() => new Array(cellWidth).fill(0));
        for(let i=0; i=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=0 && cells[i+1][j-1]==1) num++;
                if (i+1=0 && cells[i][j-1]==1) num++;
                if (j+1= 3) {
                    tmp[i][j] = 1;
                } else if (num<=1 || num>4){
                    tmp[i][j] = 0;
                }
            }
        }
        for(let i=0; i

代码

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

  
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    

        
            
                
                    
生命游戏
                
            
            
                
                      
                
                
                
                    
                        
                            {{numSurvivors}} / {{numAll}}
                        
                    

                    
                        
                            {{rounds}}
                        
                    
                    
                        
                            未开始迭代
                            迭代进行中
                            未知状态
                        
                    
                    
                        初始化
                        清空面板
                        开始迭代
                        结束迭代
                    
                  
                
            
        

    
    
  
 
  

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

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

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

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

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

    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游戏，不过如果要做游戏的话，可能需要自己实现一下逻辑，还是挺复杂的。