so://phie

blob: 5d84bc1980fd5b34049d75e0b06147b31a9ebd22 (3893 bytes)[doc][blame][raw]

  1<!DOCTYPE html>
  2<html lang="en" dir="ltr">
  3	<head>
  4		<meta charset="utf-8">
  5		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6		<meta name="author" content="typable">
  7		<meta name="keywords" content="">
  8		<meta name="description" content="">
  9		<meta name="robots" content="noindex, nofollow">
 10		<meta name="google" content="notranslate">
 11		<title>git.typable</title>
 12		<link href="/asset/favicon.png" rel="shortcut icon" type="image/png">
 13		<link href="/css/style.css" rel="stylesheet">
 14		<script src="/js/index.js" type="module"></script>
 15	</head>
 16	<body>
 17		<header class="container-fluid">
 18			<div class="row">
 19				<div class="container">
 20					<h1>git.typable</h1>
 21					<p>A place for commonly used code snippets.</p>
 22				</div>
 23			</div>
 24		</header>
 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>
 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() {
 53		super(900, 600);
 54		this.point = { x: 100, y: 100 };
 55	}
 56	update() {
 57		this.point.x += 1;
 58	}
 59	render(g) {
 60		super.render(); // screen clear
 61		const { x, y } = this.point;
 62		g.fillRect(x, y, 50, 50);
 63	}
 64}
 65
 66const game = new DinoGame();
 67document.body.append(game.canvas);
 68
 69game.start();</pre></code>
 70					</article>
 71					<article>
 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>
111						<code><pre>const canvas = document.createElement('canvas');
112scaleCanvas(canvas, 900, 600); // (width, height)
113document.body.append(canvas);</pre></code>
114				</div>
115			</div>
116		</main>
117		<footer class="container-fluid">
118			<div class="row">
119				<div class="container">
120					<span>&copy; typable 2021</span>
121					<a href="https://typable.dev/imprint">Imprint</a>
122					<a href="https://typable.dev/terms">Terms</a>
123				</div>
124			</div>
125		</footer>
126	</body>
127</html>