Question

编辑：这段代码现在正在运行，但只在js小提琴中，而不是当我在Dreamweaver的浏览器中查看它时。

这有什么理由吗？

我正在尝试用javascript和HTML5制作一个基本的蛇游戏。

在我尝试使用37,38,39,40键移动矩形之前，一切都运行良好。

它在屏幕上移动，但无论我做什么，我都无法控制它。

我尝试过其他方法或编写此代码，但没有任何效果。

我也尝试过使用其他键，例如字母。

任何明白英语的帮助都会很棒。

我很想知道我做错了什么，因为除了关键的动作之外，一切都很好。如果可能的话，我宁愿不使用JS小提琴或Jquery。

window.onload = function() {
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  var xcoord = 100;
  var ycord = 100;
  window.addEventListener('keydown', whatKey, true);
}
function whatKey(evt) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillText(evt.keyCode, 50, 50);
  switch (evt.keyCode) {
    case 39:
      xcoord = xcoord + 10;
      if (xcoord > 750) {
        xcoord = 750;
      }
      if (xcoord > 150 && xcoord < 250 && ycoord > 150 && ycoord < 250) {
        snd.play();
        xcoord = xcoord - 10;
      }
      break;
    case 37:
      xcoord = xcoord - 10;
      if (xcoord < 0) {
        xcoord = 0;
      }
      if (xcoord > 150 && xcoord < 250 && ycoord > 150 && ycoord < 250) {
        snd.play();
        xcoord = xcoord + 10;
      }
      break;
    case 40:
      ycoord = ycoord + 10;
      if (ycoord > 350) {
        ycoord = 350;
      }
      if (xcoord > 150 && xcoord < 250 && ycoord > 150 && ycoord < 250) {
        snd.play();
        ycoord = ycoord - 10;
      }
      break;
    case 38:
      ycoord = ycoord - 10;
      if (ycoord < 0) {
        ycoord = 0;
      }
      if (xcoord > 150 && xcoord < 250 && ycoord > 150 && ycoord < 250) {
        snd.play();
        ycoord = ycoord + 10;
      }
      break;
  }
}

Answer 1

context是onload处理程序中的局部变量。在keydown处理程序whatKey中，您没有变量context。

Answer 2

如果不是罪魁祸首，Leo所说的可能是一个，但需要更多解释。您已在window.onload方法上定义了局部变量。一旦该方法执行并结束，变量context和您在其中定义的其他变量就消失了。然后，当whatKey执行时，您将获得undefined并可能出现一些javascript控制台错误。

所以快速解决方法是在window.onload方法的范围之外定义这些变量，如下所示：

(function(){

   var canvas;
   var context;
   var xcoord;
   var ycord;

   function whatKey() { ... }

   window.onload = function() {
      window.addEventListener('keydown', whatKey, true);
   }
})();

使用向上，向下，向左和向右键使对象在javascript中移动

2 个答案: