Initial Commit

index.js

@@ -0,0 +1,61 @@
+// 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 => {
+        ctx.clearRect(0, 0, 480, 270);
+        ctx.beginPath();
+        ctx.arc(data.xpos, data.ypos, 10, 0, Math.PI * 2);
+        ctx.fill();
+        reset = false
+      })
+      .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}), 16);