42 lines
765 B
JavaScript
42 lines
765 B
JavaScript
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
const ws = new WebSocket("ws://localhost:3000");
|
|
|
|
let objects = [];
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
|
|
if (data.type === "init") {
|
|
objects = data.level;
|
|
draw();
|
|
}
|
|
|
|
if (data.type === "add") {
|
|
objects.push(data.object);
|
|
draw();
|
|
}
|
|
};
|
|
|
|
canvas.addEventListener("click", (e) => {
|
|
const rect = canvas.getBoundingClientRect();
|
|
|
|
const obj = {
|
|
x: e.clientX - rect.left,
|
|
y: e.clientY - rect.top
|
|
};
|
|
|
|
ws.send(JSON.stringify({
|
|
type: "add",
|
|
object: obj
|
|
}));
|
|
});
|
|
|
|
function draw() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
objects.forEach(obj => {
|
|
ctx.fillRect(obj.x, obj.y, 20, 20);
|
|
});
|
|
} |