EBLv2/index.js

// Send data to backend function
function sendData(data) {
      fetch('http://localhost:5000/api/send', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
         body: JSON.stringify(data)
      })
      .then(res => res.json())
      .then(data => {
        // Clear Canvas
        ctx.clearRect(0, 0, 480, 270);
        
        // 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));
    }

// Set up canvas    
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d'); // 2D context

// Track key presses
var keyDown = {
  "ArrowUp": false,
  "ArrowDown": false,
  "ArrowRight": false,
  "ArrowLeft": false,
}

document.addEventListener('keydown', function (e) {
  let f = e.key
  if (f === "ArrowUp") {
    keyDown.ArrowUp = true;
  } else if (f === "ArrowDown") {
    keyDown.ArrowDown = true;
  } else if (f === "ArrowRight") {
    keyDown.ArrowRight = true;
  } else if (f === "ArrowLeft") {
    keyDown.ArrowLeft = true;
  }
})

document.addEventListener('keyup', function (e) {
  let f = e.key
  if (f === "ArrowUp") {
    keyDown.ArrowUp = false;
  } else if (f === "ArrowDown") {
    keyDown.ArrowDown = false;
  } else if (f === "ArrowRight") {
    keyDown.ArrowRight = false;
  } else if (f === "ArrowLeft") {
    keyDown.ArrowLeft = false;
  }
})

// Start Game
var reset = true
setInterval(() => sendData({reset, keyDown, spriteData}), 16);