Frontier is a 2D game that takes in space that serves as a tech demo for my core-js framework.
It is written in pure Javascript w/ Canvas rendering and no other frameworks.
It's fully playable at http://frontier.jgefroh.com.
This is not intended to be used in a commercial or production environment - it was just a fun hobby project I wrote.
- Movement
- W - Increase thrust
- S - Decrease thrust
- A - Turn left
- D - Turn right
- Weapons
- 1 - Fire Weapon Group 1
- 2 - Fire Weapon Group 2
- 3 - Fire Weapon Group 3
- Combat
- \ - Toggle tactical mode
- Tab - Next target
- ShiftTab - Previous target
- V - View target
- T - Focus target
- Camera
- Left arrow - Move viewport left
- Right arrow - Move viewport right
- Up arrow - Move viewport up
- Down arrow - Move viewport down
-
- Zoom in
-
- Zoom out
- Misc
- I - View inventory
Install packages
npm install
Development server (127.0.0.1:9000)
npx webpack serve
Production build (assets must be moved manually into dist folder.
NODE_ENV=production npx webpack build
Audio is merely an event that passes a message to play a specific sound starting at a specific time.
There are a variety of camera and viewport behaviors demonstrated including:
- User-controlled viewport, including zooming and panning
- "Follow mode" to center and visually track an entity
- "Focus mode" to keep two objects in view, adjusting pan and zoom as objects move.
- A secondary viewport that allows you to re-render using a different perspective and independent viewport configuration
A GUI system exists to render an arbitrary image, shape, or text at any particular canvas location, which can be requested by any system, allowing you to separate GUI components into individual systems.
- Arbitrary GUI element rendering, including images, text, and shape
- Automatic GUI click-handling, with appropriate events
- Dynamically defined and rendered table creation, great for list-based UIs
- On-hover style change behaviors
- Easy way to identify a target element and define an update to it (eg. text, position, visibility, color, etc.)
User inputs can be defined on a per-keystroke basis that translates them into particular action events other systems can subscribe to.
- Key-to-action mapping, including press, release, and hold.
- Support for modifier keys like
Shift.
As a space game, there are a variety of systems built.
AIs work with a goal-based system that lets you define a top-level goal and have the AI (theoretically) select what tactics and actions to use to approach that goal. Action are scored based on importance, and then the steps of that action are executed in sequence to complete the action.
Collision is 2d collision system allowing for rotated rectangle collision checks. Collidable entities are defined as with a collision group, informed by an entity's association to a nation for gameplay purposes.
The physics system supports inertial-based movement.
- Sustaind acceleration of an object via application of multiple force vectors
- Travel path prediction based on changes to acceleration, bearing, etc.
Weapons are in the firing system. Different weapons have different stats, but they are all basic, continuous fire with a firing cooldown between shots.
Relationships are defined in terms of Nations and Factions. These then inform whether they can be targeted by other nations, as well as the collision system.