Latest posts
-
Simulating rotating gravity and perimeter based movement like in “Be Brave, Barb” game with Phaser, without any physics engine
HTML5 platformer engine inspired by Be Brave, Barb, built without physics. Hero walks along a dynamically generated perimeter, switches between four gravity directions, and reattaches to surfaces using continuous collision detection. Everything is driven by pure geometry, vector math, and segment intersection.
-
From Dense Grids to Clean Perimeters: Extracting Shapes with Greedy Geometry – Tiled and JavaScript example
A dense grid hides simple shapes. This example uses a greedy algorithm to extract the true external perimeter from binary grid data, removing all internal edges and collapsing hundreds of cells into a clean geometric outline. Everything that follows, such as rendering, collision and movement, becomes simpler once the grid turns into a shape.
-
Reducing Tiled Maps to Optimized Collision Rectangles with Greedy Merging
A Tiled collision layer is just a dense grid of cells. By applying greedy rectangle merging, that grid can be reduced to a small set of non-overlapping rectangles that describe the exact same area, but are far cheaper to use at runtime. Full JavaScript example available with source code.
-
Greedy Rectangle Merging: Turning Binary Grids into Simple Geometry – JavaScript example
Greedy rectangle merging is a practical way to simplify dense binary grids into a small set of axis-aligned rectangles. By making local decisions and never backtracking, the same area can be represented with far fewer geometric primitives, revealing how different expansion orders lead to different results. JavaScript source code available.
-
HTML5 prototype of a planet gravity platform using Phaser 4 and Arcade physics, written in TypeScript
A gravity-rotating movement system built with Phaser 4 and TypeScript, where a character walks around floating terrain by dynamically reassigning gravity instead of falling off edges. Movement and jumping are defined in surface space rather than world space, allowing seamless transitions around corners while keeping Arcade Physics fully in control.
-
Understanding QuadTrees: organizing space to reduce unnecessary work
QuadTrees organize space instead of objects, allowing spatial queries to skip large, irrelevant areas with a single check. This makes proximity searches and collision detection far more efficient in games and interactive applications. In this article, we explore how QuadTrees work and visualize them with a practical DOM-based example.
-
Understanding how to use Mulberry32 to achieve deterministic randomness in JavaScript
Randomness is rarely truly random in games. This article explains how Mulberry32 turns a single seed into a fully reproducible sequence of values, with a minimal JavaScript demo and real-world videogame applications.
-
Text-to-Speech on your PC: running Chatterbox Turbo locally on Windows – clean setup + known pitfalls
Running modern text-to-speech models locally on Windows is anything but trivial. This step-by-step guide walks through a clean Chatterbox Turbo setup, from Python and virtual environments to PyTorch pitfalls, showing how to get reliable audio output without guesswork.
-
JavaScript Input Buffering: a simple project to show delayed keyboard events
In this post I’ll show you a simple but powerful JavaScript experiment that visualizes keyboard input in real time and with a one-second delay. It’s a small project built with pure HTML, CSS, and JavaScript, designed to teach essential concepts like keydown/keyup listeners, precise input timing, and requestAnimationFrame loops; the same fundamentals used in games, replays, and input debugging tools.
-
JavaScript + CSS 3D Wheel of Fortune
Build a fully 3D Wheel of Fortune using nothing but HTML, CSS and JavaScript, with pure geometry and a few clever transforms. Watch it spin in real 3D and see how a handful of divs can create a smooth, random wheel animation.
-
Pure TypeScript class to handle math draw games: build your HTML5 math game in a matter of minutes – Phaser example included
Build your own HTML5 draw and sum game in just minutes: the DrawSum class is a standalone, dependency-free TypeScript class that manages the board, scoring, chain logic, and even calculates sprite animations. Phaser example included.
-
Build a HTML5 “Helix Jump” prototype with Three.js and TypeScript – Step 4: scoring, animated CSS background and platforms fading away
In the fourth step of the Helix Jump HTML5 prototype with Three.js and TypeScript, I added a clean CSS-based score display, a subtle animated background using only CSS, and made destroyed platforms fade out and fly away with GSAP. These visual touches make the game feel more alive, and as always, you get the full line-by-line commented source code for free.
