YoVDO

Animated Physics Game with JavaScript - Tutorial

Offered By: freeCodeCamp

Tags

Javascript Courses Game Development Courses Object-oriented programming Courses HTML5 Courses CSS3 Courses Collision Detection Courses Sprite Animation Courses

Course Description

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

Related Courses

Video Game Design and Development: Introduction to Game Programming
Abertay University via FutureLearn
Computer Science for Game Development
Harvard University via edX
Practical Game Development in Unity 4: Level 1
Udemy
Game Development for beginners with Python
Udemy
Code Your First Game: Arcade Classic in JavaScript on Canvas
Udemy