Collision

index.js

@@ -9,11 +9,18 @@ function sendData(data) {
       })
       .then(res => res.json())
       .then(data => {
+        // Clear Canvas
         ctx.clearRect(0, 0, 480, 270);
-        ctx.beginPath();
-        ctx.arc(data.xpos, data.ypos, 10, 0, Math.PI * 2);
-        ctx.fill();
+        
+        // Draw in Player 1
+        ctx.drawImage(ufo, data.player1.xpos-spriteData.ufo.width/2, data.player1.ypos-spriteData.ufo.height/2)
         reset = false
+        
+        // Draw Hitboxes (For debugging)
+        let plat = data.map1.platforms
+        for (i = 0; i < plat.length; i++) {
+          ctx.fillRect(plat[i].x, plat[i].y, plat[i].width, plat[i].height)
+        }
       })
       .catch(err => console.error('Error:', err));
     }
@@ -58,4 +65,4 @@ document.addEventListener('keyup', function (e) {
 
 // Start Game
 var reset = true
-setInterval(() => sendData({reset, keyDown}), 16);
+setInterval(() => sendData({reset, keyDown, spriteData}), 16);