Premium Features

Download Video

Game Timers and Game Over

Now we need some sort of method to end our game when time runs out, or when either our player or enemy's health bar is fully depleted. We'll code this functionality using JavaScript's setTimeout function, and monitor our fighters' health using something custom.

Comments

Want to participate?

Create a free Chris Courses account to begin

p
peepeepoopoooo posted 4 years ago

at 4:30, my clock does NOT do countdown what does it mean?

this is my index.js: 

let timer = 10 
function decreaseTimer(){
   // infinite loop = requestAnimationFrame(animate)
  if (timer > 0) {
    setTimeout(decreaseTimer, 1000)
    timer--
    document.querySelector('#timer').innerHTML = timer // innerHTML = cái số 10 á 
  }

  if (player.health === enemy.health){
    console.log('tie')
  }
}

and this is my index.html:

<!-- timer -->
      <div id="timer"
      style="
        background-color: red; 
        width: 100px;
        height: 100px;
        flex-shrink: 0;
        display: flex;  
        align-items: center; 
        justify-content: center;">
      10
      </div>
p
peepeepoopoooo posted 4 years ago

oh merry me! i forgot to call the function "decreaseTimer()" afterwards for it to work! thank you anyways

XxCFxX's profile photo
XxCFxX posted 5 years ago

I keep getting this error for cancel timeout! index.js:134 Uncaught ReferenceError: cancelTimeout is not defined

at determineWinner (index.js:134:3)

at animate (index.js:212:5)

chris's profile photo
chris posted 5 years ago

Should be clearTimeout, I made the same mistake in the vid 😅

XxCFxX's profile photo
XxCFxX posted 5 years ago

ty! :)