Javascript 为什么我的fillRect没有显示在HTML画布上？

我正在关注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)

这是应该处理键绑定的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
              }
            }};

//keys.js
变量键={
a:错，
d:错，
s:错，
w:错
};
window.addEventListener（'keydown'，函数（事件）{
开关（event.which | | event.keyCode）{
案例65:key.a=true；break；//37如果
key
未定义，则可能是因为它们位于不同的文件中，并且包含的顺序不正确。请尝试将
key.js
放在
main.js
之前的任何文件中

对于此错误：
keys.js:15未捕获的语法错误：缺少）在参数列表之后

问题是您的
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

window.addEventListener（'keydown'，函数（事件）{
开关（event.which | | event.keyCode）{
案例65:key.a=true；break；//37请编辑您的问题以包含完整的javascript片段。js控制台中是否有任何错误？@csmckelvey keys.js:15 Uncaught SyntaxError:missing）参数列表1106main.js:16 Uncaught ReferenceError:key在main（main.js:29）的更新（main.js:16）中未定义在包含
main.js
之前，尝试包含
keys.js
。您的调用也是：
window.addEventListener（'keydown'，function（event）{..}
应该是
window.addEventListener（'keydown'，function（event）{..}）
注意最后一个
}
应该是
）
对于
keydown
和
keydup
，需要更改的只是括号。该程序现在按预期运行。非常感谢！
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