Compare and contrast 2 different ways to create the same mechanics
This repository contains 3 game mechanic examples using Phaser 3 and Kaboom.js.
- space shooting
- exploding block
- A* pathfinding
Each example has a Phaser 3 version and a Kaboom.js version as a means to compare and contrast a class-based paradigm against a functional, component-based paradigm.
Check out a video going over the code on YouTube!
Clone this repository with git, install dependencies, and then each example has a separate run command.
First install dependencies:
npm install
Then for each example run one of the following at a time:
npm run start:space # for the space example
npm run start:blocks # for the blocks example
npm run start:astar # for the astar example
Go to http://localhost:3000 to see the example with a side-by-side comparison.
If the running example doesn't appear to change then try running the clean script and try again:
npm run clean
You can also try a hard reload by holding shift and then pressing the refresh button just in case things are cached by the browser.
Check out the Phaser 3 website and the Kaboom.js website for more on each library.
For more tutorials on making games with Phaser 3 or Kaboom.js, check out these Ourcade resources:
- Getting Started with Phaser 3.50+
- Making Your First Phaser 3 Game with TypeScript
- 5 Tips for Getting Started with Kaboom.js
- Snake Game with Kaboom.js
Check out the Ourcade channel page for even more including ECS in Phaser 3, custom components in Kaboom.js, and multiplayer games with Colyseus. Be sure to subscribe!
Check out the full blog for more including a pair of free ebooks!
The game art from this example was provided by Kenney.nl and ansimuz.