Space Invaders: Dynamic Score Labels

Get 50% off all memberships! Black Friday offer ends Dec. 6 @11:59pm EST. View Pricing

Premium Features

Download Video

Dynamic Score Labels

Published 3 years ago

It would be nice to know the exact score we get from shooting each invader. This lesson will teach you how to create a "dynamic score label" that appears, then animates out whenever you shoot an invader. It creates for a really cool effect and immediately makes your game start to stand out compared to before.

The checklist for this feature is as follows:

Create score label with document.createElement(label)
Append to DOM with document.body.appendChild(score)
Change element's innerHTML
Change style for position, color, top, left, and userSelect
Call gsap.to() for animation
On complete, get parent node and call removeChild()

GSAP Documentation: https://greensock.com/docs/

Comments

Want to participate?

Create a free Chris Courses account to begin

SPURTECH posted 2 years ago

Hi Chris,

I love these videos, I'm learning so much.

Sorry to knit pick but I've noticed if you hold down space it shoots 1 bullet then continuously and very fast making the power up irrelevant. please fix so I can see what to change. also pleeeease add mobile functionality I would love to play this on my phone.

If you switch to mobile screen the score labels go out of sync

chris posted 2 years ago

Add:

if (keys.space.pressed) return

to the beginning of your spacebar event listener and you should be good to go. Full thing looks like this:

case ' ':
  if (keys.space.pressed) return
  keys.space.pressed = true
  if (player.powerUp === 'MachineGun') return
  audio.shoot.play()
  projectiles.push(
    new Projectile({
      position: {
        x: player.position.x + player.width / 2,
        y: player.position.y,
      },
      velocity: {
        x: 0,
        y: -10,
      },
    })
  )
  //keys.space.pressed = true
  break

Dynamic Score Labels

The Essentials

Premium Features

Education

Support

Transparency

Legal