— DEVELOPER ACADEMY
Build Your Own HTML5 Games
Step-by-step tutorials explaining how every original game on GamesRich was crafted from scratch using HTML5 Canvas, Vanilla CSS, and modern JavaScript — zero external engines or bloated libraries.
2D Platformer in HTML5 Canvas: Hang Tuah
A complete step-by-step tutorial on building a side-scrolling platform adventure with gravity, tile collision, camera tracking, coin collectibles, and enemy stomp mechanics.
Retro GamesPhysics Hill Climb Game: Mat Rempit
A mathematical guide to creating a 2D motorcycle hill climb racing game with undulating sine-wave tracks, ground slope alignment, air rotation balance, and crash detection.
Retro GamesArcade Space Shooter: Kapal Angkasa
Learn how to build an action-packed vertical space shooter in HTML5 Canvas. Covers fleet formation algorithms, projectile pooling, swooping dive attacks, and laser weapon upgrades.
Retro GamesMartial Arts Brawler: Hang Jebat
A comprehensive guide to building a 2D side-scrolling martial arts combat game with hit-stun states, directional hitboxes, combo decay timers, enemy AI, and boss battles.
Retro Games2.5D Badminton Game: Badminton Sidek
Learn the geometry and physics behind a 2.5D sports game. Covers court coordinate transformation, 3D projectile gravity, smash vs drop shot trajectories, and reactive AI.
Retro GamesPseudo-3D Retro Racer: Proton Saga Racing
An in-depth tutorial on building an OutRun-style pseudo-3D racer in pure 2D Canvas. Explains mathematical perspective projection, road striping, curve accumulation, and multi-lane traffic.
Kids & ToddlersToddler Sensory Game: Budak Kecik
Learn how to build a no-fail, delightful sensory game for babies and toddlers. Covers full-screen dynamic DPR scaling, harmonious pentatonic audio frequencies, and locked exit timers.
Kids & ToddlersVector Coloring Game: Warna Haiwan
Learn how to create a digital coloring book app without raster flood-fill lag. Explains Path2D vector shapes, ctx.isPointInPath() click detection, color state dictionaries, and canvas downloads.
Kids & Toddlers3D Card Matching Game: Memori Ceria
A step-by-step tutorial on building an accessible, responsive memory card match game using semantic HTML, CSS 3D transforms (preserve-3d), and Fisher-Yates array shuffling.
Kids & ToddlersInteractive Drag and Drop Game: Padan & Letak
Learn how to build a responsive drag-and-drop matching game using modern HTML5 Pointer Events, setPointerCapture, target bounding-rect detection, and confetti celebrations.
Anti-Stress GamesVirtual Bubble Wrap Game: Pop Tenang
Learn how to build a soothing anti-stress bubble wrap simulator. Features CSS Grid layout, multi-touch dragging sweep pops with document.elementFromPoint, pitch-drop audio synthesis, and haptic feedback.
Anti-Stress GamesInteractive Slime Simulator: Slime Santai
A guide to building a tactile digital slime experience in HTML5 Canvas. Covers stroke interpolation, viscous decay, radial shine lighting, ripple propagation, and squishy audio design.
Anti-Stress GamesMulti-Toy Fidget Board: Fidget Santai
Learn how to construct a multi-element virtual fidget board with realistic physics. Explains rotational angular momentum, pointer flick velocity calculations, mechanical switch toggles, and clicker toys.
3D Games3D Kart Racing Game in Three.js: Sunset Circuit
A comprehensive step-by-step developer tutorial on creating an arcade 3D kart racer using Three.js. Covers spline track ribbon extrusion, custom toon materials with inverted-hull ink lines, vehicle drift physics, boost pads, and AI pathfinding.