map + coin

.gitignore

@@ -7,3 +7,4 @@ index.html
 museum.c
 pengers.h
 node_modules/
+coin.c

app.c

@@ -1,5 +1,6 @@
 #include "pengers.h"
 #include "hand.c"
+#include "coin.c"
 
 #define GREEN 0xff00ff00
 #define RED 0xff0000ff
@@ -20,6 +21,7 @@ int dir = 0;
 int get_scale(void);
 float random(void); // flemme de coder un algo random, je recup celui de js (Math.random)
 float sqrtf(float val); // pareil
+void coin_point(void);
 
 typedef struct v2 {
     float x, y;
@@ -283,6 +285,25 @@ void set_default_map()
     };
 }
 
+#define MAX_COIN 20
+v2 coins[MAX_COIN] = {0};
+int coin_collected[MAX_COIN] = {0};
+int nb_coins = 0;
+
+void reset_coins()
+{
+    for (int i = 0; i < nb_coins; i++) coin_collected[i] = 0;
+    nb_coins = 0;
+}
+void add_coin(int x, int y)
+{
+    if (nb_coins >= MAX_COIN) return;
+    coins[nb_coins++] = (v2) {
+        .x = x,
+        .y = y,
+    };
+}
+
 void init()
 {
     pengers_init();
@@ -365,6 +386,26 @@ void draw(float dt)
         Collision col = collision_rec(collisions[i], i, scale);
         x_collide = x_collide || (col.height > 1);
     }
+    for (int i = 0; i < nb_coins; i++) {
+        if (coin_collected[i]) continue;
+        Collision coin = {
+            .x = coins[i].x,
+            .y = coins[i].y,
+            .width = coin_width,
+            .height = coin_height
+        };
+        Collision peng = {
+            .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,
+        };
+        Collision col = collision_union(coin, peng);
+        if (col.width > 0 || col.height > 0) {
+            coin_collected[i] = 1;
+            coin_point();
+        }
+    }
 
     // dessine le penger des autres joueur
     for (int p = 0; p < nb_players; p ++) {
@@ -423,6 +464,23 @@ void draw(float dt)
         }
     }
 
+    // dessine les coins
+    for (int c = 0; c < nb_coins; c++) {
+        if (coin_collected[c]) continue;
+        int scale = 2;
+        for (int y = 0; y < coin_height; y++) {
+            for (int i = 0; i < coin_width; i++) {
+                if (coin_img[y][i] <= 0x00FFFFFF) // pixel transparant
+                    continue;
+                int idx_x = coins[c].x + i;
+                int idx_y = coins[c].y + y;
+                if (idx_x < 0 || idx_x >= width || idx_y < 0 || idx_y >= height)
+                    continue;
+                BUFFER[idx_y*width + idx_x] = coin_img[y][i];
+            }
+        }
+    }
+
     // 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++) {

build.sh

@@ -5,7 +5,7 @@ if [[ "$1" == "clear" ]]; then
     exit
 fi;
 
-export_sym="init draw key_pressed key_released set_velocity set_mouse get_pos_x get_pos_y draw_player deco_player reset_collisions add_collisions set_default_map BUFFER width height id nb_players dir"
+export_sym="init draw key_pressed key_released set_velocity set_mouse get_pos_x get_pos_y draw_player deco_player reset_collisions add_collisions reset_coins add_coin set_default_map BUFFER width height id nb_players dir"
 export_cmd=""
 for e in $export_sym; do
     export_cmd="$export_cmd -Wl,--export=$e";
@@ -52,6 +52,7 @@ sed -e '/Choose your penger:/rpengers_image.html.temp' index.html.template > ind
 rm pengers_image.html.temp
 
 ./png2c "hand.png" > hand.c
+./png2c "coin.png" > coin.c
 
 clang -O3 --target=wasm32 -fno-builtin -nostdlib --no-standard-libraries -Wl,--no-entry $export_cmd -Wl,--allow-undefined -o $f.wasm $a
 

docker-compose.yml

@@ -1,8 +1,8 @@
 version: "3"
 
 services:
-  web:
-    container_name: "web"
+  penger-party:
+    container_name: "penger-party"
     image: "node"
     ports:
       - "6969:6969"

index.html.template

@@ -52,7 +52,7 @@
             <div id="right">
                 <h3>Multiplayer:</h3>
                 <p>
-                    play with the pseudo name:
+                    Play online with the pseudo name:
                     <input id="pseudo" placeholder="Penger Lover" />
                     <button id="play">Play</button>
                 </p>
@@ -60,6 +60,7 @@
                 <ul id="players">Not connected</ul>
                 <p>Playing map : <span id="map-name">Default Map</span></p>
                 <p>Next map in : <span id="map-time">-1</span></p>
