时间戳

首页 > 解决方案 > 我的右 + 左箭头键绑定不起作用

javascript - 我的右 + 左箭头键绑定不起作用

问题描述

我正在尝试制作 HTML、CSS 和 JavaScript 游戏。当按下左右箭头键时，玩家应该左右移动。我不知道为什么，但这段代码没有添加事件监听器。有什么帮助吗？这是我的 index.html 文件中的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>
            JavaScript Platformer
        </title>
    </head>
    <body>
        <canvas id="game" class="game" width="500" height="500"></canvas>
    </body>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</html>

这是我的 script.js 文件中的代码：

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");

var playerImg = new Image();
var player = {
    x: 225,
    y: 375,
    width: 50,
    height: 50
}

function draw() {
    playerImg.onload = function () {
        
        // draws the player image
        ctx.drawImage(playerImg, player.x, player.y, player.width, player.height);
    }
    
    playerImg.src = "images/player.png";
}

document.body.addEventListener("keydown", function (event) {
    event.preventDefault();
    
    if (event.keycode == 37) {
        
        // deletes the last image so the image doesn't get duplicated
        ctx.clearRect(player.x, player.y, player.x + player.width, player.y + player.height);
        
        // moves the player
        player.x -= 20;
    }
    if (event.keycode == 39) {
        
        // deletes the last image so the image doesn't get duplicated
        ctx.clearRect(player.x, player.y, player.x + player.width, player.y + player.height);
        
        // moves the player
        player.x -= 20;
    }
}, false);

setInterval(draw, 100);

这是我的 CSS 文件中的代码：

.game {
    border: 3px solid black;
    border-radius: 8px;
}

有什么帮助吗？我看不出这段代码有任何问题。

标签： javascripthtmlcsshtml5-canvasevent-listener

解决方案

我认为您的代码中有一个小错字。它event.keyCode == 39不是event.keycode == 39（注意 C 在 keyCode 中是大写的）

也是如此event.keycode == 39。它应该是event.keyCode == 39

推荐阅读