Animated Physics Game with JavaScript - Tutorial

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

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