Search code examples
javascripthtmlhtml5-canvas

disable movement when timer runs out


I'm following this tutorial on making a fighting game in html canvas using javascript, but i would like to change a few things, there's just one part i can't figure out, and thats how to freeze the players when the timer hits zero. Does anybody have any ideas?

let timer = 10
let timerId
function decreaseTimer(){
    if(timer > 0) {
        timerId = setTimeout(decreaseTimer, 1000)
        timer--
        document.querySelector('#timer').innerHTML = timer
         
    }
    if(timer === 0){
        determineWinner({player, enemy, timerId})
       // freeze player
        
    } 
}

Movement is defined as player.velocity.x/y respectively

Also using keydown like this:

window.addEventListener ('keydown', (event) => {
    switch (event.key) {
        case 'd':
            keys.d.pressed = true
            player.lastKey = 'd'
        break
        case 'a':
            keys.a.pressed = true
            player.lastKey = 'a'
        break
        case 'w':
            keys.w.pressed = true
                player.velocity.y = -10
        break

        case ' ':
            player.attack()
        break

        case 'ArrowRight':
            keys.ArrowRight.pressed = true
            enemy.lastKey = 'ArrowRight'
        break
        case 'ArrowLeft':
            keys.ArrowLeft.pressed = true
            enemy.lastKey = 'ArrowLeft'
        break
        case 'ArrowUp':
            
                enemy.velocity.y = -10
        break
        case 'Enter':
            enemy.attack()
    }
    
})

window.addEventListener ('keyup', (event) => {
    switch (event.key) {
        case 'd':
            keys.d.pressed = false
        break
        case 'a':
            keys.a.pressed = false
        break
        case 'w':
            keys.w.pressed = false
        break

        case 'ArrowRight':
            keys.ArrowRight.pressed = false
        break
        case 'ArrowLeft':
            keys.ArrowLeft.pressed = false
        break
        case 'ArrowUp':
            keys.ArrowUp.pressed = false
        break
    }
})

Solution

  • There are a multiple ways of 'freezing the player'. Some of them are better depending on how you pause / play the game.

    • You can change the moving logic to only move the player if timer > 0
    • You can set the velocity to 0 and not update the velocity
    • Stop all player-moving logic