61 lines
1.5 KiB
JavaScript
61 lines
1.5 KiB
JavaScript
// 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); |