事件监听器和画布答案

【问题标题】：Event Listeners and Canvas事件监听器和画布
【发布时间】：2017-10-15 13:39:40
【问题描述】：

我有一个画布元素，其中有一组矩形，这些矩形需要根据键盘上箭头键的选择相应地移动。

index.html

<canvas id="snakeCanvas" width="400" height="350"></canvas>

我正在使用“keydown”事件侦听器来切换此逻辑，我的 main.js 文件中有以下代码

(function () {
    document.addEventListener("DOMContentLoaded", function () {
        game.init();

        document.addEventListener("keydown", function (evnt) {
            var keyDirection = evnt.keyCode;
            if (keyDirection === "37" && direction !== 'right') {
                direction = 'left';
                console.log('test');
            } else if (keyDirection === '38' && direction !== 'down') {
                direction = 'up';
            } else if (keyDirection === '39' && direction !== 'left') {
                direction = 'right';
            } else if (keyDirection === '40' && direction !== 'up') {
                direction = 'down';
            }
        });
    });

})();

我能够消除 keyCode 值，但在调试时我注意到，调试器不会进入条件逻辑。我错过了什么？

【问题讨论】：

您的direction 变量在哪里定义？同样，如果它没有值，您的条件都不会返回 true...
@NewToJS 我有一个 constants.js 文件，其中定义了方向
在 if 条件之前添加 console.log(direction); 并检查它是否包含预期的字符串。
@NewToJS 所以默认情况下，我在常量文件中将方向设置为“向下”，并且在添加 console.log(direction) 时，无论我按什么箭头键，方向总是打印出“向下”
如果您删除包裹整数的引号，您当前的尝试也将起作用。 示例： keyDirection === 37 && direction !== 'right' Updated JsFiddle

标签： javascript html html5-canvas

【解决方案1】：

您需要使用==。 === 要求对象的类型相同。然而，== 的 JavaScript 很松散：

a=37;
b='37';
a==b //true
a===b //false

【讨论】：