Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

Animated Physics Game with JavaScript - Tutorial

via freeCodeCamp

Overview

Dive into a comprehensive 3-4 hour tutorial on creating an animated physics game using JavaScript, HTML5, CSS3, and HTML Canvas. Explore a fantasy mushroom forest theme while learning essential game development techniques. Master object-oriented programming, player controls, obstacle creation, collision detection, physics simulation, sprite animation, and AI mechanics. Implement features like FPS control, periodic events, game restart functionality, and particle effects. Create engaging gameplay elements such as egg hatching, enemy behaviors, and score tracking. By the end of this hands-on tutorial, gain the skills to build your own 2D games from scratch using vanilla JavaScript, without relying on external frameworks or libraries.

Syllabus

⌨️ Intro
⌨️ Basic setup
⌨️ Object oriented programming in JavaScript
⌨️ Drawing the player
⌨️ Mouse controls
⌨️ Making the player move
⌨️ Creating obstacles
⌨️ Non-overlapping obstacles
⌨️ Randomized images from a sprite sheet
⌨️ Positioning rules
⌨️ Reusable collision detection method
⌨️ Let's add physics
⌨️ 8-directional sprite animation
⌨️ Animation angles
⌨️ Debug mode
⌨️ Player movement boundaries
⌨️ FPS
⌨️ Egg class
⌨️ Periodically adding new eggs
⌨️ Egg physics
⌨️ Draw order
⌨️ Enemy class
⌨️ Larva class
⌨️ Egg hatching
⌨️ Larva sprites and collisions
⌨️ Gaining score points
⌨️ Particle effects
⌨️ Particle motion
⌨️ Randomized enemy skins
⌨️ Win and lose condition
⌨️ Restart game

Taught by

freeCodeCamp.org

Reviews

Start your review of Animated Physics Game with JavaScript - Tutorial

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.