City Defense
- Browser Game
- 2015
City defense is a browser game I built in my free time that was created to practice implementing ES6 features (Which was quite new in 2015).
Using the HTML5 canvas element and the API it exposes, the canvas scene is updated frame-by-frame using requestAnimationFrame, calculating trajectories of meteors and bullets, detecting collisions, and even throwing physics like gravity forces into the mix.
How it works
I got the idea for the game when I was reminded of an old meteor-shooter I used to play on Windows XP. I thought it would be fun to recreate that game dynamic while learning to use some new syntaxes and features of ES2015.
Pressing A or D will fire the left and right guns, respectively. The bullet trajectory is based on where the mouse cursor was at the time of firing. Falling red meteors that are intercepted by a bullet will explode in a bright orange ball. If a meteor reaches the city (currently a white strip along the bottom of the frame), that portion of the city will take damage, changing in color until it is completely dark -- destroyed.