JavaScript can be a surprisingly good programming language to use for creating 2D games. Especially games you want to be playable on almost any device.
We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to code a 2D game using JavaScript, HTML, CSS, and HTML Canvas.
Frank from Frank's Laboratory developed this course. Frank is a popular instructor and always comes up with super creative tutorials.
You will build a game completely from scratch featuring everything from sprite animation to parallax backgrounds. The game uses just HTML, CSS and plain JavaScript without frameworks or libraries.
Here are the sections covered in the game.
- HTML & CSS setup
- Basic JavaScript setup
- Object Oriented programming with JavaScript
- Creating Player and Game objects
- Animation loop
- Keyboard inputs
- Creating projectiles
- Periodic events
- Drawing game UI
- Base enemy class
- Collision detection between rectangles
- Drawing game score
- Win and lose condition
- Counting game time
- Animated parallax backgrounds
- Sprite animation with JavaScript
- Creating a debug mode
- Animating enemy sprite sheets
- Night Angler enemy class
- Lucky Fish enemy class
- Collecting power ups
- Drawing projectiles as images
- Custom fonts and game text
- Cleaning up
- Particle effects and physics
- Particle rotation
- Tweaks and fixes
- Hive Whale enemy class
- Drone enemy class
- Dust effect animation
- Fire effect animation
- Tuning game difficulty
- What to do next?
Watch the full course below or on the freeCodeCamp.org YouTube channel (2.5-hour watch).