javascript中的生命游戏代码出错_Javascript_Html_Html5 Canvas_Pixel Manipulation

javascript中的生命游戏代码出错

javascript html html5-canvas

javascript中的生命游戏代码出错,javascript,html,html5-canvas,pixel-manipulation,Javascript,Html,Html5 Canvas,Pixel Manipulation,我只是一个编程新手。在生命游戏的执行中，只有最初的模式出现。我这里没用网格。但为此调整了矩形的大小。代码不整洁。请提出建议，让我的代码工作 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="500" height="500" > </canvas> <script type="text/javascript"> <!

我只是一个编程新手。在生命游戏的执行中，只有最初的模式出现。我这里没用网格。但为此调整了矩形的大小。代码不整洁。请提出建议，让我的代码工作

<!DOCTYPE html>
<html>
  <body>
    <canvas id="myCanvas" width="500" height="500" >
    </canvas>
    <script type="text/javascript">
    <!--
                    var canvas = document.getElementById("myCanvas");  
                    var ctx = canvas.getContext("2d");
        var width= canvas.width;
        var height = canvas.height;

      function initial(){
                    var ctx = canvas.getContext("2d");
        for(var i=0;i<width;i+=10){
          for(var j=0;j<height;j+=10){
            ctx.fillStyle="white";
            if(Math.random()<0.05){
              ctx.fillStyle="black";
            }
            ctx.fillRect(i,j,9,9);
          }
        }
      }

      function fut(){
        var imageData = ctx.getImageData(0,0,width, height);
        var data = imageData.data;
        var future = [];
        for(var y=0;y<height;y+=10){
          for(var x=0;x<width;x+=10){
            var dead = data[((width/10*y)+x)*4];
            var numb=0;
            numb = life_around(x,y);
            check_life(numb, dead,future);
          }
        }

            ctx.clearRect(0, 0, width, height);  
            //ctx.putImageData(imageData, 0, 0);  
        for(var i=0;i<width;i+=10){
          for(var j=0;j<height;j+=10){
            var black =future[(width/10*y)+x)*4];
            ctx.fillStyle="white";
            if(black == 0){
              ctx.fillStyle="black";
            }
            ctx.fillRect(i,j,9,9);
          }
        }

        setTimeout(fut,1000);
        function check_life(numb, dead,future){
          if (dead == 0){
            if((numb ==2) || (numb == 3)){
              future.push(0);
              future.push(0);
              future.push(0);
              future.push(255);
            }
          }
          if ((dead!=0)&&(numb == 3)){
            future.push(0);
                        future.push(0);
                        future.push(0);
                        future.push(255);
          } 
          if((dead!=0)&&(numb!=3)){
                        future.push(255);
                        future.push(255);
                        future.push(255);
                        future.push(255);
          } 
        }

        function life_around(x,y){
          for(var i=-10;i<20;i+=10){
            for(var j=-10;j<20;j+=10){
              if((i!=0) || (j!=0)){
                var data_index=((width/10*(y+i))+(x+j))*4;  
                if((data_index >= 0) && (data[data_index]==0)){
                    numb++;
                }
              }
            }
          }
          return numb;
        }
      }

    function run(){
        initial();
        fut();
    }
    //-->
    </script>
    <p>Game of life</p>

    <form action="">
    <input type="button" value="initial" onClick="initial()" >
    <input type="button" value="run" onClick="run()" >
    </form>
  </body>
</html>


人生游戏

第43行，添加“（”：

请做小提琴，你能不能也张贴显示的错误信息？

 var black =future[((width/10*y)+x)*4];