贪吃蛇游戏（按键）

Question

按w、a和d字符方格可以向后面的边移动一个方格。但是通过按 s 它将移动到父 div 的底部。请帮我确定一个错误。

<!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){
          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+1] = 1;
                          mass[i][j] = 0;
                          yoxla();
                          break;
                      }
                  }
              }
          }
      }
      function LEFT(key){
          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-1] = 1;
                          mass[i][j] = 0;
                          yoxla();
                          break;
                      }
                  }
              }
          }
      }
      function DOWN(key){
          if (key.keyCode == "115") {
              for (var i = 0; i < 13; i++) {
                  for (var j = 0; j < 13; j++) {
                      if (mass[i][j] == 1) {
                          mass[i+1][j] = 1;
                          mass[i][j] = 0;
                          yoxla();
                          break;
                      }
                  }
              }
          }
      }
      function UP(key){
          if (key.keyCode == "119") {
              for (var i = 0; i < 13; i++) {
                  for (var j = 0; j < 13; j++) {
                      if (mass[i][j] == 1) {
                          mass[i-1][j] = 1;
                          mass[i][j] = 0;
                          yoxla();
                          break;
                      }
                  }
              }
          }
      }
   </script>
</html>

Answer 1

如评论中所述，您应该将 break 替换为 return，这样您的外部 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>

贪吃蛇游戏（按键）

Snake game (keypress)

javascript

keypress

syntax-error