I get the same

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

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.

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.

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.

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.

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.

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.

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

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

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.

@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!

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/

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.

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) } }) }) })

Found the answer after looking at the source code in GIT

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