Bullseye! - Video Game
Bullseye! is an animated physics game created using vanilla JavaScript, HTML, CSS, and HTML Canvas.
Before this project, I had never worked with the HTML Canvas element. So when I saw that freeCodeCamp came out with a free course that uses the HTML Canvas to animate a simple game, I jumped at the chance to learn more while exercising my JavaScript skills.
During the course of this project, I learned how to:
- implement a very simple AI to make the creatures feel alive
- control the game's FPS and measure time to trigger periodic events
- apply collision detection, resolve collisions, and use that to simulate physics
- use the built-in drawImage method to draw randomized game environments and animated characters from a sprite sheet
- capture mouse position and animate an 8-directional sprite sheet based on the relative position between the mouse and the player character
Future enhancements for this project include:
- refactoring the code to make the game mobile-responsive
- adding in music and sound effects
- implementing difficulty settings
- adding a high-score scoreboard