Ionic Space Shooter

80's arcade game build with Ionic Framework

Overview

This personal project is currently under development

Testing build Gaming Hybrid Application using HTML5 Canvas API + Ionic Framework with ngrx @store/effects to manage game state and Electron Framework to provide full multi platform application (iOS/Android platform + Web Browser platform + Desktop platform).

=> try browser demo

Prerequisites

• NVM - Download & Install Node Version Manage
• NodeJS 7 - Download & Install Node.js and the npm package manager with NVM $ nvm install node 7.
• Typescript Latest stable version install in Global $ npm install -g typescript
• Ionic 3 & Cordova - Latest stable version install in Global $ npm install -g ionic cordova
• Electron Latest stable version install in Global $ npm install electron -g
• Good knowledge of AngularFire2
• Good knowledge of Reactive Programming with ngRx and ngRx/store + ngRx/effects
• Redux DevTools Extension - Install Plugin for Chrome - Debugging application's state changes & provides power-ups for your Redux development workflow.
• And you should also have git installed to a better working flow.

Quick start

• run nvm & node with $ nvm use 7 & $ npm install
• add your own FB_CONFIG in a simple file to initialize your Firebase config into ./src/store/app-state.module.ts
• run app with $ ionic serve
• add platform with $ ionic cordova platform add ios||browser
• build platform with $ ionic cordova build ios||browser
• deploy browser platform with Firebase Hosting by runing $ firebase deploy
• build desktop version with $ npm run electron:build

Have todo

• add all action into static proprety: src/store/actions/mainActions.ts
• check if user is log.. and propose signin if not: src/pages/play/play.ts
• display confirmation score save: src/pages/play/play.ts
• save player setting, level & score: src/pages/play/play.ts
• remove static img load and use Store datas
• refactoring manageCollision.ts as an Angular Component
• refactoring detectCollision.ts as an Angular Component
• refactoring quadtree.ts as an Angular Component
• create/add app icon, splashscreen
• add electron.js
• add auto-updating with electron-builder

Have tofix

• Fix bug: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' on file ./src/models/explosion/explosion.ts
• Fix bug with ionic cache update not working. (PWA).. more...
• Fix bug with serviceWorker update not working. (PWA).. more...
• Fix bug with IOS. audio not playing.. : src/pages/play/play.ts
• $ ionic cordova build browser --prod currently not working

About author

Hi, i'm a Front-end developper living in Geneva Switzerland and i build hybrid mobile & web applications for almost 15 years. You can follow me on Twitter @FazioNico or checkout my own website http://nicolasfazio.ch