Welcome back, last lesson, we set up the ability to check to see if one element was in collision with
another element and if it was and this is where we're checking to see if our projectile has hit the
alien.
And if it did, then we're outputting currently right now is hit.
So let's update that.
And we can do quite a bit of things here within this function so that we've got a hit.
We can update the alien speed if we want.
So every alien you hit, the alien speed will increase, making it harder.
Also, we can take the player score and we can increase the player score as well.
So increase player score by one.
We can also output our scores.
So we've got this output score area.
So every time we update the score, we should output it so the player can see their current update,
the player fire to be true or false so that they can launch another projectile and also to fire me elements.
Let's get the class list and add a class of height so it's no longer visible on the page.
And we also want to remove that element.
So we've got the element that we collided with is here so we can select that element.
And just as we saw earlier when we were clearing out all the aliens, we can traverse up to the parent
node and then from the parent node, we can remove a child from there and we'll remove the child matching
those element values.
And of course, this is the element that triggered this collision.
So this is the one that where we're getting those values from.
We can also update the position of fire me.
So where we are updating the position of this elements, taking the container dim, dim value.
So we've got our fire me y position and we can update it to match the container height so you can take
the container Dem height value plus one hundred and reset the position of fire.
So let's try that.
So refresh, I'll make this a little bit bigger.
So refresh again.
So we hit start and we can see that our score goes up as each one of the aliens and I know they're starting
out rather fast, so you might want to update that as well and toggle that to make it more playable.
So these are some of the variables that you might have to adjust over time.
So once you cleared out all of the aliens, we should actually be able to detect if the game is over.
So we can do that as we're looping through the different aliens.
And when we do the update and we see there's no more aliens left, that means that the player has one.
So checking to see an ad in the condition if temp aliens length is equal to zero, then that means that
the game is over.
But this case, the player one, so it's still got the player game over launching and in the console
log, we can output a message you want.
And we might also want to add in a message area for the player so that we can communicate with them
or we could add that into the top bar.
So how about we added in just beside score and this will be another spane.
It'll have a class of message and this is where we can output information to the player.
And I'm going to actually put it on the right side of score so that the score doesn't actually move
in.
The message can show and not show.
So let's select that as an object.
So make our connection to that element that we just created.
Using query selector, selecting the element with the class of and this should actually be looking within
the document, not within the container.
So update that and then we can do a quick refresh and make sure that message is available.
So we are accessing that span.
So the next thing that we can do is we can simply add in a function in order to handle that.
So this can output and where we currently are outputting those console messages, we can add a message
to output into the message area instead.
So we've got quite a few console messages that we still have.
So let's update that into the message area.
Creating a function in order to handle that can call this message output and it'll pass in a value.
And then this value is going to be used within the message object and we can take and update the entire
HTML with the message contents.
So next, let's make a selection.
We'll also select the console like do find and replace or replace the console log with message output.
And we can go through them one by one just to make sure that we don't have anything that might throw
an error.
This one will throw an error so we can't output an object in that format and the same with the diff.
So we're not able to output it.
So that should update the console messages.
So now we should get a message that we get the hits being output there and then we get the new one message.
So coming up next, we have a way to start the game, to end the game, and we need a way to fine-tune
the game and make some tweaks and adjustments to the way that it looks, play through it a few times,
make sure that all the functionality is there that we're looking for.
So that's all still to come.
So go ahead and add in the message area as well as the win condition into your project.