https://github.com/christianoellers/vector-storm

Abstract arcade style 2D space shooter, developed with JavaScript and Canvas. Architectural and creative experiment. Fully working game with enemies and scoring!
https://github.com/christianoellers/vector-storm

2d-game canvas canvas-2d canvas-2d-context canvas-animation canvas-api canvas-game canvas2d ecmascript es6 es6-javascript game game-development game-engine html5 html5-canvas javascript javascript-game vector vector-math

Last synced: 9 days ago
JSON representation

Abstract arcade style 2D space shooter, developed with JavaScript and Canvas. Architectural and creative experiment. Fully working game with enemies and scoring!

• Host: GitHub
• URL: https://github.com/christianoellers/vector-storm
• Owner: ChristianOellers
• License: mit
• Created: 2020-08-11T12:24:50.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-07-25T09:37:29.000Z (over 1 year ago)
• Last Synced: 2023-07-25T10:55:24.473Z (over 1 year ago)
• Topics: 2d-game, canvas, canvas-2d, canvas-2d-context, canvas-animation, canvas-api, canvas-game, canvas2d, ecmascript, es6, es6-javascript, game, game-development, game-engine, html5, html5-canvas, javascript, javascript-game, vector, vector-math
• Language: TypeScript
• Homepage: vector-storm.vercel.app
• Size: 711 KB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![Vector-Storm](teaser.png)](https://christianoellers.github.io/Vector-Storm)

# Vector Storm

2D Arcade space shooter

- [About](#about)

- [Examples](#examples)

- [Features](#features)

- [Limitations](#limitations)

- [How to use](#how-to-use)

- [Todo](#todo)




---

[![Quality Gate status](https://sonarcloud.io/api/project_badges/measure?project=ChristianOellers_Vector-Storm&metric=alert_status)](https://sonarcloud.io/dashboard?id=ChristianOellers_Vector-Storm)





## About

Classic arcade style space shooter with Canvas 2D, ES6 and HTML 5.

A 'Proof of concept' and technical experiment about game architecture and maths.

Over time the code got a bit messy and it's not intended to sustain ;)

### Compatibility

- Browser with Canvas 2D API support

- Desktop PC with min. 700px screen width

- Decent computing/ graphics power (can be resource intense)

- Mouse, keyboard, audio output





## Examples

Find the live version to play here:

- [Vercel »](https://vector-storm-27ctdpx5e.vercel.app)

- [GitHub »](https://christianoellers.github.io/Vector-Storm)





## Features

- Fully playable game with win/lose conditions

- Automatically shoot at stuff (just avoid being hit)

- Bounce into enemy ships rewards with extra score

- Extra speed boost + Fx





## Limitations

- Tested with Google Chrome, Desktop only

- Requires keyboard + Mouse to play

- Restart requires page reload

- Playing for longer durations might slow down the game. Projectiles are currently not removed from the scene and will drain performance over time.





## How to use

1. Open the 'index.html' in a browser like Google Chrome on any Desktop browser.

2. Read instructions how to play & enjoy!





## Todo

Fix

- Collision: Vector maths sometimes creates extreme values

Optimize

- Debounce hit testing to prevent fast accumulating scores

- Remove 'dead objects from scene (projectiles) OR implement an 'object pool'

- OOP

  - Decouple state, view, controls, score ...

  - Decouple constructors from initialization?

Performance

- HUD + Score should be rendered in HTML, not Canvas

- Use faster sin/cos calculations; e.g. lookup tables or polynomial approximation curves

New features

- Player should bounce off the boundaries (or slow down) and not be able to leave the field

- Reacting to score, player could get different weapons or conditional states over time

- Implement 'scene' concept to manage all objects (e.g. pause, show, hide) and switch between multiple scenes