BubbleBall

HTML5 game, move left and right to avoid getting hit. This repo includes step-by-step branches to walk you through how I built this game.

Tutorial Steps

• Step 1 - create an empty canvas and the basic html/css setup
• Step 2 - draw the player and instructions once
• Step 3 - set up the main loop and make the player move
• Step 4 - define and generate obstacles but don't draw them yet
• Step 5 - draw and update the obstacles so they move
• Step 6 - add hit detection and logic to end the game
• Step 7 - add scoring

Next steps and suggestions for improvement

This is a simple game I built in under two hours. There are lots of things you could make more efficient and lots of new features you could add. Here are some ideas:

• add new types of obstacles
• make the obstacle generator start slow and speed up the longer you play
• keep the highscore in localStorage so that you can close the window and still see your highscore (until you delete your storage)
• set up a database and api endpoint for storing the scores long-term
• create a high scores page