I am playing around with making a 2d fighter game. using only javascript, css and html I am stuck on how to prevent the attack button to be spammed like crazy. If i press the attack key 5 times per seconde it also registers and also does the animation. I want to restrict the key register to 1 time per 750 milliseconds.
How would i accomplish this? I think it has something to do with the timeStamp but i cant work out the logic
This is what i have without the restriction:
window.addEventListener('keydown', (event) =>{
switch (event.key) {
case ' ':
if (player_1.position.x < (player_2.position.x + 25))
{player_1.attack_player_1()
// setTimeout(() => {sword_swing.play()},200)}
setTimeout(() => {sfx_player_1.sword_swing.play()},200)}
else {player_1.attack_player_1_reversed()
setTimeout(() => {sfx_player_1.sword_swing.play()},200)
}
break
}
});
i am assuming you might need time gap for multiple functions and for that you have to track each function time gap with separate variable instead i have created a class to use it as a slow down helper . this is an example you can edit this in your code.
class slowDown {
constructor(cb,timeGap){
this.last = 0
this.run = function(){
let current = Date.now(),
shouldRun = (current - this.last) >= timeGap
if(shouldRun){
cb(current - this.last)
this.last = current
}
}
}
}
// example use
const press = new slowDown(timeElapsed => {
// define function here which you wanted to slow down
console.log("pressed after " + timeElapsed + " ms")
},750)
window.addEventListener("keydown",()=>{
press.run()
})It's deepens which behavior you expect. if you press fire and still pressing you will attacking. One solution would be Throtteling what @svarog already told in the comments under your question.
The other solution would be to block after one press the button still a) it press an other button or b) set a timeout for example 1 second and the timeout expired.
In any cases i would prefer to work with e.keyCode instead of e.key.
example
document.onkeydown = check
let lastKeyCode = '';
function check(e) {
if (e.keyCode == 32) {
if(lastKeyCode == 32) return false;
// do something
lastKeyCode = 32;
}
/// other events
}