CHANNELS:

All
S
SaltyLove posted a year ago
S
SPURTECH posted a year ago

I get the same

0
S
SPURTECH posted a year 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 too

1
S
SPURTECH posted a year ago

Hi Chris,

So I've mastered mobile controls and had to remove score labels unfortunately but the real issue is the position x error. they just keep coming and the game then starts to lag and crash,

Please take a look so I can learn from you I've tried everything I know.

1
chris posted a year ago
Best Reply

Hi Salty, check out your Invader class, looks like you have an errant save() method inside of draw(). This will try and save the current canvas state continuously which is what's clogging up your game on certain browsers.

@SPURTECH, you can prevent multi-shots by adding:

 if (keys.space.pressed) return

To the beginning of your spacebar event listener. The full thing would look 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
  }

I'd definitely check for any c.save() methods in your code, if not immediately used with c.restore(), you'll get random errors like the position one you're talking about.

1
S
SPURTECH posted a year ago

Hi Chris thanks for getting back to me I really appreciate it,

So the first is...

if (keys.space.pressed) return... just stops space bar working.

And I went back and copied and pasted your code to be sure and I get...

index.js:296 Uncaught TypeError: Cannot read properties of undefined (reading 'x')

at index.js:296:42

at Array.forEach (<anonymous>)

at animate (index.js:272:11)

each time a new grid is about to enter and starts to lag the game.

1
S
SPURTECH posted a year ago

I think I may have fixed the lagging with...

for (let i = grid.invaders.length - 1; i >= 0; i--) {

const invader = grid.invaders[i]

invader.update({

velocity: grid.velocity

})

console.clear()...

I'll let you know after mobile testing.

0
S
SPURTECH posted a year ago

So now I now my console is clear of errors I think the reason the game continues to progressivley slow must be the math in the frames section.

0
chris posted a year ago

For the keys pressed code to work, you'll want to make sure you have an event listener listening for a keyup event that changes the value back equal to false. That way you're only ever shooting another projectile if the spacebar is truly lifted up.

The lagging is probably something that's occurring on a project-by-project basis, might take a bit of debugging, but I can help if you post your repo here for me to look at.

1
S
SPURTECH posted a year ago

Thank you Chris I would appreciate that.

Clearing the console didn't work unfortunately.

I was thinking last night the lagging could Be partical splicing from player as I think your splicing partical not player.partical. if you move your player up just to check you'll probably see them coming back.

0
S
SPURTECH posted a year ago

Hi Chris,

I think the lagging is the player particals but I'm struggling to splice them heres my repo link please help...

https://github.com/SPUR-TECH/space-invaders2

0
S
SaltyLove posted a year ago

Hi Chris, hi everyone,

thank you so much for checking my code! I really appreciate that!

The Save() was indeed the issue inside the draw function.

Its really cool to see that the community lives and that you and the others are looking into the forum, trying to help each other.

Pretty cool and this is how it makes fun :)

ps: could you make a tutorial, where a Hiscore list is added with a sql backende or something else? This would be really cool to understand how things are stored in a back end and how they loaded. Or do you have a hint where i can learn this?

I want to add a Highscore list to my games and of course to the space invader game ;)

Do i need to learn php or is it possible with js?

Best regards

Salty

1
chris posted a year ago

Spurtech, where you're looping over your player particles, replace your for loop with the following:

  for (let i = player.particles.length - 1; i >= 0; i--) {
    const particle = player.particles[i]
    if (particle.opacity <= 0) player.particles.splice(i, 1)
    else particle.update()
  }

It looks like your current code was trying to call splice on an individual particle object rather than the player.particles array. With this change up, and making sure you're checking whether or not the player.opacity is less than 0 as well, you shouldn't have any more issues with lagging.

0
chris posted a year ago

@SaltyLove, I do plan on connecting games to a backend in the future, but for now, you'd want to use node.js (although you can use PHP if you'd like). The reason I recommend node.js is that it's just JavaScript that runs on the backend, meaning you only have to learn one language rather than many.

Trying to be a bit more active with replying to posts here, so appreciate the comment!

0
S
SPURTECH posted a year ago

Hi Chris,

So I think I've got splicing player.particles sorted by adding...

 player.update()

    for (let i = player.particles.length - 1; i >= 0; i--) {
        const particle = player.particles[i]
        particle.update()



        if (particle.opacity <= 0.05) {
            setTimeout(() => {
                player.particles.splice(i, 1)
            }, 0)

            particle.update()
        }
    }

Now it's just the position.x console error issue.

Please take a quick look at my repo...

https://github.com/SPUR-TECH/space-invaders2

I just can't find the c.save() issue you mentioned.

I would also like the score labels to work on mobile. For some reason they go all out of wack on small screens but I can live without them if it's not possible.

Thanks Chris,

P.S This is the best learning platform for coding I've seen on Youtube as everything is explained so well.

My live site... Have fun...

https://spur-tech.github.io/space-invaders2/

0
S
SPURTECH posted a year ago

Sorry Chris I didn't see the reply although my set time out worked I just changed it to what you said instead lol. less code is better code.

0
C
CodingBuddy posted a year ago

Hi Chris

I received a TypeError at 1:30 in the video after trying to add Spawning Projectiles, looked and checked over and over and cannot see exactly where the mixup is

Any Ideas? Thanks, this is a great tutorial

Uncaught TypeError: grid.invaders[Math.floor(...)].shoot is not a function

at index.js:318:73

at Array.forEach (<anonymous>)

at animate (index.js:313:9)

(

Code:

// Grids Array grids.forEach((grid, gridIndex) => { grid.update() // Spawning Invaders Projectiles if (frames % 100 === 0 && grid.invaders.length > 0) { grid.invaders[Math.floor(Math.random() * grid.invaders.length)].shoot(invaderProjectiles) } grid.invaders.forEach((invader, i) => { invader.update({ velocity: grid.velocity }) // 8. Shoot invaders projectiles.forEach((projectile, j) => { // Remove ememy within the parameter of this condition if (projectile.position.y - projectile.radius <= invader.position.y + invader.height && projectile.position.x + projectile.radius >= invader.position.x && projectile.position.x - projectile.radius <= invader.position.x + invader.width && projectile.position.y + projectile.radius >= invader.position.y) { setTimeout(() => { const invaderFound = grid.invaders.find( (invader2) => invader2 === invader ) const projectileFound = projectiles.find( (projectile2) => projectile2 === projectile ) // remove invader and projectiles if (invaderFound && projectileFound) { grid.invaders.splice(i, 1) projectiles.splice(j, 1) // 7a. New Grid Width - adjust invaders as grid shrinks if (grid.invaders.length > 0) { const firstInvader = grid.invaders[0] const lastInvader = grid.invaders[grid.invaders.length - 1] grid.width = lastInvader.position.x - firstInvader.position.x + lastInvader.width grid.position.x = firstInvader.position.x } else { grids.splice(gridIndex, 1) } } }, 0) } }) }) })

0
C
CodingBuddy posted a year ago

Found the answer after looking at the source code in GIT

I had the shoot() in the wrong class, fixed it and is working

0

Want to participate?

Create a free Chris Courses account to begin

or
Sign In

Providing the lift to launch your development career

© 2024 Chris Courses. All rights reserved.