Javascript 蛇游戏（按键）_Javascript_Syntax Error_Keypress

Javascript 蛇游戏（按键）

javascript

Javascript 蛇游戏（按键）,javascript,syntax-error,keypress,Javascript,Syntax Error,Keypress,通过按到w，a和d字符方块可以移动到以下各边一个方块。但按s将移动父div的底部。请帮助我确定错误蛇类游戏 .项目{ 宽度：50px；高度：50px；边框：1px纯白；浮动：左；背景色：#04293c； } window.addEventListener（“按键”，右，假）； window.addEventListener（“按键”，左，假）； window.addEventListener（“按键”，向下，假）； window.addEventListener（“按键”，向上，假）

通过按到

，

和

字符方块可以移动到以下各边一个方块。但按

将移动父div的底部。请帮助我确定错误


蛇类游戏
.项目{
宽度：50px；
高度：50px；
边框：1px纯白；
浮动：左；
背景色：#04293c；
}
window.addEventListener（“按键”，右，假）；
window.addEventListener（“按键”，左，假）；
window.addEventListener（“按键”，向下，假）；
window.addEventListener（“按键”，向上，假）；
对于（变量i=0；i<13；i++）{
对于（var j=0；j<13；j++）{
$（'#element'）。追加（''）；
}
}
var质量=[
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
]
yoxla（）；
函数yoxla（）{
对于（变量i=0；i<13；i++）{
对于（var j=0；j<13；j++）{
如果（质量[i][j]==1）{
$（“#”+i+j）.css（“背景色”，“#ebb02a”）；
}
else如果（质量[i][j]==2）{
$（“#”+i+j）.css（“背景色”，“#e4ea8c”）；
}
否则{
$（“#”+i+j）.css（“背景色”，“#04293c”）；
}
}
}
}
play（）；
函数播放（）{
var fail=0；
var k=真；
而（k==true&&fail<1000）{
var gedis1=Math.floor（Math.random（）*13）；
var gedis2=Math.floor（Math.random（）*13）；
如果（质量[gedis1][gedis2]==0）{
质量[gedis1][gedis2]=2；
k=假；
$（“#”+gedis1+gedis2）.css（“背景色”，“#e4ea8c”）；
}
失败++；
}
}
功能右（键）{
如果（key.keyCode==“100”）{
对于（变量i=0；i<13；i++）{
对于（var j=0；j<13；j++）{
如果（质量[i][j]==1）{
质量[i][j+1]=1；
质量[i][j]=0；
yoxla（）；
打破
}
}
}
}
}
功能左（键）{
如果（key.keyCode==“97”）{
对于（变量i=0；i<13；i++）{
对于（var j=0；j<13；j++）{
如果（质量[i][j]==1）{
质量[i][j-1]=1；
质量[i][j]=0；
yoxla（）；
打破
}
}
}
}
}
功能下降（按键）{
如果（key.keyCode==“115”）{
对于（变量i=0；i<13；i++）{
对于（var j=0；j<13；j++）{
如果（质量[i][j]==1）{
质量[i+1][j]=1；
质量[i][j]=0；
yoxla（）；
打破
}
}
}
}
}
功能启动（键）{
如果（key.keyCode==“119”）{
对于（变量i=0；i<13；i++）{
对于（var j=0；j<13；j++）{
如果（质量[i][j]==1）{
质量[i-1][j]=1；
质量[i][j]=0；
yoxla（）；
打破
}
}
}
}
}

如评论中所述，您应该将

中断

替换为

返回

，这样您的外部for循环也可以停止

另外，你还需要处理所有的边界条件

<!DOCTYPE html>
<html>
   <head>
      <title>Snake game</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
   </head>
   <style type="text/css">
      .item{
      width: 50px;
      height: 50px;
      border: 1px solid white;
      float: left;
      background-color: #04293c;
      }
   </style>
   <body style="display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%;">
      <div id="element" style="width: 652px; height: 652px; border: 1px solid black; margin: auto;"></div>
   </body>
   <script>
      window.addEventListener("keypress", RIGHT, false);
      window.addEventListener("keypress", LEFT, false);
      window.addEventListener("keypress", DOWN, false);
      window.addEventListener("keypress", UP, false);
      for (var i = 0; i < 13; i++) {
          for (var j = 0; j < 13; j++) {
              $('#element').append('<div id="'+i + j+'" class="item"></div>');
          }
      }
      var mass = [
      [0,0,0,0,0,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,1,0,0,0,0,0,0],
      [0,0,0,0,0,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,0,0,0,0,0,0,0],
      [0,0,0,0,0,0,0,0,0,0,0,0,0],
      ]
      yoxla();
      function yoxla(){
          for (var i = 0; i < 13; i++) {
              for (var j = 0; j < 13; j++) {
                  if (mass[i][j] == 1) {
                      $("#"+i+j).css("background-color","#ebb02a");
                  }
                  else if(mass[i][j] == 2){
                      $("#"+i+j).css("background-color","#e4ea8c");
                  }
                  else {
                      $("#"+i+j).css("background-color","#04293c");
                  }
              }
          }
      }
      play();
      function play(){
          var fail = 0;
          var k = true;
          while(k == true && fail < 1000){
              var gedis1 = Math.floor(Math.random() * 13);
              var gedis2 = Math.floor(Math.random() * 13);
              if (mass[gedis1][gedis2] == 0) {
                  mass[gedis1][gedis2] = 2;
                  k = false;
                  $("#"+gedis1+gedis2).css("background-color","#e4ea8c");
              }
              fail++;
          }
      }
      function RIGHT(key){//d
          if (key.keyCode == "100") {
              for (var i = 0; i < 13; i++) {
                  for (var j = 0; j < 13; j++) {
                      if (mass[i][j] == 1) {
                          mass[i][j!=12?j+1:0] = 1;
                          mass[i][j] = 0;
                          yoxla();
                          return;
                      }
                  }
              }
          }
      }
      function LEFT(key){//a
          if (key.keyCode == "97") {
              for (var i = 0; i < 13; i++) {
                  for (var j = 0; j < 13; j++) {
                      if (mass[i][j] == 1) {
                          mass[i][j?j-1:12] = 1;
                          mass[i][j] = 0;
                          yoxla();
                          return;
                      }
                  }
              }
          }
      }
      function DOWN(key){//s
          if (key.keyCode == "115") {
              for (var i = 0; i < 13; i++) {
                  for (var j = 0; j < 13; j++) {
                      if (mass[i][j] == 1) {
                          console.log(i+":"+j);
                          mass[i!=12?i+1:0][j] = 1;
                          mass[i][j] = 0;
                          yoxla();
                          return;
                      }
                  }
              }
          }
      }
      function UP(key){//w
          if (key.keyCode == "119") {
              for (var i = 0; i < 13; i++) {
                  for (var j = 0; j < 13; j++) {
                      if (mass[i][j] == 1) {
                          console.log(i+":w:"+j);
                          mass[i?i-1:12][j] = 1;
                          mass[i][j] = 0;
                          yoxla();
                          return;
                      }
                  }
              }
          }
      }
   </script>
</html>


蛇类游戏
.项目{
宽度：50px；
高度：50px；
边框：1px纯白；
浮动：左；
背景色：#04293c；
}
window.addEventListener（“按键”，右，假）；
window.addEventListener（“按键”，左，假）；
window.addEventListener（“按键”，向下，假）；
window.addEventListener（“按键”，向上，假）；
对于（变量i=0；i<13；i++）{
对于（var j=0；j<13；j++）{
$（'#element'）。追加（''）；
}
}
var质量=[
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,1,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0],
]
yoxla（）；
函数yoxla（）{
对于（变量i=0；i<13；i++）{
对于（var j=0；j<13；j++）{
如果（质量[i][j]==1）{
$（“#”+i+j）.css（“背景色”，“#ebb02a”）；
}
else如果（质量[i][j]==2）{
$（“#”+i+j）.css（“背景色”，“#e4ea8c”）；
}
否则{
$（“#”+i+j）.css（“背景色”，“#04293c”）；
}
}
}
}
play（）；
函数播放（）{