I am currently developing a 2D pong game using vue.js and socket.io. At the moment, I have a black rectangle displayed in a canvas. My goal is to make this rectangle move following the cursor of my mouse. The issue I am facing is that although my console logs show the correct coordinates, the position of the rectangle only updates when I refresh the page. (I also included buttons for moving the rectangle but they are not relevant in this case.)
Below is the code from my .vue file:
<template>
<div>
<canvas @mousemove="mouseMove" ref="game" width="640" height="480" style="border: 1px solid black;">
</canvas>
<p style = "display: flex; justify-content: space-around;">
<button v-on:click="move('right')">Right</button>
<button v-on:click="move('left')">Left</button>
<button v-on:click="move('up')">Up</button>
<button v-on:click="move('down')">Down</button>
</p>
</div>
</template>
<script>
import io from "socket.io-client";
export default {
name: 'BlockGame',
data() {
return {
socket: {},
context: {},
position: {
x: 0,
y: 0
}
}
},
created() {
this.socket = io("http://localhost:3000");
},
mounted() {
this.context = this.$refs.game.getContext("2d");
this.socket.on("position", data => {
this.position = data;
console.log(data);
this.context.clearRect(0, 0, this.$refs.game.width, this.$refs.game.height)
console.log("mounted pos:" + this.position.x, this.position.y);
this.context.fillRect(this.position.x, this.position.y, 20, 20);
});
},
methods: {
move(direction) {
this.socket.emit("move", direction);
},
mouseMove() {
this.socket.emit("mouseMove", event.clientX, event.clientY)
console.log("event pos:" + event.clientX, event.clientY);
console.log("position pos:" + this.position.x, this.position.y);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Additionally, here is the app.js code snippet:
const Express = require("express");
const Http = require("http").Server(Express);
const SocketIo = require("socket.io")(Http, {
cors: {
origin: "http://localhost:8080",
methods: ["GET", "POST"]
}
});
var position = {
x: 200,
y: 200
}
SocketIo.on("connection", socket => {
socket.emit("position", position)
socket.on("move", data => {
switch(data) {
case "left":
if (position.x - 5 < 0)
position.x = 0;
else
position.x -= 5;
SocketIo.emit("position", position);
break;
case "right":
if (position.x + 5 >= 620)
position.x = 620;
else
position.x += 5;
SocketIo.emit("position", position);
break;
case "up":
if (position.y - 5 < 0)
position.y = 0;
else
position.y -= 5;
SocketIo.emit("position", position);
break;
case "down":
if (position.y + 5 >= 460)
position.y = 460;
else
position.y += 5;
SocketIo.emit("position", position);
break;
}
})
socket.on("mouseMove", (mousePosx, mousePosy) => {
position.x = mousePosx;
console.log("mousePosx:" + mousePosx)
position.y = mousePosy;
console.log("mousePosy:" + mousePosy)
console.log("POSITIONposx:" + position.x)
console.log("POSITIONposy:" + position.y)
})
});
Http.listen(3000, () => {
console.log("Listening at: 3000...");
})