-
-
Notifications
You must be signed in to change notification settings - Fork 97
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
37 changed files
with
712 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,212 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<title>Kontra.js – Collision</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="." >Introduction</a></li> | ||
<li><a href="getting-started" >Getting Started</a></li> | ||
<li><a href="download" >Download</a></li> | ||
<li><a href="custom-builds" >Custom Builds</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/collision" aria-current="page">Collision</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>Collision </h1> | ||
|
||
<p>A collection of collision detection functions.</p> | ||
|
||
|
||
<section class="toc"> | ||
<h2 id="toc"><a href="#toc" class="section-link">Table of Contents<span aria-hidden="true">#</span></a></h2> | ||
|
||
<ul aria-labelledby="toc"> | ||
|
||
|
||
<li> | ||
<h3 id="methods">Methods</h3> | ||
<ul aria-labelledby="methods"> | ||
<li> | ||
<a href="api/collision#collides"> | ||
<span>collides(​object, object)</span> | ||
</a> | ||
</li> | ||
</ul> | ||
</li> | ||
</ul> | ||
</section> | ||
|
||
|
||
<section> | ||
<h2 id="collides"> | ||
<a href="api/collision#collides" class="section-link"> | ||
<span>collides(​object, object)</span> | ||
<span aria-hidden="true">#</span> | ||
</a> | ||
</h2> | ||
|
||
<p>Check if a two objects collide. Uses a simple <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#Axis-Aligned_Bounding_Box">Axis-Aligned Bounding Box (AABB) collision check</a>. Takes into account the sprites <a href="api/sprite/#anchor">anchor</a>.</p> | ||
<p><strong>NOTE:</strong> Does not take into account object rotation. If you need collision detection between rotated objects you will need to implement your own <code>collides()</code> function. I suggest looking at the Separate Axis Theorem.</p> | ||
<div class="tablist"> | ||
<ul role="tablist"> | ||
<li role="presentation" data-tab="global"> | ||
<button role="tab" id="collides-global-tab">Global Object</button> | ||
</li> | ||
<li role="presentation" data-tab="es"> | ||
<button role="tab" id="collides-es-tab">ES Module Import</button> | ||
</li> | ||
<li role="presentation" data-tab="bundle"> | ||
<button role="tab" id="collides-bundle-tab">Module Bundler</button> | ||
</li> | ||
<li role="presentation"></li> | ||
</ul> | ||
<section role="tabpanel" aria-labelledby=collides-global-tab data-tabpanel="global"><pre><code class="language-js">let { Sprite, collides } = kontra; | ||
|
||
let sprite = Sprite({ | ||
x: 100, | ||
y: 200, | ||
width: 20, | ||
height: 40 | ||
}); | ||
|
||
let sprite2 = Sprite({ | ||
x: 150, | ||
y: 200, | ||
width: 20, | ||
height: 20 | ||
}); | ||
|
||
collides(sprite, sprite2); //=> false | ||
|
||
sprite2.x = 115; | ||
|
||
collides(sprite, sprite2); //=> true</code></pre></section> | ||
<section role="tabpanel" aria-labelledby=collides-es-tab data-tabpanel="es"><pre><code class="language-js">import { Sprite, collides } from 'path/to/kontra.mjs'; | ||
|
||
let sprite = Sprite({ | ||
x: 100, | ||
y: 200, | ||
width: 20, | ||
height: 40 | ||
}); | ||
|
||
let sprite2 = Sprite({ | ||
x: 150, | ||
y: 200, | ||
width: 20, | ||
height: 20 | ||
}); | ||
|
||
collides(sprite, sprite2); //=> false | ||
|
||
sprite2.x = 115; | ||
|
||
collides(sprite, sprite2); //=> true</code></pre></section> | ||
<section role="tabpanel" aria-labelledby=collides-bundle-tab data-tabpanel="bundle"><pre><code class="language-js">import { Sprite, collides } from 'kontra'; | ||
|
||
let sprite = Sprite({ | ||
x: 100, | ||
y: 200, | ||
width: 20, | ||
height: 40 | ||
}); | ||
|
||
let sprite2 = Sprite({ | ||
x: 150, | ||
y: 200, | ||
width: 20, | ||
height: 20 | ||
}); | ||
|
||
collides(sprite, sprite2); //=> false | ||
|
||
sprite2.x = 115; | ||
|
||
collides(sprite, sprite2); //=> true</code></pre></section> | ||
</div> | ||
<h3 id="title-collides"><span class="visually-hidden">collides</span> Parameters</span></h3> | ||
<dl aria-labelledby="title-collides"> | ||
<dt> | ||
<code>object</code> | ||
|
||
</dt> | ||
<dd><p>Sprite. Object reference.</p> | ||
</dd> | ||
<dt> | ||
<code>object</code> | ||
|
||
</dt> | ||
<dd><p>Object. Object to check collision against.</p> | ||
</dd> | ||
</dl> | ||
|
||
<h3><span class="visually-hidden">collides</span> Return value</h3> | ||
<p><p><code>true</code> if the objects collide, <code>false</code> otherwise. Will return <code>null</code> if the either of the two objects are rotated.</p> | ||
</p> | ||
</section> | ||
|
||
</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.