Question

我一直在开发Conway的生命游戏的网页版本（不是那些有趣的游戏;请查阅）。最近，我偶然发现了一个错误的实际更新板/世界/无论你想要什么。当我尝试运行并调试代码时，会产生错误：

Uncaught TypeError: Cannot call method 'getElementsByTagName' of null

我已经仔细检查了代码。这就是我现在所拥有的：

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Conway's Game of Life</title>
<style>
body, body * {
  font-family:monospace;
  font-size:12px;
  line-height:50%;
}
span:hover{
  background-color:blue;
  cursor:crosshair;
}
</style>
<script>
//ASCII approach not to be changed.
window.onload=function(){
//to fix modulos bug
  Number.prototype.mod = function(n) {
    return ((this%n)+n)%n;
  }
  alert("Press q for help.");

  var isDraw=false;
  var rows=100;
  var columns=100;
  var isPlaying=false;
  var speed=200;
  var rtext="";
  for(var i=1;i<=rows;i++){
    var ctext="";
    for(var j=1;j<=columns;j++){
      ctext+="<span>.</span>";
    }
    rtext+="<div>"+ctext+"</div>";
  }
  document.body.innerHTML+=rtext;
  //Adds toggle to each cell
  function assignEvent(spanIndex){
    var column=(spanIndex.mod(columns));
    var row=(spanIndex-column)/columns;
    document.getElementsByTagName("span")[spanIndex].onclick=function(){
      toggle(row+1,column+1);
    };
    document.getElementsByTagName("span")[spanIndex].onmouseover=function(){
      if(isDraw){
        toggle(row+1,column+1);
      }
    };
  }
  for(var k=0;k<document.getElementsByTagName("span").length;k++){
    assignEvent(k);
  }

  function get(row,column){
    var rowM=row-1;
    var columnM=column-1;
    alert(rowM);
    var elem = document.getElementsByTagName("div").item(rowM).getElementsByTagName("span").item(columnM);
    //may want to add features to the function...
    return elem;
  }
  //function for changing cell value
  function set(row,column,val){
    get(row,column).innerHTML=val;
  }
  function toggle(row,column){
    if(get(row,column).innerHTML==="."){
      set(row,column,"0");
    }
    else{
      set(row,column,".");
    }
  }
  //END of gui implementation


  //START processer
    function down1(param){var result=param;var orig=param[0];result[0]=(orig+1).mod(rows);return result;}
    function up1(param){var result=param;var orig=param[0];result[0]=(orig+rows-1).mod(rows);return result;}
    function left1(param){var result=param;var orig=param[1];result[1]=(orig+columns-1).mod(columns);return result;}
    function right1(param){var result=param;var orig=param[1];result[1]=(orig+1).mod(columns);return result;}

    function interp(arrayc){return get(arrayc[0],arrayc[1]);}
  function getAdjacents(row,column){
    var out=[];
    var nw=[row,column];var n=[row,column];var ne=[row,column];var w=[row,column];var e=[row,column];var se=[row,column];var s=[row,column];var sw=[row,column];

    nw=up1(left1(nw));n=up1(n);ne=up1(right1(ne));w=left1(w);e=right1(e);sw=down1(left1(sw));s=down1(s);se=down1(right1(se));
    out=[interp(nw),interp(n),interp(ne),interp(w),interp(e),interp(sw),interp(s),interp(se)];
    return out;
  }
  function updateCell(row,column){
   var adjacents=getAdjacents(row,column);
   var adjacentsA=[];//alive
   var adjacentsB=[];//dead
    for(var s=0;s<adjacents;s++){
      if(adjacents[s].innerHTML==="0"){
        adjacentsA.push(adjacents[s]);
      }
      else{
        adjacentsB.push(adjacents[s]);
      }
    }
    if(get(row,column).innerHTML==="."){
      if(adjacentsA.length===3){
        toggle(row,column);
      }
    }
    else{
      if(adjacentsA.length!==3 && adjacentsA.length!==2){
        toggle(row,column);
      }
    }
  }
  function update(){
    for(var r=1;r<=rows;r++){
      for(var c=1;c<=columns;c++){
        updateCell(r,c);
      }
    }
  }
  //END processer
  var playInterval;
  function togglePlay(interval){
    if(isPlaying){
      clearInterval(playInterval);
      isPlaying=false;
    }
    else{
      playInterval=setInterval(function(){update();},interval);
    }
  }

  /*keyboard shortcuts:
    p=play/pause
    h=help
    i=zoom in
    o=zoom out
    d=draw
    s=set speed
    */
  document.body.onkeypress=function(e){
    var key=e.keyCode;
    //alert(key);
    if(key===112){togglePlay(speed);}
    else if(key===113){alert("p=play/pause\nh=help\ni=zoom in\no=zoom out\nd=draw\ns=set speed");}
    else if(key===100){if(isDraw){isDraw=false;}else{isDraw=true;}}
  };


};
</script>
</head>
<body>

</body>
</html>

解释所有代码非常困难，所以请在回答之前仔细阅读。看看你能否发现任何错误。我不想完全改变它，即使我知道许多算法过于复杂且效率低下。

我真的很沮丧，请尽量帮助我。

复杂代码中看不见的问题

0 个答案: