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
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)
git clone email@example.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.
git clone firstname.lastname@example.org:movecodemove/libsteroids.git cd libsteroids/examples/reacteroids/redux npm install npm run serve open http://localhost:3000/
git clone email@example.com:movecodemove/libsteroids.git cd libsteroids/examples/reacteroids/mobx npm install npm run serve open http://localhost:3000/
Inferno (with Redux)
git clone firstname.lastname@example.org:movecodemove/libsteroids.git cd libsteroids/examples/infernoroids npm install npm run serve open http://localhost:3000/
Preact (with Redux)
git clone email@example.com:movecodemove/libsteroids.git cd libsteroids/examples/preacteroids npm install npm run serve open http://localhost:3000/
- Touch/mobile device game controls