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.
![game](https://www.freecodecamp.org/news/content/images/2022/09/game.gif)
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).