Master Scoring, Collisions, and More in Alan AI's Coding Games

Table of Contents

1. Introduction
2. Changing the Velocity
3. Setting the Timer
4. Updating the Score
5. Creating the UI
6. Adding Collisions
7. Displaying Lives
8. Resetting Values
9. Handling Game Over
10. Conclusion

Introduction

In this episode, we will continue working on our game. We will make some changes to the velocity of the enemy character, set up a timer to keep track of the score, create a user interface, handle collisions, display the number of lives remaining, and add a game over functionality. Let's get started!

Changing the Velocity

To improve the gameplay, we will adjust the velocity of the enemy character. By changing the velocity, we can control how fast the enemy moves across the screen. We'll set the velocity to a value of 2, allowing the player to successfully jump over it.

Setting the Timer

Next, we'll set up a timer to keep track of the player's score. We'll use the JavaScript function setTimeout to call a function called "score" every Second. Before setting up the timer, we'll create a variable called "onScore" and set it to zero. This variable will keep track of the score.

Updating the Score

Inside the "score" function, we'll increment the value of "onScore" by one every second. This will effectively increase the score by one point for every second that passes. To display the score on the screen, we'll create a function called "ui" and use the fillText method to render the score in a specified position. We'll make the text slightly off to the left and adjust its Height accordingly.

Creating the UI

To create the user interface, we'll call the "ui" function inside the game loop. This will update the score display on the screen as the score increases. We'll also adjust the Font size to make the score more visible.

Adding Collisions

In order to make the game more challenging, we'll introduce collisions between the player character and the enemy character. We'll add an if statement to check if the player character overlaps with the enemy character. This condition will trigger a decrease in the number of lives remaining.

Displaying Lives

To inform the player about the number of lives remaining, we'll update the UI to show the "lives" variable on the screen. We'll also add hearts as sprites to represent the lives visually. Each time the player character collides with the enemy character, one heart will disappear.

Resetting Values

To reset the game after the player character loses all lives, we'll create a "reset" function. This function will set all the necessary variables back to their initial values. It will reset the positions of the characters, set the velocities to zero, reset the score to zero, and restore the number of lives to the maximum value.

Handling Game Over

To handle the game over condition, we'll modify the if statement that checks for collisions. If the number of lives becomes zero or less, we'll set a variable called "death" to true. In the game loop, we'll check if "death" is true and call the "reset" function accordingly.

Conclusion

In this episode, we made several improvements to our game. We adjusted the velocity of the enemy character, implemented a timer to keep track of the score, created a user interface to display the score and remaining lives, added collision detection, and handled game over scenarios. Our game is now more challenging and engaging. In the next episode, we will add sprites for the characters and introduce artificial intelligence (AI). Stay tuned!

Highlights

• Adjusted the velocity of the enemy character to improve gameplay
• Implemented a timer to track the player's score
• Created a user interface to display the score and remaining lives
• Added collision detection between the player character and the enemy character
• Handled game over scenarios by resetting the game and displaying the final score

FAQ

Q: How can I make the enemy character move faster? A: To make the enemy character move faster, you can increase the velocity value assigned to it. Try different values to achieve the desired speed.

Q: What happens when the player character collides with the enemy character? A: When the player character collides with the enemy character, one life is deducted from the player's remaining lives. The number of remaining lives is displayed on the screen.

Q: How can I reset the game after losing all lives? A: The game will automatically reset after the player character loses all lives. The score and remaining lives will be reset to their initial values, and the game will start again.

Q: Can I customize the UI elements of the game? A: Yes, you can customize the UI elements of the game by modifying the font size, position, and color in the "ui" function. You can also add additional UI elements as per your requirements.

Resources: None