Game development | Page 7 | Emanuele Feronato

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.

Talking about Stairs game, 3D, Game development, HTML5, Javascript, Phaser and TypeScript.

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.

Talking about Stairs game, 3D, Game development, Godot Engine and HTML5.

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.

Talking about Stairs game, 3D, Game development, HTML5, Javascript, Phaser and TypeScript.

“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.

Talking about Bouncy Light game, 3D, Game development, HTML5, Javascript, Phaser and TypeScript.

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.

Talking about Stairs game, 3D, Game development, Godot Engine and HTML5.

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.

Talking about Block it game, Box2D, Game development, HTML5, Javascript, Phaser and TypeScript.

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.

Talking about Block it game, Box2D, Game development, HTML5, Javascript, Phaser and TypeScript.

How to handle a consuming energy bar, or measure the time a player is pressing a button, in your Phaser powered HTML5 games using TypeScript

Detailed tutorial with completely commented source code about handling an energy bar in your HTML5 games. Powered by Phaser, written in TypeScript.

Talking about Game development, HTML5, Javascript, Phaser and TypeScript.

HTML5 prototype of “Block it” using Box2D in an Arcade way, powered by Phaser and written in TypeScript – Turning walls on and off, introducing energy

“Block it” HTML5 prototype now features activable walls and an energy system. A good way to learn how to build physics games with Phaser and Box2D, coding in Typescript. Full commented source code available.

Talking about Block it game, Box2D, Game development, HTML5, Javascript, Phaser and TypeScript.

HTML5 prototype of “Block it” using Box2D in an Arcade way, powered by Phaser and written in TypeScript – Moving walls and using sprites to render compound objects

The HTML5 prototype of a “Block it” game continues, adding sprites to render the Box2D compound object, which now also rotates. Powered by Phaser and Planck, written in TypeScript. Full commented source code available.

Talking about Block it game, Box2D, Game development, HTML5, Javascript, Phaser and TypeScript.

HTML5 prototype of “Block it” using Box2D in an Arcade way, powered by Phaser and featuring compound objects and custom contact callback, written in TypeScript

Compound objects and contact callbacks are two of the more complicated features of Box2D. In this HTML5 example powered by Phaser and written in TypeScript, they are explained the easy way with a real world example, as usual. Commented source code available

Talking about Block it game, Box2D, Game development, HTML5, Javascript, Phaser and TypeScript.

“Block it” HTML5 now working with no physics engine, just using continuous collision detection between a moving circle and static lines. Powered by Phaser and written in TypeScript.

Here is a HTML5 “Block it” version powered by Phaser and written in TypeScript which does not use any physics engine and features rotating walls and continuous collision detection. Full source code available.

Talking about Block it game, Game development, HTML5, Javascript, Phaser and TypeScript.