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

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

狮子座所说的也许是罪魁祸首，但还需要更多解释。 您已经在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);
   }
})();