Emanuele Feronato

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

Here we go with a big update to HTML5 Watermelon Game prototype powered by Phaser and Box2D.

On Gumroad page now you can find a big update with square and pentagon shapes.

---

All posts in this tutorial series:

Step 1: setup and basic game mechanics.

Step 2: delays and explosions.

Step 3: particle effects and more space for customization.

Step 4: how to handle user input.

Step 5: scrolling background, “next” icon and game over condition.

Step 6: saving best score with local storage and using object pooling to save resources.

Step 7: square and pentagon bodies added. Get the full source code on Gumroad.

---

Look at the game in action:

Play the game and get the full commented source code for as low as $5 on Gumroad, but be quick because more updates are along their way and price will increase.

From the experience of more than 500 tutorials about Phaser framework, here is a complete Watermelon game which will make you learn game development using Phaser and TypeScript.

Studying and playing with this source code will allow you to learn on a real-world working example, covering, among other things, how to:

– Install a webpack Phaser project with all dependencies.
– Create a Phaser project.
– Preload graphics, sounds and all needed assets.
– Use bitmap fonts.
– Place and move sprites on the screen.
– Wait for player input and handle it.
– Create animations using tweens.
– Play sounds.
– Recycle resources to save memory using object pooling.
– Use particles to generate explosion effects.
– Handle and save high scores and game data.
– Use Box2D physics library.
– Simulate a physics world.
– Create physics circles.
– Create physics boxes.
– Create physics pentagons.
– Detect collisions.
– Render a Box2D world using Phaser sprites.

Learn HTML5 game development by studying on a real world example on Gumroad.