so://phie

blob: 82360feae451055956ed3abbb37d392e69e4a69b (2531 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					<article>
29						<label>Game</label>
30						<pre>Game(width, height, { fps })</pre>
31						<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>
32						<code><pre>import { Game } from 'https://git.typable.dev/std/js/game.js';</pre></code>
33						<code><pre>class DinoGame extends Game {
34	constructor() {
35		super(900, 600); // (width, height)
36		this.point = { x: 100, y: 100 };
37	}
38	update() {
39		this.point.x += 1;
40	}
41	render() {
42		super.render(); // screen clear
43		let { x, y } = this.point;
44		this.g.fillRect(x, y, 50, 50);
45	}
46}
47
48const game = new DinoGame();
49document.body.append(game.canvas);
50
51game.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						-->
60					</article>
61					<article>
62						<label>scaleCanvas</label>
63						<pre>scaleCanvas(canvas, width, height)</pre>
64						<p>Scales a canvas to the device related pixel ratio.</p>
65						<code><pre>import { scaleCanvas } from 'https://git.typable.dev/std/js/canvas.js';</pre></code>
66						<code><pre>const canvas = document.createElement('canvas');
67scaleCanvas(canvas, 900, 600); // (width, height)
68document.body.append(canvas);</pre></code>
69				</div>
70			</div>
71		</main>
72		<footer class="container-fluid">
73			<div class="row">
74				<div class="container">
75					<span>&copy; typable 2021</span>
76					<a href="https://typable.dev/imprint">Imprint</a>
77					<a href="https://typable.dev/terms">Terms</a>
78				</div>
79			</div>
80		</footer>
81	</body>
82</html>