kontra
Version:
Kontra HTML5 game development library
113 lines (98 loc) • 6.4 kB
HTML
<html lang="en">
<head>
<title>Kontra.js – What is Kontra.js?</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="https://straker.github.io/kontra/">
<script>
// adjust path based on location (github pages required kontra url)
if (window.location.host.indexOf('localhost') !== -1) {
let base = document.querySelector('base');
base.setAttribute('href', '/');
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.min.css">
<link rel="stylesheet" href="assets/styles.css">
<script src="assets/js/kontra.js"></script>
</head>
<body>
<div class="content">
<header class="main-nav">
<div id="kontra-heading" class="nav-heading">Kontra</div>
<a href="#main">Skip navigation</a>
<nav>
<button class="menu-button" aria-expanded="false" aria-controls="menu"><span aria-hidden="true">☰</span> Menu</button>
<!-- add role=list back to list so screen readers still read it as list when
css list-style: none is set
@see https://web-a11y.slack.com/archives/C042TSFGN/p1501699529181172 -->
<ul id="menu" role="list">
<li><a href="." aria-current="page">Introduction</a></li>
<li><a href="getting-started" >Getting Started</a></li>
<li><a href="download" >Download</a></li>
<li><a href="tutorials" >Tutorials</a></li>
<li><a href="made-with-kontra" >Made With Kontra</a></li>
<li>
<span id="api" class="nav-api-heading">API</span>
<ul aria-labelledby="api">
<li><a href="api/animation" >Animation</a></li>
<li><a href="api/assets" >Assets</a></li>
<li><a href="api/core" >Core</a></li>
<li><a href="api/events" >Events</a></li>
<li><a href="api/gameLoop" >GameLoop</a></li>
<li><a href="api/keyboard" >Keyboard</a></li>
<li><a href="api/plugin" >Plugin</a></li>
<li><a href="api/pointer" >Pointer</a></li>
<li><a href="api/pool" >Pool</a></li>
<li><a href="api/quadtree" >Quadtree</a></li>
<li><a href="api/sprite" >Sprite</a></li>
<li><a href="api/spriteSheet" >SpriteSheet</a></li>
<li><a href="api/store" >Store</a></li>
<li><a href="api/tileEngine" >TileEngine</a></li>
<li><a href="api/vector" >Vector</a></li>
</ul>
</li>
</ul>
</nav>
<div class="scroll-indicator" aria-hidden="true"><span>^</span></div>
</header>
<main id="main">
<div>
<a href="https://github.com/straker/kontra" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<h1>What is Kontra.js? </h1>
<p>Kontra is a lightweight JavaScript gaming micro-library created specifically for the <a href="http://js13kgames.com/">Js13kGames</a> game jam.</p>
<p><canvas width="600" height="225" id="snake-game" tabindex="0"></canvas></p>
<script src="assets/js/snake.js"></script>
<p>The goal of Kontra is not to implement everything you could possibly need to make a game. There are already libraries out there that do that (like <a href="http://phaser.io/">Phaser</a>).</p>
<p>Instead, Kontra aims to implement basic game requirements like asset loading, input, the game loop, and spites to keep the library very small and focused. This allows it to be used when your game size is limited (a la Js13k).</p>
<p>Kontra does provide some more advance data structures like object pools and quadtrees that have been fine tuned to be small, fast, and memory efficient.</p>
<p>Kontra prides itself in being:</p>
<ul>
<li><strong>Lightweight</strong>: 14.4 kB minified (5.21 kB gzipped) for the entire library.</li>
<li><strong>Modular</strong>: pick and choose what you want through ES modules. No inter-dependencies.</li>
<li><strong>Extensible</strong>: everything is customizable and can be extended.</li>
<li><strong>Fast</strong>: all logic has been removed from the update and render cycles.</li>
<li><strong>Memory conscious</strong>: takes up as little memory as needed and tries not to be wasteful about the memory it does take up.</li>
</ul>
<h2 id="use-it-when">Use it When</h2>
<ul>
<li>You want to get something up and running fairly quickly.</li>
<li>You want a basic structure that is easy to scale and extend.</li>
<li>In conjunction with other libraries (like <a href="http://playgroundjs.com/">Playground.js</a>).</li>
<li>Prototyping.</li>
<li>Game jams.</li>
</ul>
<h2 id="ready-to-get-going">Ready to Get Going?</h2>
<ul>
<li>Read the <a href="getting-started">getting started guide</a> and some <a href="tutorials">tutorials</a>.</li>
<li>Look at <a href="made-with-kontra">games made with Kontra</a>.</li>
<li>Gain in-depth knowledge from the API docs.</li>
</ul>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-javascript.min.js"></script>
<script src="assets/js/navbar.js"></script>
<script src="assets/js/exampleTabList.js"></script>
</body>
</html>