javascript - 为什么我的 fillRect 没有显示在我的 HTML Canvas 上？

Question

我正在关注 YouTube 教程，他的示例运行良好，应该有一个红色框，我可以使用 w、a、s 和 d 键移动。我不确定这个例子中我错过了什么。我相信错误出现在 main.js 文件中，因为大多数更改都是对该文件进行的。

            //Errors
            keys.js:15 Uncaught SyntaxError: missing ) after argument list 
            main.js:16 Uncaught ReferenceError: key is not defined at update (main.js:16) at main (main.js:29)

.

            // main.js
            var canvas = document.getElementById("screen");
            var context = canvas.getContext("2d");

            var x = 20, y = 20;

            function init() {
              context.fillStyle = "red";
            }

            function move(dx, dy) {
              x += dx;
              y += dy;
            }

            function update() {
              if(key.a) {move(-5,  0);}
              if(key.d) {move( 5,  0);} // moves sprite 5 in x direction and 0 in y direction
              if(key.w) {move( 0, -5);}
              if(key.s) {move( 0,  5);}
            }

            function draw() {
              context.clearRect(0, 0, canvas.width, canvas.height); // clear every pixel from top left to bottom right
              context.fillRect(x, y, 50, 50); //how far from left, top, 50x50
            }

            function main() {

              update();
              draw();
            }

            window.onload = function() {
              init();
              setInterval(main, 1000 / 60); //call main once every 1000/60 milliseconds
            };

这是应该处理键绑定(bind)的 js

            // keys.js

            var key = {
              a: false,
              d: false,
              s: false,
              w: false
            };

            window.addEventListener('keydown', function(event) {
              switch(event.which || event.keyCode) {
                case 65: key.a = true; break; // 37 <- left
                case 68: key.d = true; break; // 39 <- right
                case 83: key.s = true; break; // 40 <- down
                case 87: key.w = true; break; // 38 <- up
              }
            }};

            window.addEventListener('keyup', function(event) {
              switch(event.which || event.keyCode) {
                case 65: key.a = false; break; // 37 <- left
                case 68: key.d = false; break; // 39 <- right
                case 83: key.s = false; break; // 40 <- down
                case 87: key.w = false; break; // 38 <- up
              }
            }};

Answer 1

如果 key 未定义，可能是因为它们位于单独的文件中并且包含的​​顺序不正确。尝试将您的 keys.js 包含在托管这两个文件的 main.js 之前。

至于这个错误:keys.js:15 Uncaught SyntaxError: Missing ) after argument list

问题出在您的 addEventListener 函数调用上。它们都以 }}; 结尾，而实际上应该是 });。见下文:

window.addEventListener('keydown', function(event) {
  switch(event.which || event.keyCode) {
    case 65: key.a = true; break; // 37 <- left
    case 68: key.d = true; break; // 39 <- right
    case 83: key.s = true; break; // 40 <- down
    case 87: key.w = true; break; // 38 <- up
  }
}); // <-- Corrected

window.addEventListener('keyup', function(event) {
  switch(event.which || event.keyCode) {
    case 65: key.a = false; break; // 37 <- left
    case 68: key.d = false; break; // 39 <- right
    case 83: key.s = false; break; // 40 <- down
    case 87: key.w = false; break; // 38 <- up
  }
}); // <-- Corrected