Initial commit

2024-08-03 13:05:18 +02:00
commit 3163a65b1a
32 changed files with 4650 additions and 0 deletions
--- a/src/test-collision.html
+++ b/src/test-collision.html
@@ -0,0 +1,67 @@
+<!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>
+    <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="term/wterminal-autoextend.js"></script>
+</body>
+
+</html>