cool colisions

app.c

@@ -8,6 +8,7 @@
 
 #define EPSILON 0.000001f
 #define GRAVITY 9
+#define AIR_RESISTANCE 5
 
 const unsigned int width = 800;
 const unsigned int height = 600;
@@ -64,6 +65,8 @@ typedef enum Key {
     ARROW_RIGHT = 39,
     ARROW_UP = 38,
     ARROW_DOWN = 40,
+    D = 68,
+    Q = 81,
     KEY_COUNT,
 } Key;
 
@@ -81,6 +84,63 @@ void key_released(int key)
     keys[key] = 0;
 }
 
+typedef struct Collision {
+    int x, y, width, height;
+} Collision;
+
+#define NB_COLLISIONS 10
+Collision collisions[NB_COLLISIONS] = {};
+
+Collision collision_union(Collision rec1, Collision rec2)
+{
+    Collision overlap = { 0 };
+
+    int left = (rec1.x > rec2.x)? rec1.x : rec2.x;
+    int right1 = rec1.x + rec1.width;
+    int right2 = rec2.x + rec2.width;
+    int right = (right1 < right2)? right1 : right2;
+    int top = (rec1.y > rec2.y)? rec1.y : rec2.y;
+    int bottom1 = rec1.y + rec1.height;
+    int bottom2 = rec2.y + rec2.height;
+    int bottom = (bottom1 < bottom2)? bottom1 : bottom2;
+
+    if ((left < right) && (top < bottom)) {
+        overlap.x = left;
+        overlap.y = top;
+        overlap.width = right - left;
+        overlap.height = bottom - top;
+    }
+
+    return overlap;
+}
+
+void collision_rec(Collision fix, int i, int scale)
+{
+    Collision col = collision_union(fix, (Collision) {
+            .x = penger_pos.x - pengers_width[id]*scale/2,
+            .y = penger_pos.y - pengers_height[id]*scale/2,
+            .width = pengers_width[id]*scale,
+            .height = pengers_height[id]*scale,
+            });
+    if (col.width == 0 && col.height == 0) return;
+    if (col.width == 1 && col.height == 1) return;
+
+    float div = -1.5;
+    if (col.width <= col.height) {
+        if (fix.x + fix.width == col.x + col.width)
+            penger_pos.x = fix.x + fix.width + pengers_width[id]*scale/2 + 1;
+        else if (fix.x == col.x)
+            penger_pos.x = col.x - pengers_width[id]*scale/2 + 1;
+        velocity.x /= div;
+    } else {
+        if (fix.y + fix.height == col.y + col.height)
+            penger_pos.y = fix.y + fix.height + pengers_height[id]*scale/2 + 1;
+        else if (fix.y == col.y)
+            penger_pos.y = col.y - pengers_height[id]*scale/2 + 1;
+        velocity.y /= div;
+    }
+}
+
 void set_velocity(float x, float y)
 {
     velocity = (v2){x, y};
@@ -126,6 +186,37 @@ int collision(v2 point, int x, int y, int w, int h)
 void init()
 {
     pengers_init();
+    int col_id = 0;
+    collisions[col_id++] = (Collision) {
+        .x = 100,
+        .y = 450,
+        .width = 50,
+        .height = 100,
+    };
+    collisions[col_id++] = (Collision) {
+        .x = 150,
+        .y = 500,
+        .width = 500,
+        .height = 50,
+    };
+    collisions[col_id++] = (Collision) {
+        .x = 650,
+        .y = 450,
+        .width = 50,
+        .height = 100,
+    };
+    collisions[col_id++] = (Collision) {
+        .x = 280,
+        .y = 250,
+        .width = 75,
+        .height = 75,
+    };
+    collisions[col_id++] = (Collision) {
+        .x = 445,
+        .y = 250,
+        .width = 75,
+        .height = 75,
+    };
 }
 
 void draw(float dt)
@@ -138,9 +229,13 @@ void draw(float dt)
     penger_origin.y = penger_pos.y - pengers_height[id]*scale/2;
 
     // jump
-    if (keys[SPACE]) {
-        velocity.y += velocity.y < 0 ? -10 : 10;
-        velocity.x += rand(-10, 10);
+    static int jumped = 0;
+    if (keys[SPACE] && !jumped) {
+        jumped = 1;
+        velocity.y = -5;
+        velocity.x += rand(-2, 2);
+    } else if (!keys[SPACE]) {
+        jumped = 0;
     }
 
     // mouse push
@@ -152,36 +247,33 @@ void draw(float dt)
         velocity.y += force.y;
     }
 
-    // update pos avec velocity si pas de touche presser
-    if (!keys[ARROW_UP] && !keys[ARROW_DOWN]) {
-        velocity.y += GRAVITY * dt;
-        penger_pos.y += velocity.y;
-    }
-    if (!keys[ARROW_LEFT] && !keys[ARROW_RIGHT]) {
+    if ((!keys[ARROW_LEFT] || !keys[Q]) && (!keys[ARROW_RIGHT] || !keys[D])) {
         penger_pos.x += velocity.x;
     }
+    velocity.y += GRAVITY * dt;
+    penger_pos.y += velocity.y;
+    if (velocity.x <= -0.1)
+        velocity.x += AIR_RESISTANCE * dt;
+    else if (velocity.x >= 0.1)
+        velocity.x -= AIR_RESISTANCE * dt;
+    else velocity.x = 0;
+    penger_pos.x += velocity.x;
 
     // movement
-    float speed = 10.0f;
-    if ((keys[ARROW_UP] || keys[ARROW_DOWN]) && (keys[ARROW_LEFT] || keys[ARROW_RIGHT]))
-        speed = 6.324f; // sqrt(speed) * 2 with speed = 10
+    float speed = 100.0f * dt;
     if (keys[SHIFT])
         speed /= 2.0f;
 
-    if (keys[ARROW_RIGHT]) {
+    if (keys[ARROW_RIGHT] || keys[D]) {
         penger_pos.x += speed;
         if (velocity.x < 0) velocity.x *= -1;
-        else if (velocity.x >= -EPSILON) velocity.x = 1;
+        else if (velocity.x >= -EPSILON) velocity.x = speed;
     }
-    if (keys[ARROW_LEFT]) {
+    if (keys[ARROW_LEFT] || keys[Q]) {
         penger_pos.x -= speed;
         if (velocity.x > 0) velocity.x *= -1;
-        else if (velocity.x <= EPSILON) velocity.x = -1;
+        else if (velocity.x <= EPSILON) velocity.x = -speed;
     }
-    if (keys[ARROW_DOWN])
-        penger_pos.y += speed;
-    if (keys[ARROW_UP])
-        penger_pos.y -= speed;
 
     // background
     for (int i = 0; i < width * height; i++)
@@ -189,6 +281,10 @@ void draw(float dt)
 
     rebondi(&penger_pos, scale);
 
+    for (int i = 0; i < NB_COLLISIONS; i++) {
+        collision_rec(collisions[i], i, scale);
+    }
+
     // dessine le penger sur le canva
     for (int y = 0; y < pengers_height[id]; y++) {
         for (int i = 0; i < pengers_width[id]; i++) {
@@ -209,6 +305,18 @@ void draw(float dt)
         }
     }
 
+    // draw collisions box
+    for (int i = 0; i < NB_COLLISIONS; i++) {
+        for (int y = collisions[i].y; y < collisions[i].y + collisions[i].height; y++) {
+            for (int x = collisions[i].x; x < collisions[i].x + collisions[i].width; x++) {
+                if ((y/2 + x/3)%8 < 4)
+                    BUFFER[y*width + x] = BLUE;
+                else
+                    BUFFER[y*width + x] = RED;
+            }
+        }
+    }
+
     // draw hand
     for (int y = 0; y < hand_height; y++) {
         for (int x = 0; x < hand_width; x++) {

build.sh

@@ -1,5 +1,10 @@
 #!/bin/bash
 
+if [[ "$1" == "clear" ]]; then
+    rm -vfr museum.c pengers.h hand.c app.wasm png2c app.wat index.html
+    exit
+fi;
+
 export_sym="init draw key_pressed key_released set_velocity set_mouse BUFFER width height id"
 export_cmd=""
 for e in $export_sym; do

index.html.template

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <title>Penger Party</title>
         <script src="load.js"></script>
         <style>
             #demo-canvas:hover {
@@ -10,8 +11,13 @@
                 width: 64px;
                 image-rendering: pixelated;
             }
+            h1 {
+                text-align: center;
+                font-size: 1.5em;
+                margin: 0px;
+            }
             @media screen and (min-width: calc(800px + calc(64px * 4))) {
-                body {
+                #css-bullshit {
                     content: "";
                     display: table;
                     clear: both;
@@ -24,27 +30,26 @@
                     float: right;
                     width: calc(100% - 800px - 25px);
                     position: absolute;
-                    top: 0px;
                     right: 0px;
                 }
             }
         </style>
     </head>
     <body>
-        <div id="left">
-            <canvas id="demo-canvas"></canvas>
-            <br>
-            <button id='descaling'>scale - 1</button>
-            <button id='scaling'>scale + 1</button>
-            <button id='reset'>reset velocity</button>
-            <br>
-            <p id='scale'></p>
-            <p>Press arrow key to move</p>
-            <p>Press space key to jump</p>
-            <p>Penger is afraid of your stinky hand</p>
-        </div>
-        <div id="right">
-            <h3>Choose your penger:</h3>
+        <h1>Penger Party</h1>
+        <div id="css-bullshit">
+            <div id="left">
+                <canvas id="demo-canvas"></canvas>
+                <h3>Instructions:</h3>
+                <p>Press q, d or arrow key to move</p>
+                <p>Press shift key to slow down</p>
+                <p>Press space key to jump</p>
+                <p>Penger is afraid of your stinky hand</p>
+            </div>
+            <div id="right">
+                <h3>Choose your penger:</h3>
+            </div>
         </div>
+        <h3>Made by a Penger Entousiast</h3>
     </body>
 </html>

load.js

@@ -1,4 +1,4 @@
-var scale = 7;
+var scale = 2;
 
 var global_instance;
 var global_memory;
@@ -17,24 +17,8 @@ function wasm_function(name)
 }
 
 window.onload = () => {
-    var scale_but = document.getElementById("scaling");
-    var descale_but = document.getElementById("descaling");
-    var scale_p = document.getElementById("scale");
-    var reset_but = document.getElementById("reset");
     var canvas = document.getElementById("demo-canvas");
     var pengers_img = document.getElementsByClassName('penger-img');
-    scale_p.innerText = "scale: " + scale;
-    scale_but.onclick = () => {
-        scale++;
-        scale_p.innerText = "scale: " + scale;
-    }
-    descale_but.onclick = () => {
-        scale--;
-        scale_p.innerText = "scale: " + scale;
-    }
-    reset_but.onclick = () => {
-        wasm_function('set_velocity')(0, 0);
-    }
     canvas.onmousemove = (e) => {
         var r = canvas.getBoundingClientRect();
         wasm_function('set_mouse')(e.clientX - r.x, e.clientY - r.y);
@@ -115,7 +99,7 @@ window.requestAnimationFrame(first);
 
 addEventListener('keydown', (e) => {
     wasm_function('key_pressed')(e.keyCode);
-    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
+    if(["Space","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
         e.preventDefault();
     }
 });