+                <p>Coin collected : <span id="nb-coin">0</span></p>
                 <h3>Choose your penger:</h3>
             </div>
         </div>

load.js

@@ -30,6 +30,7 @@ window.onload = () => {
             document.getElementById('map-name').innerText = "Default Map";
             document.getElementById('map-time').innerText = "-1";
             wasm_function("set_default_map")();
+            wasm_function('reset_coins')();
         }
         connection.send('{"name": "pseudo", "value": "'+pseudo+'"}');
     };
@@ -67,6 +68,7 @@ connection.onmessage = (e) => {
         }
     }
     else if (req.name == "rid") {
+        console.log(req);
         my_rid = req.value;
     }
     else if (req.name == "pos") {
@@ -80,7 +82,7 @@ connection.onmessage = (e) => {
     else if (req.name == "map") {
         var map = req.value;
         document.getElementById("map-name").innerText = map.name;
-        console.log(Date.now(), " -> ", map.next_at);
+        map_next_at = map.next_at != undefined ? map.next_at : (Date.now()+30*1000);
         wasm_function('reset_collisions')();
         for (var i = 0; i < map.collisions.length; i++) {
             wasm_function('add_collisions')(
@@ -90,6 +92,13 @@ connection.onmessage = (e) => {
                 map.collisions[i].height
             );
         }
+        wasm_function('reset_coins')();
+        for (var i = 0; i < map.coins.length; i++) {
+            wasm_function('add_coin')(
+                map.coins[i].x,
+                map.coins[i].y
+            );
+        }
     }
     else if (req.name == "disconnect") {
         wasm_function('deco_player')(req.value);
@@ -117,6 +126,19 @@ function send_pos()
 }
 setTimeout(send_pos, update_time_ms);
 
+var map_next_at = Date.now();
+function update_map_time() {
+    var t = -1;
+    if (is_connected) {
+        t = (map_next_at - Date.now()) / 1000;
+        t = t.toString();
+        t = t.substring(0, t.indexOf(".")+2);
+    }
+    document.getElementById('map-time').innerText = t;
+    setTimeout(update_map_time, 10);
+};
+setTimeout(update_map_time, 10);
+
 (async() => {
 
 // jsp, je l'ai pris de la: https://github.com/tsoding/olive.c
@@ -139,6 +161,10 @@ const { instance } = await WebAssembly.instantiateStreaming(fetch("./app.wasm"),
         'random': Math.random,
         'sqrtf': Math.sqrt,
         'get_scale': () => {return scale},
+        'coin_point': () => {
+            document.getElementById('nb-coin').innerText++;
+            connection.send('{"name": "coin"}');
+        },
     })
 });
 

maps.json

@@ -11,6 +11,11 @@
                 "x": 50, "y": 400,
                 "width": 100, "height": 50
             }
+        ],
+        "coins": [
+            {"x": 100, "y": 50},
+            {"x": 10, "y": 5},
+            {"x": 50, "y": 150}
         ]
     },
     {
@@ -25,6 +30,11 @@
                 "x": 400, "y": 50,
                 "width": 5, "height": 350
             }
+        ],
+        "coins": [
+            {"x": 200, "y": 30},
+            {"x": 20, "y": 3},
+            {"x": 30, "y": 330}
         ]
     }
 ]

server.js

@@ -35,8 +35,7 @@ function update_player_pos()
 setTimeout(update_player_pos, update_time_ms);
 
 var current_map = 0;
-// var map_every_ms = 60 * 1000;
-var map_every_ms = 4 * 1000;
+var map_every_ms = 30 * 1000;
 function send_new_map()
 {
     var map = maps[Math.floor(Math.random() * maps.length)];
@@ -103,12 +102,13 @@ var global_id = 0;
 var sockets = [];
 ws_server.on('connection', (socket) => {
     socket.game = {};
+    socket.game.coin = 0;
     socket.game.rid = global_id++;
 
     socket.send('{"name": "rid", "value": '+socket.game.rid+'}');
 
     sockets.push(socket);
-    console.log("connect: ", sockets.length);
+    console.log("[", sockets.length, "] connect");
 
     socket.on('message', (msg) => {
         var msg_str = Buffer.from(msg).toString('latin1');
@@ -128,12 +128,15 @@ ws_server.on('connection', (socket) => {
             socket.game.y = req.y;
             socket.game.dir = req.dir;
         }
+        else if (req.name == "coin") {
+            socket.game.coin++;
+        }
     });
 
     socket.on('close', () => {
         sockets.forEach((s) => { s.send('{"name": "disconnect", "value": '+socket.game.rid+'}') });
         sockets = sockets.filter(s => s !== socket);
-        console.log("close: ", sockets.length);
+        console.log("[", sockets.length, "] close");
         update_player_list();
     });
 });