Check out the live Application!
Star Wars Shooter mixes the physics and visuals of space invaders with the well-known audio/visuals from the Star Wars universe. The goal of the project is to provide a smooth and immersive star wars experience over the browser using just javascript and canvas.
- ES6 Javascript
- CreateJS, EaselJS, TweenJS for canvas rendering and enemy movement
- HTML5 Canvas for DOM Manipulation and rendering
- Webpack
-I use CreateJS to render my game. I do so by calling a new 'stage', which has access to the createjs library using our html canvas.
this.stage = new createjs.Stage(this.canvas);-I then add an eventListener to a ticker, which is the renderer that gets called 60 times a second. The event listener is used to apply my game's core functions/logic.
this.ticker = createjs.Ticker;
this.ticker.framerate = 60;
this.ticker.addEventListener('tick', () => {
tick();
}-My tick function will then apply my core game logic and constantly render all my essential objects, such as enemy ships, enemy bullets, healthbars, and scores.
tick() {
this.ship.shipEvents();
this.moveAllBullets();
this.displayScores();
this.movePowerUps();
this.fireEnemyBullets();
this.moveAllEnemyBullets();
this.moveAllEnemies();
this.updateHealthBar();
if(this.boss) {
this.updateBossHealthBar();
}
this.stage.update();
}Lightsaber element built with pure CSS3/HTML5 is correlated with the ship's health and lowers when the ship is hit!
Tie Fighters can shoot in an intricate spiral motion to incentivize more maneuvers from the player
- Press Enter to start / reset game
- Use arrow keys to navigate your ships
- Hold spacebar to shoot
- Press escape to pause
- Back end for high scores
- Multiple levels
- Different bullet styles from tie-fighters