Libsteroids

Inspired by chriz001's Reacteroids and TodoMVC, Libsteroids goes beyond the DOM with popular JavaScript libraries.

Game Engine

A Libsteroids app can be built around the libsteroids-engine. The engine provides:

• Game entities that are a hybrid of classic Asteroids (including enemy flying saucers; demo) and chriz001's Reacteroids (including particle effects for explosions and ship thrust; demo)
• Game events which can be used to trigger sound effects

Examples

All examples below use Howler, Pixi.js and Three.js and demonstrate five different ways to render game entities: SVG, 2D canvas using drawing methods, 2D canvas using Pixi.js and 3D canvas using either Pixi.js or Three.js. Building is handled by Webpack 2, transpiling ES6+ is handled by Babel and transpiling cssnext is handled by PostCSS in each example. In the Angular 4 example, Webpack bundling of Typescript is handled by awesome-typescript-loader. Each example also demonstrates state management using either Redux, MobX or @ngrx/store. Each also demonstrates running the game engine in a web worker and implements the following features:

• Controls that are a hybrid of chriz001's Reacteroids (both WAD and arrow keys control ship) and classic Asteroids (shift to hyperspace)
• Ability to switch renderers anytime with 1-5 keys
• Like classic Asteroids, the saving of scores with user names and the ability to return to the high scores list from the main menu. Like chriz001's Reacteroids, the displaying of the current highest score during gameplay.
• Game sounds from classic Asteroids
• Proper handling of window resize events
• The ability to start/restart the game using only the enter key (no need to ever reach for a mouse once window is focused)

Note: Production builds for all examples (npm run build) currently using Babili for minification instead of Uglify, which doesn't support ES6 yet. Babili is quite a bit slower than Uglify, though, so be a bit patient when running a production build.

Angular 4 (with @ngrx/store)

Run the Angularoids example (demo):

git clone git@github.com:movecodemove/libsteroids.git

cd libsteroids/examples/angularoids
npm install
npm run serve

open http://localhost:3000/

The production build for this example also demonstrates Angular AOT compilation with the @ngtools/webpack AotPlugin.

React

Run the Reacteroids Redux example (demo):

git clone git@github.com:movecodemove/libsteroids.git

cd libsteroids/examples/reacteroids/redux
npm install
npm run serve

open http://localhost:3000/

Run the Reacteroids MobX example (demo):

git clone git@github.com:movecodemove/libsteroids.git

cd libsteroids/examples/reacteroids/mobx
npm install
npm run serve

open http://localhost:3000/

Inferno (with Redux)

Run the Infernoroids example (demo):

git clone git@github.com:movecodemove/libsteroids.git

cd libsteroids/examples/infernoroids
npm install
npm run serve

open http://localhost:3000/

Preact (with Redux)

Run the Preacteroids example (demo):

git clone git@github.com:movecodemove/libsteroids.git

cd libsteroids/examples/preacteroids
npm install
npm run serve

open http://localhost:3000/

TODO

• Touch/mobile device game controls
• Benchmarks