so://phie

game-engine

A lightweight JavaScript game engine
git clone git://soophie.de/game-engine

• log
• tree
• refs
• README
• LICENSE

branch:main tag:v0.1

• index.html [new file] [old file]

  25		<main class="container-fluid">
  26			<div class="row">
  27				<div class="container">
  28					<h3>Overview</h3>
  29					<ul class="overview">
  30						<li>
  31							<a href="#game">Game</a>
  32						</li>
  33						<li>
  34							<a href="#group">Group</a>
  35						</li>
  36						<li>
  37							<a href="#surface">Surface</a>
  38						</li>
  39						<li>
  40							<a href="#rect">Rect</a>
  41						</li>
  42						<li>
  43							<a href="#scaleCanvas">scaleCanvas</a>
  44						</li>
  45					</ul>
  46					<article>
  29						<label>Game</label>
  47						<label><a name="game">Game</a></label>
  48						<pre>Game(width, height, { fps })</pre>
  49						<p>By extending the Game class you have access to a newly created canvas with game loop, which calls the update and render methods.</p>
  50						<code><pre>import { Game } from 'https://git.typable.dev/std/js/game.js';</pre></code>
  51						<code><pre>class DinoGame extends Game {
  52	constructor() {
  35		super(900, 600); // (width, height)
  53		super(900, 600);
  54		this.point = { x: 100, y: 100 };
  55	}
  56	update() {
  57		this.point.x += 1;
  58	}
  41	render() {
  59	render(g) {
  60		super.render(); // screen clear
  43		let { x, y } = this.point;
  44		this.g.fillRect(x, y, 50, 50);
  61		const { x, y } = this.point;
  62		g.fillRect(x, y, 50, 50);
  63	}
  64}
  65
  

  67document.body.append(game.canvas);
  68
  69game.start();</pre></code>
  52						<!--
  53						<h3>update</h3>
  54						<p>Method for update related purposes.</p>
  55						<h3>render</h3>
  56						<p>Method for render related purposes.</p>
  57						<h3>start</h3>
  58						<p>Starts the game loop.</p>
  59						-->
  70					</article>
  71					<article>
  62						<label>scaleCanvas</label>
  72						<label><a name="group">Group</a></label>
  73						<pre>Group()</pre>
  74						<p>Can be used to group specific elements for update and rendering purposes.</p>
  75						<code><pre>import { Group } from 'https://git.typable.dev/std/js/game.js';</pre></code>
  76						<code><pre>const group = new Group();
  77group.add(...);
  78
  79group.update();
  80group.render(g);</pre></code>
  81					</article>
  82					<article>
  83						<label><a name="surface">Surface</a></label>
  84						<pre>Surface(x, y, width, height)</pre>
  85						<p>Represents a rectangular surface with its own update and render method.</p>
  86						<code><pre>import { Surface } from 'https://git.typable.dev/std/js/game.js';</pre></code>
  87						<code><pre>class Player extends Surface {
  88	constructor(x, y) {
  89		super(x, y, 50, 50);
  90	}
  91	update() {
  92		this.rect.x += 1;
  93	}
  94	render(g) {
  95		const { x, y, width, height } = this.rect;
  96		g.fillRect(x, y, width, height);
  97	}
  98}</pre></code>
  99					</article>
  100					<article>
  101						<label><a name="rect">Rect</a></label>
  102						<pre>Rect(x, y, width, height)</pre>
  103						<p>Represents a rectangular hitbox.</p>
  104						<code><pre>import { Rect } from 'https://git.typable.dev/std/js/game.js';</pre></code>
  105					</article>
  106					<article>
  107						<label><a name="scaleCanvas">scaleCanvas</a></label>
  108						<pre>scaleCanvas(canvas, width, height)</pre>
  109						<p>Scales a canvas to the device related pixel ratio.</p>
  110						<code><pre>import { scaleCanvas } from 'https://git.typable.dev/std/js/canvas.js';</pre></code>
  

• less/style.less [new file] [old file]

  62main {
  63	margin-bottom: 100px;
  64
  65	h3 {
  66		color: #212121;
  67		font-size: 20px;
  68		margin-bottom: 15px;
  69	}
  70
  71	.overview {
  72		padding-left: 20px;
  73		margin-bottom: 50px;
  74
  75		li {
  76			margin-bottom: 5px;
  77
  78			a {
  79				color: #424242;
  80				font-size: 14px;
  81			}
  82		}
  83	}
  84
  85	article {
  86		border: 1px solid #CCC;
  87		border-radius: 4px;
  

• std/js/game.js [new file] [old file]

  14		requestAnimationFrame(this.loop.bind(this));
  15		this.update();
  16		this.g.save();
  17		this.render(),
  17		this.render(this.g),
  18		this.g.restore();
  19	}
  20	loop() {
  

  25			this.then = this.now - (this.elapsed % this.fps);
  26			this.update();
  27			this.g.save();
  28			this.render(),
  28			this.render(this.g),
  29			this.g.restore();
  30		}
  31	}
  

  36		this.g.clearRect(0, 0, this.width, this.height);
  37	}
  38}
  39
  40export class Group {
  41	constructor() {
  42		this.items = [];
  43	}
  44	update() {
  45		for(let item of this.items) {
  46			item.update();
  47		}
  48	}
  49	render(g) {
  50		for(let item of this.items) {
  51			g.save();
  52			item.render(g);
  53			g.restore();
  54		}
  55	}
  56	add(item) {
  57		this.items.push(item);
  58	}
  59	get() {
  60		return this.items;
  61	}
  62}
  63
  64export class Surface {
  65	constructor(x, y, width, height) {
  66		this.rect = new Rect(x, y, width, height);
  67	}
  68	update() {
  69		// empty
  70	}
  71	render() {
  72		// empty
  73	}
  74}
  75
  76export class Rect {
  77	constructor(x, y, width, height) {
  78		this.x = x;
  79		this.y = y;
  80		this.width = width;
  81		this.height = height;
  82	}
  83}
  83
  \ No newline at end of file