# Emanuele Feronato

> italian geek and PROgrammer


## Posts

- [Getting Started with Phaser 4: Vite + TypeScript Setup, using the official Create Game App](https://emanueleferonato.com/2026/04/17/getting-started-with-phaser-4-vite-typescript-setup-using-the-official-create-game-app/): Phaser 4 has arrived, bringing a fresh foundation for modern web game development. Learn to set up a brand new project using the official Create Game App, powered by Vite and TypeScript, and walk through the essential structure to get your first game up and running quickly.
- [Phaser 4 HTML5 SameGame powered by samegame-engine, a headless TypeScript class](https://emanueleferonato.com/2026/04/09/phaser-4-html5-samegame-powered-by-samegame-engine-a-headless-typescript-class/): Complete HTML5 SameGame clone built with Phaser 4, powered by a fully headless TypeScript game engine. It features a clean separation between logic and rendering, reusable core mechanics, and an efficient implementation based on object pooling and delta-driven animations.
- [Build a highly customizable mobile friendly HTML5 level selection screen controllable by tap, swipe and mouse wheel, written in TypeScript and powered by Phaser](https://emanueleferonato.com/2026/02/25/build-a-highly-customizable-mobile-friendly-html5-level-selection-screen-controllable-by-tap-swipe-and-mouse-wheel-written-in-typescript-and-powered-by-phaser/): A clean, fully paginated level selection system built in Phaser 4 with TypeScript, featuring horizontal drag, direction-aware snap, mouse wheel navigation and event-driven thumbnails. The UI components are fully decoupled from scene logic and designed with clear state separation. Complete source code available for download, ready to use and extend.
- [Simulating rotating gravity and perimeter based movement like in "Be Brave, Barb" game with Phaser, without any physics engine](https://emanueleferonato.com/2026/02/16/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](https://emanueleferonato.com/2026/02/05/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](https://emanueleferonato.com/2026/01/31/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](https://emanueleferonato.com/2026/01/28/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](https://emanueleferonato.com/2026/01/21/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](https://emanueleferonato.com/2026/01/19/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](https://emanueleferonato.com/2026/01/08/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](https://emanueleferonato.com/2026/01/07/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](https://emanueleferonato.com/2025/11/20/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](https://emanueleferonato.com/2025/10/31/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](https://emanueleferonato.com/2025/08/22/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](https://emanueleferonato.com/2025/06/17/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.
- [Click when Red – learn JavaScript and CSS by building a reflex game in a single HTML page](https://emanueleferonato.com/2025/05/30/click-when-red-learn-javascript-and-css-by-building-a-reflex-game-in-a-single-html-page/): Learn how to build a complete reflex game using only HTML, CSS, and vanilla JavaScript — all in a single file. No frameworks, no dependencies, just pure code to teach you the real fundamentals of web development. Perfect for beginners who want to understand how a web page works, how to react to user input, and how to write game logic from scratch.
- [Build a HTML5 "Helix Jump" prototype with Three.js and TypeScript - Step 3: adding spikes and using GSAP for camera tweening](https://emanueleferonato.com/2025/05/11/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](https://emanueleferonato.com/2025/04/28/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](https://emanueleferonato.com/2025/04/20/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](https://emanueleferonato.com/2025/04/12/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.
- [Vanilla JavaScript Columns, because everybody should build a Columns game](https://emanueleferonato.com/2025/03/02/vanilla-javascript-columns-because-everybody-should-build-a-columns-game/): Simple vanilla JavaScript to build a Columns game rendering on canvas. Full source code available.
- [Vanilla JavaScript Tetris, because everybody should build a Tetris game](https://emanueleferonato.com/2025/02/24/vanilla-javascript-tetris-because-everybody-should-build-a-tetris-game/): Everybody should be able to build a Tetris game, so this is my vanilla JavaScript take. Beware, it's not that easy, because it should feature wall kicking, Super Rotation System and empty lines above the ceiling.
- [Simulate a keyboard input delay with Phaser (why on earth? You'll see)](https://emanueleferonato.com/2025/02/14/simulate-a-keyboard-input-delay-with-phaser-why-on-earth-youll-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](https://emanueleferonato.com/2025/01/31/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](https://emanueleferonato.com/2025/01/01/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)](https://emanueleferonato.com/2024/12/25/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](https://emanueleferonato.com/2024/12/12/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.
- [Quick HTML5 prototype of "Vampire Survivors" built with Phaser (like the original game)](https://emanueleferonato.com/2024/11/29/quick-html5-prototype-of-vampire-survivors-built-with-phaser-like-the-original-game/): Do you know you can build a working HTML5 prototype of "Vampire Survivors" in a couple of lines thanks to Phaser? Have a look at the TypeScript source code, commented and ready to be downloaded.
- [First Phaser 4 test, everything worked fine](https://emanueleferonato.com/2024/11/22/first-phaser-4-test-everything-worked-fine/): I have beautiful, beautiful news for you! I installed Phaser 4 on a game developed with Phaser 3, and it works perfectly. I even added a blur effect, and everything ran smoothly. Full source code available.
- [HTML5 "Ballz" engine powered by Phaser and TypeScript - a better way to show ball trajectory](https://emanueleferonato.com/2024/11/05/html5-ballz-engine-powered-by-phaser-and-typescript-a-better-way-to-show-ball-trajectory/): "Ballz" HTML5 prototype built with Phaser now will look better thanks to an improved trajectory system, using tweens rather than tilesprites. Full commented TypeScript project available to download.
- [HTML5 "Ballz" engine rewritten to feature double and quadruple blocks, powered by Phaser and written in TypeScript](https://emanueleferonato.com/2024/10/15/html5-ballz-engine-rewritten-to-feature-double-and-quadruple-blocks-powered-by-phaser-and-written-in-typescript/): Do you want to feature different block sizes in a HTML5 "Ballz" game? Look how I built the game engine using Phaser and Arcade Physics, written in TypeScrypt. Full source code available.
- [Introducing the 101 games challenge](https://emanueleferonato.com/2024/09/12/introducing-the-101-games-challenge/): I will build 101 games as a solo developer. Why? Because why not?
- [Playable "Pushori" prototype built in vanilla JavaScript](https://emanueleferonato.com/2024/08/13/playable-pushori-prototype-built-in-vanilla-javascript/): Pushori was a great Flash game made by Tony Pa, so I decided it will be my first game in the 101 games challenge. I played a bit with vanilla JavaScript to write the main engine, and built a playable prototype.
- [HTML5 prototype of a circular endless runner built with Phaser - final version in TypeScript with more optimization](https://emanueleferonato.com/2024/07/29/html5-prototype-of-a-circular-endless-runner-built-with-phaser-final-version-in-typescript-with-more-optimization/): The HTML5 circular endless runner game engine has been updated to latest Phaser version, rewritten in TypeScript and optimized. No physics engine, just trigonometry and geometry. Full commented source code available.
- [Build a HTML5 game like "Zuma" with Phaser and TypeScript - step 2: firing a gem and adding it to the chain](https://emanueleferonato.com/2024/07/19/build-a-html5-game-like-zuma-with-phaser-and-typescript-step-2-firing-a-gem-and-adding-it-to-the-chain/): In this second step of HTML5 Zuma game creation using Phaser and TypeScript, I am going to show you how to fire gems and add them to the chain. Completely explained theory and commented source code for you to download.
- [TypeScript class of a doubly linked list](https://emanueleferonato.com/2024/07/15/typescript-class-of-a-doubly-linked-list/): Although you can do anything with arrays, sometimes there is a need for more complex data structures, and one of them is the linked list. Here is my attempt to build a doubly linked list in TypeScript, with some extra methods.
- [Build a HTML5 game like "Zuma" with Phaser and TypeScript - step 1: drawing the path and adding gems](https://emanueleferonato.com/2024/06/18/build-a-html5-game-like-zuma-with-phaser-and-typescript-step-1-drawing-the-path-and-adding-gems/): Want to build your HTML5 Zuma game? Follow this new tutorial series and you will code it with Phaser and TypeScript. In the first step, learn to draw a path and make gems follow it. Full source code available to download.
- [HTML5 "Watermelon Game" using Phaser and Box2D powered by Planck.js updated with new square and pentagon shapes - Get it on Gumroad](https://emanueleferonato.com/2024/06/05/html5-watermelon-game-using-phaser-and-box2d-powered-by-planck-js-updated-with-new-square-and-pentagon-shapes-get-it-on-gumroad/): Big update to HTML5 "Watermelon Game" powered by Phaser and Box2D. Now featuring square and polygon shapes. Get the full commented TypeScript source code on Gumroad.
- [Modern JavaScript with no boring theory - Loops](https://emanueleferonato.com/2024/05/20/modern-javascript-with-no-boring-theory-loops/): Modern JavaScript explained with no boring theory: learn everything about loops.
- [Full commented source code of HTML5 game "Drop the Square" built with official Phaser webpack package and written in TypeScript available on Gumroad](https://emanueleferonato.com/2024/05/10/full-commented-source-code-of-html5-game-drop-the-square-built-with-official-phaser-webpack-package-and-written-in-typescript-available-on-gumroad/): Get the line-by-line commented source code of the HTML5 game "Drop the Square" built with Phaser and written in TypeScript using the official Phaser webpack package. For free, for a limited time.
- [Build a HTML5 game like Netflix’s Teeter (Up) using Phaser and Box2D physics, written in TypeScript - part 2: adding holes and goal](https://emanueleferonato.com/2024/04/18/build-a-html5-game-like-netflixs-teeter-up-using-phaser-and-box2d-physics-written-in-typescript-part-2-adding-holes-and-goal/): In the second step of the series about Teeter (Up) game built in HTML5 I added the goal and deadly holes. Powered by Phaser and Box2D, written in TypeScript- Full commented source code available.
- [Build a HTML5 game like Netflix's Teeter (Up) using Phaser and Box2D physics, written in TypeScript - part 1: platform movement](https://emanueleferonato.com/2024/04/05/build-a-html5-game-like-netflixs-teeter-up-using-phaser-and-box2d-physics-written-in-typescript-part-1-platform-movement/): Teeter (Up) is a fun Netflix game you can play on your mobile phone. Look how I rebuilt the bar movement in a HTML5 prototype using Phaser, and Box2D. Full TypeScript source code available to download.
- [Build a HTML5 game like “Watermelon Game” using Phaser and Box2D powered by Planck.js – step 7: adding sounds and loading bar. Get it on Gumroad](https://emanueleferonato.com/2024/03/25/build-a-html5-game-like-watermelon-game-using-phaser-and-box2d-powered-by-planck-js-step-7-adding-sounds-and-loading-bar-get-it-on-gumroad/): Get the HTML5 "Watermelon Game" full webpack project, powered by Phaser and Box2D through Planck.js, written in TypeScript. Phaser official webpack template included. Free download, just enter "zero" as price.
- [Build a HTML5 game like "Watermelon Game" using Phaser and Box2D powered by Planck.js - step 6: saving high score and using object pooling](https://emanueleferonato.com/2024/03/08/build-a-html5-game-like-watermelon-game-using-phaser-and-box2d-powered-by-planck-js-step-5-saving-high-score-and-using-object-pooling/): Now HTML5 prototype of the Watermelon Game uses object pooling to save resources, and can save the best score with local storage. Enjoy and get the commented source code. Powered by Phaser and Box2D through Planck.js, written in TypeScript.
- [Build a HTML5 game like "Watermelon Game" using Phaser and Box2D powered by Planck.js - step 5: adding graphics, score, "next" icon and checking for game over](https://emanueleferonato.com/2024/02/27/build-a-html5-game-like-watermelon-game-using-phaser-and-box2d-powered-by-planck-js-step-5-adding-graphics-score-next-icon-and-checking-for-game-over/): Massive update of HTML5 prototype of "Watermelon Game" featuring fancy graphics, score, checking for game over, "next" icon, animated background and panels. Built with Phaser and Box2D with Planck.js, written in TypeScript. Source code available to download.
- [Build a HTML5 game like "Watermelon Game" using Phaser and Box2D powered by Planck.js - step 4: handling user input](https://emanueleferonato.com/2024/02/14/build-a-html5-game-like-watermelon-game-using-phaser-and-box2d-powered-by-planck-js-step-4-handling-user-input/): Now the HTML5 prototype of Watermelon Game handles user input so it's becoming playable. Powered by Phaser and Box2D/Planck.js, written in TypeScript. Full source code available to download.
- [Build a HTML5 game like "Watermelon Game" using Phaser and Box2D powered by Planck.js - step 3: particle effects and more customization](https://emanueleferonato.com/2024/02/08/build-a-html5-game-like-watermelon-game-using-phaser-and-box2d-powered-by-planck-js-step-3-particle-effects-and-more-customization/): In the 3rd step of "Watermelon" HTML5 prototype I added more room for customization and particle explosions. Full source code powered by Phaser and written in TypeScript available to download. Physics powered by Box2D through Planck.js
- [Build a HTML5 game like "Watermelon Game" using Phaser and Box2D powered by Planck.js - step 2: adding delays and explosions](https://emanueleferonato.com/2024/02/01/build-a-html5-game-like-watermelon-game-using-phaser-and-box2d-powered-by-planck-js-step-2-adding-delays-and-explosions/): Second step of the HTML5 prototype of "Watermelon Game". I added some delays and explosions to the physics engine, to let me easily add particle effects in next step. Powered by Phaser and Planck.js, written in TypeScript. Source code available to download.
- [Build a HTML5 game like "Watermelon Game" using Phaser and Box2D powered by Planck.js - step 1: the basic game mechanics](https://emanueleferonato.com/2024/01/26/build-a-html5-game-like-watermelon-game-using-phaser-and-box2d-powered-by-planck-js-step-1-the-basic-game-mechanics/): First step in the creation of a HTML5 game like "Watermelon Game" using Phaser and Box2D physics powered by Planck.js. Let's see how to merge two balls into a bigger one. Full TypeScript source code available to download.
- [Playing with official Phaser Parcel template, using it to build a Perfect Square! prototype](https://emanueleferonato.com/2024/01/19/playing-with-official-phaser-parcel-template-using-it-to-build-a-perfect-square-prototype/): Here is the official Phaser Parcel template used to build one of my latest HTML5 game prototypes, Perfect Square! Look how I turned a template into a complete HTML5 game. Source code available to download. 
- [Getting Ready to Develop HTML5 Games with Phaser and TypeScript - A free minibook to get you started](https://emanueleferonato.com/2024/01/12/getting-ready-to-develop-html5-games-with-phaser-and-typescript-a-free-minibook-to-get-you-started/): Basic knowledge should be easily accessible, and that's why I published this free minibook to get you started on HTML5 game development with Phaser and TypeScript.
- [Using TypeScript to build HTML5 games with Phaser, webpack and Visual Studio Code](https://emanueleferonato.com/2023/12/22/using-typescript-to-build-html5-games-with-phaser-webpack-and-visual-studio-code/): Moving from JavaScript to TypeScript to build HTML5 games has never been so much easy with this complete tutorial covering Node.js, npm, npx, Visual Studio Code and Phaser.
- [Publishing HTML5 games with Phaser, webpack and Visual Studio Code](https://emanueleferonato.com/2023/12/20/publishing-html5-games-with-phaser-webpack-and-visual-studio-code/): Create distributable versions of your HTML5 games powered by Phaser using Visual Studio Code and webpack.
- [Developing HTML5 games with Phaser, webpack and Visual Studio Code](https://emanueleferonato.com/2023/12/15/developing-html5-games-with-phaser-webpack-and-visual-studio-code/): Learn to configure Visual Studio Code and webpack to work with Phaser and optimize your HTML5 game development with this detailed step by step tutorial featuring source code examples and more than 20 images.
- [Your first web server using Node.js, and why you should definitively use a web server](https://emanueleferonato.com/2023/12/11/your-first-web-server-using-node-js-and-why-you-should-definitively-use-a-web-server/): If you are into HTML5 game development, sooner or later you will have to start a web server. This basic guide explains you how to create a simple web server with Node.js, and why you definitively should use a web server.
- [Play "Space to Jump", my HTML5 take on Flash iconic game "Space is Key"](https://emanueleferonato.com/2023/12/06/play-space-to-jump-my-html5-take-on-flash-iconic-game-space-is-key/): Play "Space to Jump", my HTML5 take on the Flash iconic game "Space is Key", powered by Phaser and written in TypeScript with no physics engine, just using geometry and trigonometry. 
- [Your first HTML5 project using Phaser Editor 2D, Webpack and TypeScript](https://emanueleferonato.com/2023/11/30/your-first-html5-project-using-phaser-editor-2d-webpack-and-typescript/): New to Phaser Editor 2D? Here is a detailed guide with 28 pictures explaining how to build a HTML5 project using Phaser Editor 2D, TypeScript and Webpack
- [Node.js and NPM: don't be afraid of them!](https://emanueleferonato.com/2023/11/26/node-js-and-npm-dont-be-afraid-of-them/): Node.js and NPM may scare many developers struggling with javascript, but they shouldn't. Here is a very quick guide to installing Node and NPM, let's start from the bare bones and see how to install them.
- [Build a HTML5 game like Space is Key using Phaser, tweens and Arcade physics - using Tiled to draw levels, even with rotated obstacles](https://emanueleferonato.com/2023/11/10/build-a-html5-game-like-space-is-key-using-phaser-tweens-and-arcade-physics-using-tiled-to-draw-levels-even-with-rotated-obstacles/): The HTML5 prototype of "Space is Key" powered by Phaser now features Tiled designed levels. Draw your levels in a matter of minutes and import them in the game. Full TypeScript source code available to download for free.
- [Build a HTML5 game like Space is Key using Phaser, tweens and Arcade physics – removing Arcade physics](https://emanueleferonato.com/2023/10/30/build-a-html5-game-like-space-is-key-using-phaser-tweens-and-arcade-physics-removing-arcade-physics/): "Space is Key" HTML5 prototype powered by Phaser now does not rely anymore on Arcade physics, and has its own simple physics and collision detection routines. Full TypeScript source code available.
- [Build a HTML5 game like Space is Key using Phaser, tweens and Arcade physics - pixel perfect collisions and text messages](https://emanueleferonato.com/2023/10/16/build-a-html5-game-like-space-is-key-using-phaser-tweens-and-arcade-physics-pixel-perfect-collisions-and-text-messages/): In this step of "Space is Key" HTML5 prototype I added pixel perfect collision and the capability of adding texts as players progress through the level. Powered by Phaser and arcade physics, written in TypeScript. Source code available for free.
- [Build a HTML5 game like Space is Key using Phaser, tweens and Arcade physics - creation of an engine capable of managing any kind of level](https://emanueleferonato.com/2023/10/06/build-a-html5-game-like-space-is-key-using-phaser-tweens-and-arcade-physics-creation-of-an-engine-capable-of-managing-any-kind-of-level/): The new version of "Space is KEY" HTML5 prototype is capable of running any kind of level, each one with its own palette, obstacles, amount of floors and a square with custom size, speed, gravity and jump force. All built with Phaser and written in TypeScript, source code available to download for free.
- [Create a HTML5 game like Space is Key using Phaser, tweens and Arcade physics - updated to Phaser 3.60 and rewritten in TypeScript](https://emanueleferonato.com/2023/09/22/create-a-html5-game-like-space-is-key-using-phaser-tweens-and-arcade-physics-updated-to-phaser-3-60-and-rewritten-in-typescript/): Old Flash glory "Space is Key" now gets a HTML5 prototype updated to Phaser 3.60, written in TypeScript and with room for customization. Full source code available.
- [Complete JQuery + interact.js Draw and Match game in less than 100 lines thanks to my pure TypeScript class to handle Draw and Match games](https://emanueleferonato.com/2023/08/30/complete-jquery-interact-js-draw-and-match-game-in-less-than-100-lines-thanks-to-my-pure-typescript-class-to-handle-draw-and-match-games/): Thanks to my pure TypeScript class with no dependencies to handle Draw and Match games, I was able to build a jQuery Draw and Match game in less than 100 lines of code. Full example ready to download.
- [Pure TypeScript class with no depencencies to handle Draw and Match games in just a few lines - Full Phaser example](https://emanueleferonato.com/2023/08/25/pure-typescript-class-with-no-depencencies-to-handle-draw-and-match-games-in-just-a-few-lines-full-phaser-example/): With this pure TypeScript class with no dependencies you can build HTML5 Draw and Match games in a matter of minutes with just a couple of methods. Full commented and explained Phaser example
- [Add a virtual joystick to your HTML5 games in a matter of minutes with nippleJS. Example powered by Phaser and Arcade physics](https://emanueleferonato.com/2023/07/24/add-a-virtual-joystick-to-your-html5-games-in-a-matter-of-minutes-with-nipplejs-example-powered-by-phaser-and-arcade-physics/): Add a virtual joystick to your HTML5 games in a matter of minutes with nippleJS. Full commented example using Phaser, written in TypeScript 
- [Build a HTML5 game like "Magick" iPad game using Phaser and ARCADE physics - making player stop, and maybe fall](https://emanueleferonato.com/2023/07/18/build-a-html5-game-like-magick-ipad-game-using-phaser-and-arcade-physics-making-player-stop-and-maybe-fall/): This new step in the creation of a HTML5 version of "Magick" game features the ability to stop the player and make it fall from edges. Powered by Phaser and written in TypeScript, with full source code available to download.
- [Build a HTML5 game like "Magick" iPad game using Phaser and ARCADE physics - adding multiple levels](https://emanueleferonato.com/2023/06/27/build-a-html5-game-like-magick-ipad-game-using-phaser-and-arcade-physics-adding-multiple-levels/): "Magick" HTML5 prototype built with Phaser now features more tile types and four different levels. Source code written in TypeScript available for download.
- [Build a HTML5 game like "Magick" iPad game using Phaser and ARCADE physics - updated to Phaser 3.60 and written in TypeScript](https://emanueleferonato.com/2023/06/23/build-a-html5-game-like-magick-ipad-game-using-phaser-and-arcade-physics-updated-to-phaser-3-60-and-written-in-typescript/): "Magick" as a fun iPad game, unfortunately not available anymore. The HTML5 prototype has been ported to Phaser 3.60, written in TypeScript. Full source code available to download.
- [HTML5 "Down the Mountain" updated to Phaser 3.60 using TypeScript and classes](https://emanueleferonato.com/2023/06/14/html5-down-the-mountain-updated-to-phaser-3-60-using-typescript-and-classes/): "Down the Mountain" was a mobile smashing hit back in 2015, what about a HTML5 prototype updated to Phaser 3.60, written in TypeScript and using custom classes? Source code available to download.
- [Build a HTML5 game like "Mini Archer" using Phaser and TypeScript - Step 6: splitting the code into classes](https://emanueleferonato.com/2023/06/01/build-a-html5-game-like-mini-archer-using-phaser-and-typescript-step-6-splitting-the-code-into-classes/): In this sixth step of the creation of a HTML5 "Mini Archer" prototype, I am showing you how to split your code in classes, to enhance readability and reusability. Powered by Phaser and written in TypeScript.
- [Build a HTML5 game like "Mini Archer" using Phaser and TypeScript - Step 5: firing the arrow without physics engine, only using tweens and masks](https://emanueleferonato.com/2023/05/12/build-a-html5-game-like-mini-archer-using-phaser-and-typescript-step-5-firing-the-arrow-without-physics-engine-only-using-tweens-and-masks/): "Mini Archer" HTML5 prototype built with Phaser and written in Javascript now features a running girl able to shoot arrows to an infinite sequence of randomly generated targets running along an endless terrain, without any physics engines, only using trigonometry.
- [Build a HTML5 game like "Mini Archer" using Phaser and TypeScript - Step 4: adding the arrow](https://emanueleferonato.com/2023/04/28/build-a-html5-game-like-mini-archer-using-phaser-and-typescript-step-4-adding-the-arrow/): In this fourth part of "Mini Archer" HTML5 prototype I added the arrow. Full commented source code available.
- [Build a HTML5 game like "Mini Archer" using Phaser and TypeScript - Step 3: adding the bow, actually a rainbow](https://emanueleferonato.com/2023/04/17/build-a-html5-game-like-mini-archer-using-phaser-and-typescript-step-3-adding-the-bow-actually-a-rainbow/): In this 3rd part of HTML5 "Mini Archer" tutorial, I am adding a bow. Actually, a rainbow between two clouds. Full TypeScript commented source code available, powered by Phaser
- [Build a HTML5 game like "Mini Archer" using Phaser and TypeScript - Step 2: adding the archer, a running girl](https://emanueleferonato.com/2023/04/05/build-a-html5-game-like-mini-archer-using-phaser-and-typescript-step-2-adding-the-archer-a-running-girl/): Second step in the creation of HTML5 game like "Mini Archer" using Phaser and writing in TypeScript. Now there's an endless terrain with infinite randomly generated targets, and a running girl. Full commented source code available.
- [Build a HTML5 game like "Mini Archer" using Phaser and TypeScript - Step 1: creation of an endless terrain with infinite randomly generated targets](https://emanueleferonato.com/2023/03/27/build-a-html5-game-like-mini-archer-using-phaser-and-typescript-step-1-creation-of-an-endless-terrain-with-infinite-randomly-generated-targets/): Today I am starting a new Phaser tutorial series about the creation of a HTML5 game like the mobile hyper casual game "Mini Archer". Full source code in TypeScript available to download.
- [New massive update to "Serious Scramblers" prototype built with nocode tool GDevelop, now there are 6 different enemy types interacting and killing each other](https://emanueleferonato.com/2023/03/10/new-massive-update-to-serious-scramblers-prototype-built-with-nocode-tool-gdevelop-now-there-are-6-different-enemy-types-interacting-and-killing-each-other/): Massive update to "Serious Scramblers" prototype developed with nocode tool GDevelop, now featuring six different enemies interacting and killing each other. Full project available to download.
- [Massive update to "Serious Scramblers" prototype built with nocode tool GDevelop: more enemies, fancy graphics, death animation, increasing scrolling speed, and more](https://emanueleferonato.com/2023/02/23/massive-update-to-serious-scramblers-prototype-built-with-nocode-tool-gdevelop-more-enemies-fancy-graphics-death-animation-increasing-scrolling-speed-and-more/): Massive update to "Serious Scramblers" prototype built using nocode tool GDevelop, featuring more enemy types, scrolling speed according to player position, death animation and more. Full project available to download for free.
- [HTML5 "Serious Scrambers" prototype built with GDevelop with no code - adding patrolling enemies which can be killed by jumping on them and disappearing platforms](https://emanueleferonato.com/2023/02/09/html5-serious-scrambers-prototype-built-with-gdevelop-with-no-code-adding-patrolling-enemies-which-can-be-killed-by-jumping-on-them-and-disappearing-platforms/): Here is a Serious Scramblers prototype built with nocode editor GDevelop, featuring patrolling enemies which can be killed by jumping on them and disappearing platforms. Full project available to download.
- [HTML5 "Serious Scrambers" prototype built with GDevelop, using object pooling. Now the player can also jump](https://emanueleferonato.com/2023/01/24/html5-serious-scrambers-prototype-built-with-gdevelop-using-object-pooling-now-the-player-can-also-jump/): Here is the "Serious Scramblers" HTML5 prototype built with GDevelop ready to be downloaded. Features object pooling, WASD and arrow keys controls, and jumping thanks to PlatformerObject behavior
- [HTML5 "Serious Scrambers" prototype built with Kaboom, using object pooling. Written in TypeScript](https://emanueleferonato.com/2023/01/20/html5-serious-scrambers-prototype-built-with-kaboom-using-object-pooling-written-in-typescript/): First attempt to create a "Serious Scramblers" HTML5 prototype using Kaboom, a Javascript game programming library. Play and get the commented source code for free.
- [Playing with Phaser and Three.js: preload glTF 3d models, render them with Three then animate them with Phaser](https://emanueleferonato.com/2023/01/11/playing-with-phaser-and-three-js-preload-gltf-3d-models-render-them-with-three-then-animate-them-with-phaser/): Having the 2D power of Phaser and 3D GLTF models of Three.js is easy: look at this completely commented TypeScript tutorial, you should definitively use this combo in your next HTML5 game.
- [Build a 3D HTML5 game like "Stairs" using Phaser and Three.js - Step 6: final touches and settings to increase difficulty](https://emanueleferonato.com/2023/01/09/build-a-3d-html5-game-like-stairs-using-phaser-and-three-js-step-6-final-touches-and-settings-to-increase-difficulty/): In the 6th step of "Stairs" HTML5 prototype built with Phaser and Three.js I added options to automatically increase difficulty as players proceed in this endless runner. Full commented TypeScript source code to download for free.
- ["Quick Switch" HTML5 prototype built with GDevelop](https://emanueleferonato.com/2023/01/05/quick-switch-html5-prototype-built-with-gdevelop/): I am having fun with GDevelop so I decided to port another old Flash + Box2D game into a HMTL5 prototype: Quick Switch. Full project available to download.
- ["Totem Destroyer" HTML5 prototype built with free no code tool GDevelop](https://emanueleferonato.com/2023/01/03/totem-destroyer-html5-prototype-built-with-free-no-code-tool-gdevelop/): Look how I built a HTML5 prototype of the famous "Totem Destroyer" Flash game in a matter of minutes using the free no code tool GDevelop. Graphics assets by Kenney.
- [Build a 3D HTML5 game like "Stairs" using Phaser and Three.js – Step 5: update to latest Three.js version, moving steps, bonuses to collect and more improvements](https://emanueleferonato.com/2023/01/01/build-a-3d-html5-game-like-stairs-using-phaser-and-three-js-step-5-update-to-latest-three-js-version-moving-steps-bonuses-to-collect-and-more-improvements/): I am starting the new year with a massive update to HTML5 prototype of "Stairs" game built with Phaser and Three.js, written in Typescript. Moving steps, bonuses to collect, latest Three.js library and more. Full commented source code available for free.
- [Build a 3D HTML5 game like "Stairs" using Godot - Step 6: starting and dying with stile](https://emanueleferonato.com/2022/12/17/build-a-3d-html5-game-like-stairs-using-godot-step-6-starting-and-dying-with-stile/): In the 6th step of the creation of "Stairs" HTML5 game using Godot engine I am explaining how to wait for user input to start the game and how to die with style. Full commented source code available for free.
- [Build a 3D HTML5 game like "Stairs" using Godot – Step 5: better way to control the ball, check for collisions with spikes and check for the ball to fall down the steps](https://emanueleferonato.com/2022/12/07/build-a-3d-html5-game-like-stairs-using-godot-step-5-better-way-to-control-the-ball-check-for-collisions-with-spikes-and-check-for-the-ball-to-fall-down-the-steps/): In the 5th step in the building of a HTML5 game like "Stairs" with Godot Engine, we add a virtual trackpad for a better ball control, check for the ball hit a spike or fall down the stair. Full commented project available to download.
- [How and why I developed "Soko64", a Sokoban game for Commodore 64, in 2022](https://emanueleferonato.com/2022/11/30/how-and-why-i-developed-soko64-a-sokoban-game-for-commodore-64-in-2022/): This is how and why I developed a Commodore 64 game in 2022, and obviously there's the source code available to download and experiment. It was fun, would you ever retrocode?
- [Build a 3D HTML5 game like "Stairs" using Phaser and Three.js - Step 4: collision detection, better controls and level progression](https://emanueleferonato.com/2022/11/16/build-a-3d-html5-game-like-stairs-using-phaser-and-three-js-step-4-collision-detection-better-controls-and-level-progression/): Massive update of "Stairs" HTML5 3D game prototype, featuring collision detection without any physics engine, virtual trackpad to control the ball and level progression. Powered by Phaser and Three.js, written in TypeScript. Full commented source code available.  
- [Build a 3D HTML5 game like "Stairs" using Godot - Step 4: controlling the ball with the mouse and adding more spikes](https://emanueleferonato.com/2022/11/08/build-a-3d-html5-game-like-stairs-using-godot-step-4-controlling-the-ball-with-the-mouse-and-adding-more-spikes/): In the 4th step of the HTML5 prototype of "Stairs" game built with Godot, we'll see how to add more spikes and control the ball with the mouse. Full downloadable project with commented source code available.
- [Build a 3D HTML5 game like "Stairs" using Phaser and Three.js - Step 3: controlling the bouncing ball and adding more spikes](https://emanueleferonato.com/2022/10/28/build-a-3d-html5-game-like-stairs-using-phaser-and-three-js-step-3-controlling-the-bouncing-ball-and-adding-more-spikes/): In the 3rd step of "Stairs" HTML5 game powered by Phaser and Three.js, I'll show you how to control the ball with mouse and add more spikes. Full commented TypeScript source code available.
- [Build a 3D HTML5 game like "Stairs" using Godot – Step 3: adding the bouncing ball using only trigonometry](https://emanueleferonato.com/2022/10/26/build-a-3d-html5-game-like-stairs-using-godot-step-3-adding-the-bouncing-ball-using-only-trigonometry/): In this 3rd step of "Stairs" HTML5 prototype build with Godot, we'll see how to add a bouncing ball with no physics, just faking the movement with trigonometry. Full project available for download.
- [Build a 3D HTML5 game like "Stairs" using Phaser and Three.js – Step 2: adding the bouncing ball just using trigonometry](https://emanueleferonato.com/2022/10/22/build-a-3d-html5-game-like-stairs-using-phaser-and-three-js-step-2-adding-the-bouncing-ball-just-using-trigonometry/): In this second step of "Stairs" HTML5 protoype built with Phaser and Three.js we'll see how to add a bouncing ball with no physics engines, just using trigonometry. Full commented source code available, written in TypeScript.
- [Build a 3D HTML5 game like "Stairs" using Godot - Step 2: adding endless randomly placed spikes and assigning materials to meshes](https://emanueleferonato.com/2022/10/19/build-a-3d-html5-game-like-stairs-using-godot-step-2-adding-endless-randomly-placed-spikes-and-assigning-materials-to-meshes/): Second step about the creation of a HTML5 game like "Stairs" using Godot. How to assign material to objects and add infinite randomly generated spikes. Detailed tutorial with 15 pictures and commented source code.
- [Build a 3D HTML5 game like "Stairs" using Phaser and Three.js - Step 1: building an endless staircase with random spikes](https://emanueleferonato.com/2022/10/15/build-a-3d-html5-game-like-stairs-using-phaser-and-three-js-step-1-building-an-endless-staircase-with-random-spikes/): Using Phaser and Three.js together allowed me to build an endless HTML5 3D staircase with random spikes in a few lines of code. Full commented source code in TypeScript available for download.
- ["Bouncy Light" HTML5 prototype built using Phaser to handle game logic and Three to render 3D graphics, written in TypeScript](https://emanueleferonato.com/2022/10/12/bouncy-light-html5-prototype-built-using-phaser-to-handle-game-logic-and-three-to-render-3d-graphics-written-in-typescript/): Working example of full integration between Phaser and Three.js with no external software to build HTML5 games in 3D. "Bouncy Light" prototype available for download with source code.
- [Build a 3D HTML5 game like "Stairs" using Godot - Step 1: building an endless stair](https://emanueleferonato.com/2022/10/06/build-a-3d-html5-game-like-stairs-using-godot-step-1-building-an-endless-stair/): Detailed tutorial with commented source code and 30 pictures about the creation of "Stairs" mobile game in HTML5 using Godot Engine. In this first part we are going to build an endless staircase. Full project available for download.
- [Add a Bootstrap navbar to your HTML5 Phaser games and let it manage the UI](https://emanueleferonato.com/2022/09/29/add-a-bootstrap-navbar-to-your-html5-phaser-games-and-let-it-manage-the-ui/): Do you hate coding the GUI of your HTML5 Phaser games? Use Bootstrap to do the dirty work and let Phaser and Bootstrap exchange information. Full working example explained.
- [HTML5 prototype of "Block it" using Box2D in an Arcade way, powered by Phaser and written in TypeScript - Particle explosions and score](https://emanueleferonato.com/2022/09/15/html5-prototype-of-block-it-using-box2d-in-an-arcade-way-powered-by-phaser-and-written-in-typescript-particle-explosions-and-score/): "Block it" HTML5 prototype now features a score system and particles explosion when it's game over. A physics game using Phaser and Box2D thanks to Planck.js, written in TypeScript. Full commented source code available.

## Pages

- [](https://emanueleferonato.com/newsletter-2/)
- [Newsletter](https://emanueleferonato.com/newsletter/)
- [All blog posts](https://emanueleferonato.com/all-blog-posts/): If you need a brief summary of all posts published in this blog, here it is:
- [Triqui MochiAds Arcade plugin for WordPress official page](https://emanueleferonato.com/triqui-mochiads-arcade-plugin-for-wordpress-official-page/): Welcome to Triqui MochiAds Arcade plugin for WordPress official page This is the one and only official page for this plugin, so check it frequently! It works with Triqui MochiAds Arcade theme for WordPress and allows you to create an arcade site based on MochiAds games. CURRENT VERSION IS 1.3 RELEASED ON JANUARY 21, 2011 I suppose you know how to install and configure a WP plugin. So I will only focus on this plugins features. MOTIVATION This plugin is intended to turn your WP blog into a MochiAds arcade site that will allow you to earn money both with…
- [Triqui MochiAds Arcade theme for WordPress official page ](https://emanueleferonato.com/triqui-mochiads-arcade-theme-for-wordpress-official-page/): Welcome to Triqui MochiAds Arcade theme for WordPress official page This is the one and only official page for this theme, so check it frequently! See the theme in action Current version is 1.0 released on June 05, 2009 Before you start your journey into game publishing world, let me warn you: this is a theme for advanced users… I won’t explain how to install or edit a theme, and same thing for the plugins and widgets. If you are looking for a “how to” guide, this theme is not for you. However, if you want to make a complete…
- [Search results](https://emanueleferonato.com/search-results/)
- [Support this blog](https://emanueleferonato.com/support-this-blog/): If you like this blog, there are several ways to support it. 1) Submit your work If you made a flash game or whatsoever starting from the tutorials on this site, please submit it. Having your work/game published here will allow you to receive feedback and will help the blog, showing the community what people can do starting from my tutorials. 2) Write a tutorial If you consider yourself an expert in some web branch and want to write a tutorial to be published on this blog, you are welcome. You will help the blog having fresh posts during the…
- [My Works](https://emanueleferonato.com/my-works/): This section will be updated one day or another… Meanwhile think about I developed about 200 commercial web related projects in over six years, and I teach online programming. It’s not so easy to update my portfolio, so please be patient…
- [About](https://emanueleferonato.com/about/): I prefer my name to remain a mystery although the smartest of you may say if I would like not to reveal my name, I should buy a different domain name. Anyway, I was born in Venice, Italy, soooo long ago (January 14th, 1972) and I still live around there. My first computer was a Commodore Plus4 in early 80’s, then I moved to a C128, Amiga 2000 (with XT emulation board!), Amiga 1200 and in 1996 I moved to a PC. Very geekish steps, indeed. I always studied IT, at school, at the university and by myself. It’s sad…


[comment]: # (Generated by Hostinger Tools Plugin)