https://github.com/t-specht/simulator
https://github.com/t-specht/simulator
Last synced: about 8 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/t-specht/simulator
- Owner: T-Specht
- Created: 2016-12-28T12:23:23.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-05T11:20:27.000Z (over 8 years ago)
- Last Synced: 2025-05-17T09:51:17.764Z (about 1 month ago)
- Language: TypeScript
- Size: 1.63 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simulator
A modern game and simulation library for the HTML Canvas element targeted for the use with ES6, TypeScript or Babel.
## Getting Started
This library uses the modern ES6 class syntax, so before getting started you should learn to use tools like TypeScript or Babel to compile ES6 to ES5 or below.
You also should use tools like browserify or WebPack to bundle the library to use it in the browser.
If you want to learn more about the library, please have a look at the [documentation](https://github.com/T-Specht/Simulator/blob/master/docs/overview.md "documentation").
## Installation
`$ npm i --save canvas-simulator`
## Creating the World
Everything that happens during the simulation or game is contained in a **World** which is created by creating a subclass which inherits from the `World` class. Our example world will be named `NightSky`.
```javascript
// Import the World class from the library
import {World} from 'canvas-simulator';
// Create a new subclass
class NightSky extends World{
// The constructor needs to be passed the Canvas 2D rendering context
constructor(ctx){
// Initiate the super class by passing the rendering context (you can forget about it now 🎉) and width and height of the canvas (optional)
super(ctx, 400, 300);
// Set background color
super.setBackgroundColor('black');
}
}
// Create a new new instance of the class
// Get context
let ctx = document.getElementById('canvas').getContext('2d');
//Initiate class
let sky = new NightSky(ctx);
```
## Adding Life to the World
Now that the `NightSky` world is ready to use, we can add objects to it which are also instances of classes but which this time inherit from the `Actor` class of the library.
Here we create a subclass of the `Actor` class with the name of `Bird`.
```javascript
// Import the Actor class from the library
import {Actor} from 'canvas-simulator';
class Bird extends Actor{
constructor(){
// Initiate the super class
super();
// Setup image
this.setupImage();
}
private setupImage(){
// Set image
let url = 'https://api.tim-specht.com/data/simulator/tutorial/bird.png';
super.setImageSrc(url);
}
}
```
To add a bird to the `NightSky` world, you have to call the `addToWorld` method as follows in the `NightSky` class.
```javascript
import {World} from 'canvas-simulator';
class NightSky extends World{
constructor(ctx){
super(ctx, 400, 300);
super.setBackgroundColor('black');
// Initiate new instance of Bird
let bird = new Bird();
// Add bird to world
// super.addToWorld(, , )
super.addToWorld(bird, 50, 50);
}
}
```
The whole script, after combining the imports properly, would look something like this, right now:
```javascript
import {Actor, World} from 'canvas-simulator';
// Bird class
class Bird extends Actor{
constructor(){
super();
this.setupImage();
}
private setupImage(){
let url = 'https://api.tim-specht.com/data/simulator/tutorial/bird.png';
super.setImageSrc(url);
}
}
// NightSky class
class NightSky extends World{
constructor(ctx){
super(ctx, 400, 300);
super.setBackgroundColor('black');
let bird = new Bird();
super.addToWorld(bird, 50, 50);
}
}
// Initiate NightSky
let ctx = document.getElementById('canvas').getContext('2d');
let sky = new NightSky(ctx);
```
## Animating!
To make the bird move, each `Actor` subclass can implement a method which is called `animate` (must be `public`).
We can make our bird fly over the screen like this:
```javascript
class Bird extends Actor{
constructor(){
super();
this.setupImage();
}
public animate(){
super.setX(super.getX() + 1);
}
private setupImage(){
let url = 'https://api.tim-specht.com/data/simulator/tutorial/bird.png';
super.setImageSrc(url);
}
}
```
Now the bird moves quite slowly to the right of the screen.
## Wrapping Up
Now that we have the code for our first World complete, we need to bundle it properly to use it in the browser.
You can use tools like _browserify_ or _WebPack_ to do so.
If you want to learn more about the library, please checkout the [documentation](https://github.com/T-Specht/Simulator/blob/master/docs/overview.md "documentation").