因此,当玩家按下x时,我的角色div会更改其背景图像,如果角色触摸敌人,则杀死敌人。该图像开关用于制作挥舞剑的模拟动画。
我使用设置超时来延迟将背景图像切换回其原始状态。这行得通。
但是是他们的一个错误,即如果我发送垃圾邮件x,则图像切换之间不再存在延迟,并且我推测原因与从setTimeout函数堆叠异步回调有关,该回调在调用时播放器垃圾邮件x。
**此功能设置了超时**
function pressOn(e) {
e.preventDefault();
let tempKey = (e.key == " ") ? "space" : e.key;
keys[tempKey] = true;
if (keys['x'] && player.swing == false){
player.plane.style.backgroundImage ='url(guts2.png)';
setTimeout(function () {
player.swing = true;
}, 300);
}
}
**原始背景图像不显示**
function playGame() {
if (player.inplay) {
if (player.swing && !keys['x']){
player.plane.style.backgroundImage ='url(guts1.png)';
player.swing = false;
}
window.requestAnimationFrame(playGame);
}
}
**链接到JS完整项目**
答案 0 :(得分:2)
您的逻辑在setTimeout中是向后的。您要自动将swing设置为true(这将阻止执行if语句),并在setTimeout回调内部将其重新设置为false。
let player = {
swing: false
}
-
function pressOn(e) {
e.preventDefault();
let tempKey = (e.key == " ") ? "space" : e.key;
keys[tempKey] = true;
if (keys['x'] && player.swing == false) {
player.plane.style.backgroundImage = 'url(guts2.png)';
player.swing = true;
setTimeout(function () {
player.plane.style.backgroundImage = 'url(guts1.png)';
player.swing = false;
}, 1000);
}