70 lines
2.4 KiB
HTML
70 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Test: Collision detection</title>
|
|
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
|
<link rel="stylesheet" href="css/game.css" />
|
|
<link rel="stylesheet" href="css/main.css" />
|
|
|
|
<script src="term/wterminal.js"></script>
|
|
<script src="js/test-collision-context2d.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<button title="Dark theme on/off" onclick="toggleTheme();">☀</button>
|
|
<a href="index.html">Willem Games</a>
|
|
</header>
|
|
|
|
<main>
|
|
<h1>Test: Collision detection</h1>
|
|
|
|
<div class="game-area" id="game-area">Loading ...</div>
|
|
|
|
<h2>How to:</h2>
|
|
<div style='margin-bottom: 0.5em;'>
|
|
<div style='display:inline-block;'>
|
|
<p> W,S,A,D or arrow-keys for moving around<br>
|
|
space to toggle play/pause<br>
|
|
's' to switch Shape<br>
|
|
'r' to reset Simulation<br></p>
|
|
</div>
|
|
<div
|
|
style='display:inline-block; margin-left: 1em; border-left: 1px solid grey; padding-left: 1em; vertical-align:top;'>
|
|
<p> 'c' to switch consistency<br>
|
|
'b' to switch bounce<br>
|
|
'g' to switch gravity<br></p>
|
|
</div>
|
|
</div>
|
|
<p> Clicking will log in console if you clicked on something, or multipe things.<br></p>
|
|
|
|
<h2>About:</h2>
|
|
<p>To test collision there are 2 groups:<br>
|
|
- primary group of Actor(s), a moving type with a shape, controllable.<br>
|
|
- secondary group of Solids, a static/wall/never moves type with a shape.<br>
|
|
Shapes can be points, circles, lines, rectangles, ...(triangles and others optional).<br>
|
|
The simulation has options like gravity, fricion/consistency, borderBouncing and shape shifting.<br></p>
|
|
<h2>Todo:</h2>
|
|
<ol>
|
|
<li>Primary goal: Actor should detect collision with Solids; (multiple types of actors and solids)</li>
|
|
<li>As an extention goal: Actors should also detect collision with other Actors;</li>
|
|
<li>As an extention goal: Solids should also detect collision with other Solids;</li>
|
|
</ol>
|
|
|
|
<script>
|
|
startCollisionDetection('game-area', 480, 320, 1); // startGame(element-id, width, height, zoom)
|
|
WTerminal.instalDropdownTerminal();
|
|
</script>
|
|
</main>
|
|
|
|
<footer>
|
|
<p class="float-right">Author: Ward Truyen</p>
|
|
</footer>
|
|
|
|
<script src="js/theme.js"></script>
|
|
<script src="term/wterminal-autoextend.js"></script>
|
|
</body>
|
|
|
|
</html>
|