JavaScript Games — Source Code Library

CH.01

Canvas · Setup · Drawing API

Introduction to HTML5 Canvas & the Drawing API

Getting started with the HTML5 Canvas element. Drawing shapes, lines, and setting up the canvas coordinate system. The foundation for all subsequent chapters.

SOURCE FILES

htmlbouncing-ball.html

jsbouncing-ball.js

cssstyle.css

CH.02

Timers · Animation Loop · Drawing API

Animation Timers, Frame Loops & the Drawing API

Building animation loops using requestAnimationFrame, setInterval, and getTime. Drawing grids and straight lines on canvas.

SOURCE FILES

htmltimer-example.html

htmlframe-timer-example.html

htmldrawing-api-straight-line.html

htmldrawing-api-grid.html

jstimer-example.js · frame-timer.js · getTime.js

cssstyle.css · style1.css

CH.03

Trigonometry · Vectors · Math

Trigonometry for Animation & 2D Vectors

Applying sine, cosine, and tangent to create smooth animations. Introducing the Vector2D class for direction and magnitude — the mathematical backbone of game physics.

SOURCE FILES

htmltrig-animations.html

htmlvector-examples.html

jstrig-animations.js · trig-functions.js

jsvector2D.js

CH.04

Particles · Projectiles · Physics

Particles, Projectiles & Basic Physics

Creating particle systems from scratch. Simulating projectile motion with gravity and velocity vectors. Building the Particle class that powers visual effects throughout the book.

SOURCE FILES

htmlparticle-example.html

htmlprojectile-test.html

jsparticle.js

CH.05

Forces · Gravity · Drag

Forces — Gravity, Friction & Drag

Applying real-world forces to objects: gravity, air resistance, and friction. Using the updated Vector2D class to compose multiple forces acting simultaneously on a body.

SOURCE FILES

htmlforces-example2.html

jsvector2D.js (extended)

cssstyle2.css

CH.06

Fluid Dynamics · Object Interaction

Fluid Dynamics & Multi-Object Interaction

Simulating bodies moving through fluid environments. Modelling two-mass systems where objects exert forces on each other, using subfolders for reusable object classes.

SOURCE FILES

htmltwo-masses.html

dirobjects/ · includes/

CH.07

Easing · Sliding · Smooth Motion

Easing & Smooth Motion

Implementing easing functions (ease-in, ease-out, elastic) for natural-feeling motion. Sliding animations and smooth deceleration — essential for polished UX and game feel.

SOURCE FILES

jssliding.js

dirobjects/ · includes/

CH.08

Springs · Oscillation · Dragging

Springs, Oscillations & Elastic Behaviour

Hooke's Law in code: spring simulations, oscillating objects, and drag-based interactions. Building dynamic rope and chain effects using spring chains.

SOURCE FILES

jsdragging-oscillations.js

dirobjects/ · includes/

CH.09

Wheels · Rotation · Angular Velocity

Rotation, Wheels & Angular Velocity

Rotating objects around a pivot point. Simulating wheels with angular velocity and friction. Understanding rotational inertia for realistic rolling and spinning effects.

SOURCE FILES

jswheel-object.js

dirobjects/ · includes/

CH.10

Springs · Gravity · Combined Forces

Springs with Gravity & Combined Force Systems

Combining spring forces with gravity for complex emergent behaviours. Building pendulums, dangling objects, and multi-spring networks that behave believably.

SOURCE FILES

jsspring-gravity.js

dirobjects/ · includes/

CH.11

Collision Detection · Walls · Boundaries

Collision Detection — Walls & Boundaries

Detecting and responding to collisions with walls and boundary objects. Reflection vectors, restitution, and building a Wall class to represent arbitrary surfaces.

SOURCE FILES

htmlwall-object.html

dirobjects/ · includes/

CH.12

Fluid Simulation · Splash Effects

Fluid Simulation & Splash Effects

Simulating water surfaces and splash interactions. Building wave propagation algorithms and particle-based fluid effects using the Splash class.

SOURCE FILES

jssplash.js

dirobjects/ · includes/

CH.13

Wind · Turbines · Environmental Forces

Environmental Forces — Wind & Turbines

Modelling environmental forces like wind on objects. Building interactive wind turbine simulations that respond dynamically to applied force direction and magnitude.

SOURCE FILES

htmlwind-turbines.html

dirobjects/ · includes/

CH.14

Spring Systems · Complex Chains

Advanced Spring Systems & Chain Simulation

Building complex multi-spring systems — cloth, chains, bridges. Using constraint-based physics to keep spring networks stable under large forces and rapid movements.

SOURCE FILES

htmlsprings.html

dirobjects/ · includes/

CH.15

Images · Sprites · Assets

Working with Images, Sprites & Assets

Loading and drawing images onto the canvas. Building sprite sheets and animation frame sequences. Managing game assets and image-based rendering for richer visuals.

SOURCE FILES

dirobjects/ · includes/ · images/

CH.16

Gravity Simulation · Planets · Orbital Mechanics

Gravity Simulation & Planetary Orbital Mechanics

The capstone chapter: simulating gravitational attraction between bodies. Building a solar system with planets orbiting a star — combining all previous physics concepts into a unified gravity simulation.

SOURCE FILES

dirplanets_data/ · objects/ · includes/

Foundation HTML5 Animation
with JavaScript

All Chapters

Foundation HTML5 Animationwith JavaScript

All Chapters

Foundation HTML5 Animation
with JavaScript