Question

我目前正在观看一系列关于在HTML5中使用canvas标签创建简单的2D游戏的介绍性视频。

正如我正在关注视频代码一样 - 确切地说 - 在此过程中某处出现了错误。我试图在画布上绘制一个矩形，它会响应导航按钮并相应地移动。

以下是主要游戏代码：

function game() {
    update();
    render();
}

function update() {
    //This is the code that I think is causing an error
    if(keys[38]) player.y--;
    if(keys[40]) player.y++;
    if(keys[37]) player.x--;
    if(keys[39]) player.x++;
}

function render() {
    context.fillRect(player.x, player.y, player.width, player.height);
}

setInterval(function(){
    game();
}, 1000/30);

我加载网站时运行完全正常，但它不响应用户点击。感谢您提前提供任何帮助。

下面是按键数组，每按一次导航键就会添加一个索引值：

var keys = [];

window.addEventListener('keydown', function(e){
    keys[e.keycode] = true;
}, false);

window.addEventListener('keyup', function(e){
    delete keys[e.keycode]
}, false);

Answer 1

它不响应鼠标交互，因为您刚刚分配了密钥代码。我假设你可以用箭头键控制矩形？你在使用哪个框架？

Answer 2

您似乎在事件处理程序中使用.keycode属性，全部为小写。该财产不存在。相反，请尝试使用.keyCode属性，使用大写C。

使用不存在的属性会返回undefined，因此始终会执行keys[undefined] = true和keys[undefined] = false。

无响应的charCode语句

2 个答案: