A javascript "game engine"? Dunno... this how I do html5 canvas stuff
Example of initializing the Rocket Engine and setting up a few scenes:
// Initialize the Rocket engine with custom settings
const rocket = new Rocket({
// Set the main target element for rendering the game
targetElement: document.getElementById('my-container'),
// Define custom input bindings (e.g., for controls)
inputBindings: new MyInputBindings(),
});
// Optional: Register a custom application to handle more complex stuff
// Not necessary for simple animations, but you'll probably want it for games
rocket.service('application', new MyGameLogic());
// Define the 'world' stack and add multiple scenes. The scenes can represent
// different parts of the game, such as levels, menus, start and game over screens.
rocket.stack('world', (stack) => {
stack.addScene(new WorldScene1());
stack.addScene(new WorldScene2());
stack.addScene(new GameOverScene());
}, { width: 1920, height: 1080 }); // Set the canvas size
// You can define multiple stacks. Each stack will create a separate canvas element
rocket.stack('minimap', (stack) => {
stack.addScene(new MiniMap());
}, { width: 300, height: 300 }); // Set the canvas size
// Launch the Rocket engine, starting the game loop and rendering the first scene of each stack
rocket.launch();
// You can navigate between scenes using the scene manager and the stack name
rocket.sceneManager('world').next();
rocket.sceneManager('world').previous();Find more examples in the ./examples folder.
The demo focuses on controlling a spaceship in infinite space. There are two main control modes that can be switched by pressing the space bar:
- Realistic Physics: For long-distance travel with inertia dampers off.
- Arcade Mode: For close combat with inertia dampers on.
Additionally, there’s an energy management system. Various components (engine, weapons, inertia dampers) consume energy and need sufficient power to function. If components stop working or behave erratically, it's likely due to low energy. You’ll have to wait until the reactor recharges.
I haven’t finished implementing all components, and the demo is not optimized for portable devices. It requires at least a 1920x1080 display.
Beware: The controls behave differently depending on the selected control mode. Press the space bar. Also: If you can't fire or control the ship, check the energy levels!
- w, a, s, d: Move the ship.
- Space Bar: Toggle inertia dampers (control mode).
- 1, 2, 3, 4, 5, 6: Switch weapons.
- Mouse 1: Fire active weapon.
- Mouse 2 + drag: Select objects in space.
- Mouse Wheel: Zoom in/out.
You can destroy asteroids and space stations, but beyond that, there’s not much to do yet.
Check out the demo here.
This is a fun project that I work on when I have time and the weather is bad. I’m learning about game development and programming in plain JavaScript, with the main focus on structuring code for larger projects and discovering various techniques and patterns used in game development.
Rocket Engine uses a stack-based approach for managing game scenes. Each stack can hold multiple scenes, allowing for smooth transitions between different game states (e.g., menus, gameplay, game over).
Example:
rocket.stack('gameplay', (stack) => {
stack.addScene(new WorldScene1());
stack.addScene(new GameOverScene());
}, { width: 1920, height: 1080 });ECS allows for highly modular game objects, where behavior is defined through components. The EntityManager manages all entities and their components.
Example:
const player = new Player();
rocket.entityManager().addEntity(player, 'player');Built-in physics support for 2D and 3D games, including various levels of collision detection (bounding boxes, polygons, etc.).
Example:
import CollisionComponent from "./components/CollisionComponent.js";
const player = new Player();
player.addComponent(new CollisionComponent());
rocket.entityManager().addEntity(player);Render your game to multiple HTML elements using Canvas, WebGL, or DOM-based renderers.
Example:
rocket.stack('world', (stack) => {
stack.addScene(new WorldScene1());
}, { container: document.getElementById('game-world'), width: 1024, height: 768 });Efficiently manage animated characters and objects with SpriteSheetManager, which also supports collision shape generation.
Example:
rocket.spriteSheetManager().loadSpritesheet('player', 'player.png', 32, 32);The AudioManager loads and manages sounds, allowing easy playback, pausing, and looping of sound effects or background music.
Example:
rocket.audioManager().loadSound('explosion', 'explosion.mp3');
rocket.audioManager().playSound('explosion');Custom input bindings allow developers to map keyboard or mouse inputs to specific actions in-game.
Example:
class MyInputBindings extends rocket.InputBindings {
constructor() {
super();
this.bind('ArrowLeft', 'moveLeft');
this.bind('ArrowRight', 'moveRight');
}
}
rocket.registerInputBindings(new MyInputBindings());The AssetManager handles loading and managing images, sounds, and JSON data, with support for tracking progress during asset loading.
Example:
rocket.assetManager().loadImage('background', 'bg.png');The EventBus allows components to communicate by emitting and listening for events, making interactions between game systems easier.
Example:
rocket.eventBus().on('playerDied', () => {
console.log('Game Over');
});
rocket.eventBus().emit('playerDied');Built-in A* pathfinding algorithm helps navigate complex game environments using grid-based heuristic searching.
Example:
const path = rocket.pathfinding.search(startNode, endNode);
console.log('Path found:', path);Keep track of game performance with the built-in PerformanceMonitor, which can be toggled during development.
Example:
const rocket = new Rocket({ showPerformanceMonitor: true });Extend the engine’s functionality by adding custom services and plugins through the ServiceContainer.
Example:
rocket.service('customService', new MyCustomService());Schedule and execute timed actions using the TaskScheduler, ideal for animations, AI routines, or event-driven mechanics.
Example:
rocket.service('taskScheduler').schedule(() => {
console.log('Task executed!');
}, 500); // Executes after 500msCreate particle effects such as explosions, fire, or smoke using the ParticleSystem.
Example:
rocket.particleSystem().createEffect('explosion', x, y);Rocket Engine offers a broad set of tools for developing games of varying complexity. While it’s a personal project and not maintained professionally, it covers essential game development aspects such as physics, audio, rendering, and scene management.
For more details, check the API reference or explore the example projects.