git.typable

A place for commonly used code snippets.

Overview

Game(width, height, { fps })

By extending the Game class you have access to a newly created canvas with game loop, which calls the update and render methods.

import { Game } from 'https://git.typable.dev/std/js/game.js';
 
class DinoGame extends Game {
	constructor() {
		super(900, 600);
		this.point = { x: 100, y: 100 };
	}
	update() {
		this.point.x += 1;
	}
	render(g) {
		super.render(); // screen clear
		const { x, y } = this.point;
		g.fillRect(x, y, 50, 50);
	}
}

const game = new DinoGame();
document.body.append(game.canvas);

game.start();
 
Group()

Can be used to group specific elements for update and rendering purposes.

import { Group } from 'https://git.typable.dev/std/js/game.js';
 
const group = new Group();
group.add(...);

group.update();
group.render(g);
 
Surface(x, y, width, height)

Represents a rectangular surface with its own update and render method.

import { Surface } from 'https://git.typable.dev/std/js/game.js';
 
class Player extends Surface {
	constructor(x, y) {
		super(x, y, 50, 50);
	}
	update() {
		this.rect.x += 1;
	}
	render(g) {
		const { x, y, width, height } = this.rect;
		g.fillRect(x, y, width, height);
	}
}
 
Rect(x, y, width, height)

Represents a rectangular hitbox.

import { Rect } from 'https://git.typable.dev/std/js/game.js';
 
scaleCanvas(canvas, width, height)

Scales a canvas to the device related pixel ratio.

import { scaleCanvas } from 'https://git.typable.dev/std/js/canvas.js';
 
const canvas = document.createElement('canvas');
scaleCanvas(canvas, 900, 600); // (width, height)
document.body.append(canvas);