so://phie

blob: 40079fa80877e342a8da7702ded1b508fe1c0449 (7189 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/img/favicon.png" rel="shortcut icon" type="image/png">
 13		<link href="/asset/css/style.css" rel="stylesheet">
 14		<script src="/asset/js/index.js" type="module"></script>
 15	</head>
 16	<body>
 17		<main class="container-fluid">
 18			<div class="row">
 19				<div class="container">
 20					<aside>
 21						<h4 data-rel="top">Game Engine</h4>
 22						<ul>
 23							<li data-rel="introduction">Introduction</li>
 24							<li data-rel="getting-started">Getting Started</li>
 25							<li data-rel="rendering">Rendering</li>
 26							<li data-rel="collision">Collision</li>
 27							<li data-rel="event-handling">Event Handling</li>
 28						</ul>
 29					</aside>
 30					<ul class="breadcrumb">
 31						<li><a href="/">Home</a></li>
 32						<li>Game Engine</li>
 33					</ul>
 34					<h1>Game Engine</h1>
 35					<p class="subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 36					<h2 data-ref="introduction">Introduction</h2>
 37					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
 38					<div class="space-2"></div>
 39					<p><a href="/game-engine/api">API</a></p>
 40					<div class="embed">
 41						<iframe src="/asset/data/embed.html" frameborder="0"></iframe>
 42						<p>Source: <a href="https://jsitor.com/NooIssgCT">"Universe" - typable</a></p>
 43					</div>
 44					<h2 data-ref="getting-started">Getting Started</h2>
 45					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 46					<code><pre><span class="c">import</span> { <span class="n ref">Game</span> } <span class="c">from</span> <span class="s">'<span class="ref ref-link">https://git.typable.dev/std/js/game.js</span>'</span>;
 47
 48<span class="c">class</span> <span class="n">Sandbox</span> <span class="c">extends</span> <span class="n ref">Game</span> {
 49	<span class="p">constructor</span>() {
 50		<span class="c">super</span>(<span class="n">900</span>, <span class="n">600</span>);
 51	}
 52}
 53
 54<span class="c">const</span> <span class="n">game</span> = <span class="c">new</span> <span class="n">Sandbox</span>();
 55<span class="n">document</span>.<span class="n">body</span>.<span class="p">append</span>(<span class="n">game</span>.<span class="n ref">canvas</span>);
 56<span class="n">game</span>.<span class="p ref">start</span>();</pre></code>
 57				<h2 data-ref="rendering">Rendering</h2>
 58				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 59					<code><pre><span class="c">import</span> { <span class="n ref">Surface</span>, <span class="n ref">Shape</span> } <span class="c">from</span> <span class="s">'<span class="ref ref-link">https://git.typable.dev/std/js/game.js</span>'</span>;
 60
 61<span class="c">class</span> <span class="n">Player</span> <span class="c">extends</span> <span class="n ref">Surface</span> {
 62	<span class="p">constructor</span>(<span class="n">x</span>, <span class="n">y</span>) {
 63		<span class="c">super</span>(<span class="n">x</span>, <span class="n">y</span>, <span class="c">new</span> <span class="n ref">Shape</span>.<span class="n ref">Circle</span>(<span class="n">50</span>));
 64	}
 65	<span class="p">render</span>(<span class="n">g</span>) {
 66		<span class="c">const</span> { <span class="n">x</span>, <span class="n">y</span>, <span class="n">shape</span>: { <span class="n">radius</span> } } = <span class="c">this</span>;
 67		<span class="n">g</span>.<span class="p">beginPath</span>();
 68		<span class="n">g</span>.<span class="p">arc</span>(<span class="n">x</span>, <span class="n">y</span>, <span class="n">radius</span>, <span class="n">2</span> * <span class="n">Math</span>.<span class="c">PI</span>, <span class="n">0</span>);
 69		<span class="n">g</span>.<span class="p">stroke</span>();
 70	}
 71}</pre></code>
 72					<code><pre><span class="p">render</span>(<span class="n">g</span>) {
 73	<span class="c ref">super</span>.<span class="p">render</span>(<span class="n">g</span>);
 74	<span class="n">player</span>.<span class="p ref">render</span>(<span class="n">g</span>);
 75}</pre></code>
 76					<h2 data-ref="collision">Collision</h2>
 77					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 78					<code><pre><span class="c">import</span> { <span class="n ref">Group</span> } <span class="c">from</span> <span class="s">'<span class="ref ref-link">https://git.typable.dev/std/js/game.js</span>'</span>;
 79
 80<span class="c">const</span> <span class="n">group</span> = <span class="c">new</span> <span class="n ref">Group</span>();
 81<span class="n">group</span>.<span class="p ref">add</span>(...);</pre></code>
 82					<code><pre><span class="p">update</span>() {
 83	<span class="n">group</span>.<span class="p ref">collide</span>();
 84	<span class="n">group</span>.<span class="p ref">update</span>();
 85}</pre></code>
 86					<code><pre><span class="p">update</span>() {
 87	<span class="c">const</span> { <span class="n ref">collided</span>, <span class="n ref">items</span> } = <span class="c ref">this</span>;
 88	<span class="c">if</span>(<span class="n">collided</span>) {
 89		<span class="x">// handle collision</span>
 90	}
 91}</pre></code>
 92					<h2 data-ref="event-handling">Event Handling</h2>
 93					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 94					<code><pre><span class="c">this</span>.<span class="p ref">bindEvent</span>(<span class="c">this</span>.<span class="n">canvas</span>, <span class="s">'onclick'</span>);</pre></code>
 95					<code><pre><span class="p ref">populateEvent</span>(<span class="n">event</span>) {
 96	<span class="x">// populate properties</span>
 97	<span class="c">return</span> <span class="n">event</span>;
 98}</pre></code>
 99					<code><pre><span class="c">const</span> { <span class="n ref">click</span> } = <span class="c">this</span>.<span class="n ref">events</span>;
100
101<span class="c">if</span>(<span class="n">click</span>) {
102	<span class="x">// handle click</span>
103}</pre></code>
104				</div>
105			</div>
106		</main>
107		<footer class="container-fluid">
108			<div class="row">
109				<div class="container">
110					<p>&copy; typable 2021</p>
111					<a href="https://www.buymeacoffee.com/typable">Donate</a>
112					<a href="https://typable.dev/imprint">Imprint</a>
113					<a href="https://typable.dev/terms">Terms</a>
114				</div>
115			</div>
116		</footer>
117	</body>
118</html>