Category: HTML5
-
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.
-
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.
-
Build a HTML5 “Helix Jump” prototype with Three.js and TypeScript – Step 3: adding spikes and using GSAP for camera tweening
In this third step of my Helix Jump prototype with Three.js and TypeScript, I’m adding deadly spikes and animating the camera using GSAP for smoother transitions. As always, I’m sharing the full source code, commented line by line, completely free.
-
Build a HTML5 “Helix Jump” prototype with Three.js and TypeScript – Step 2: adding a bouncing ball with no physics engine
In this second step of my three.js HTML5 Helix Jump prototype, I added a bouncing ball, handled platform collisions and made platforms infinite. As always, you’ll find fully commented TypeScript source code.
-
Build a HTML5 “Helix Jump” prototype with Three.js and TypeScript
Build the foundation of a HTML5 "Helix Jump" game using Three.js, TypeScript, and Vite. Learn to create a rotating tower with sliced platforms and manage shadows and lighting, all with fully commented source code to guide you step by step.
-
Build a game like C64 classic Trailblazer in Three.js using TypeScript, with a lot of room for customization
First step in the creation of a HTML5 Trailblazer game using Three.js and TypeScript. Track movement, fake shadow and controls. Commented source code available.
-
Simulate a keyboard input delay with Phaser (why on earth? You’ll see)
I found a way to add an input delay to Phaser input. Why would I want to do this? I'll talk about this later, in the meantime I'll show you how to do it. Powered by Phaser 4, written in TypeScript, packed with Vite. Commented source code available.
-
Create a HTML5 game like “Golf Dash” with Phaser and a TypeScript class with no dependencies – Compatible with Phaser 4 beta
Golf Dash is a fun Commodore 64 game which is the port of a HTML5 game. Now I am re-porting it to HTML5 with Phaser 4, TypeScript and Vite. First playable levels and source code available.
-
Develop, build and distribute your HTML5 Phaser games with Vite
Take you Phaser HTML5 game development to next level thanks to Vite, with this detailed step by step tutorial full of images and source code snippets.
-
HTML5 tile based platformer handling slopes powered by Phaser using no physics engines (and working with Phaser 4)
I built a HTML5 platformer featuring slopes in a few lines of code with no physics engines. Powered by Phaser and written in TypeScript. Full commented source code ready to be downloaded.
-
HTML5 “Vampire Survivors” prototype built with Phaser – Step 2: adding and collecting coins
"Vampire Survivors" HTML5 prototype built with Phaser gets an update: now you can collect coins dropped by killed monsters with the classic magnet effect. Full commented TypeScript source code available for free.
