Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oguzhanumutlu/javascript2d
Easy and cool game engine made with JavaScript!
https://github.com/oguzhanumutlu/javascript2d
2d canvas engine game javascript js rendering web
Last synced: 2 months ago
JSON representation
Easy and cool game engine made with JavaScript!
- Host: GitHub
- URL: https://github.com/oguzhanumutlu/javascript2d
- Owner: OguzhanUmutlu
- License: mit
- Created: 2021-10-03T00:27:02.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-28T22:18:56.000Z (over 1 year ago)
- Last Synced: 2023-05-28T23:20:55.913Z (over 1 year ago)
- Topics: 2d, canvas, engine, game, javascript, js, rendering, web
- Language: HTML
- Homepage:
- Size: 170 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JavaScript2D
Easy and cool game engine made with JavaScript!
[](https://discord.gg/emAhrw3mvM)
# NPM
# You can visit Wiki for any information!
[Click to visit Wiki](https://github.com/OguzhanUmutlu/JavaScript2D/wiki)
# Setup & Installation
## Injecting into HTML
```html
```
*****
## Injecting into Node.JS
- Install [`2d-canvas-game`](https://www.npmjs.com/package/2d-canvas-game) as dependency first!
```js
const {Vector2, ImageModel, SquareModel, TextModel, EntityData, Entity, Scene} = require("canvas-game-2d");
```
*****
- You can install it to your IDE by holding your mouse on it and clicking `Download library`
# Creating scene
## Creating canvas tag
```html
```
*****
## Creating scene in pure.js
```html
const canvas = document.getElementById("canvas");
const scene = new Scene(canvas);
```
*****
## Creating scene in node.js
```js
const { createCanvas } = require("canvas");
const canvas = createCanvas(500, 500);
const scene = new Scene(canvas);
```
# Simple Player Example
## Creating player
```js
const player = new Entity(
new EntityData()
.setX(0) // spawn position of player
.setY(0)
.setModel(new SquareModel(20, 20)) // width, height
);
```
## Registering player to scene
```js
scene.addEntity(player);
```
## Storing keys they are held
```js
const heldKeys = {};
addEventListener("keydown", key => {
heldKeys[key.key] = true;
});
addEventListener("keyup", key => {
delete heldKeys[key.key];
});
```
## Moving player
```js
setInterval(() => {
let dx = 0;
let dy = 0;
if (heldKeys["w"]) dy--;
if (heldKeys["a"]) dx--;
if (heldKeys["s"]) dy++;
if (heldKeys["d"]) dx++;
player.x += dx;
player.y += dy; // simply change player's position
});
```
## To prevent going outside from canvas
```js
setInterval(() => {
let dx = 0;
let dy = 0;
if (heldKeys["w"]) dy--;
if (heldKeys["a"]) dx--;
if (heldKeys["s"]) dy++;
if (heldKeys["d"]) dx++;
player.x += dx;
player.y += dy;
player.preventBorder(scene);
});
```
# Adding obstacles
## Creating class for obstacles
```js
class Obstacle extends Entity {
}
```
## Adding obstacle
```js
scene.addEntity(new Obstacle(
new EntityData()
.setX(50)
.setY(50)
.setModel(new SquareModel(20, 20))
));
```
## Preventing player to move in it
```js
setInterval(() => {
let dx = 0;
let dy = 0;
if (heldKeys["w"]) dy--;
if (heldKeys["a"]) dx--;
if (heldKeys["s"]) dy++;
if (heldKeys["d"]) dx++;
player.x += dx;
if (player.getCollidingEntities(scene, [Obstacle]).length > 0) player.x -= dx;
player.y += dy;
if (player.getCollidingEntities(scene, [Obstacle]).length > 0) player.y -= dy;
player.preventBorder(scene);
});
```
# Adding texts
## Creating text
```js
const text = new Entity(
new EntityData()
.setX(30)
.setY(30)
.setModel(
new TextModel(10, 10) // width, height
.setText("Hello World!") // text of model
.setFont("Impact") // font of text
.setColor("rgba(0, 255, 0, 0.5)") // color of text
.setPixels(16) // size of the text
.setMaxWidth(100) // maximum size of the text
)
);
```
## Adding text as entity
```js
scene.addEntity(text);
```
## Changing content of the text entity
```js
text.model.setText("Bye World!");
```