Суть такова: есть игрок, он может ходить по канвасу, однако оставляет за собой след, который не стирается, что я сделал не так и чем нужно дополнить мой код?
отрисовка игрока:
socket.on("state", (players) =>
{
for(const id in players)
{
const player = players[id];
context.strokeRect(player.positionX, player.positionY,150,75);
}
});
движение игрока:
const movement =
{
up: false,
down: false,
right: false,
left: false
}
document.addEventListener("keydown", (e) => {
if ((e.code === 'KeyW'))
{
movement.up = true;
}
if ((e.code === 'KeyS'))
{
movement.down = true;
}
if ((e.code === 'KeyA'))
{
movement.left = true;
}
if ((e.code === 'KeyD'))
{
movement.right = true;
}
});
document.addEventListener("keyup", (e) => {
if ((e.code === 'KeyW'))
{
movement.up = false;
}
if ((e.code === 'KeyS'))
{
movement.down = false;
}
if ((e.code === 'KeyA'))
{
movement.left = false;
}
if ((e.code === 'KeyD'))
{
movement.right = false;
}
});
setInterval(() => {
socket.emit("movement",movement);
}, 1000 / 60);
движение игрока2:
socket.on("movement", (data) =>
{
const player = players[socket.id];
if (data.up)
{
player.positionY -= 5
};
if (data.down)
{
player.positionY += 5
};
if (data.left)
{
player.positionX -= 5
};
if (data.right)
{
player.positionX += 5
};
})
класс игрока, откуда брались эти координаты:
class Player {
constructor(props)
{
this.name = props.name,
this.id = props.id,
this.playerRadius = 30,
this.positionX = 300,
this.positionY = 300
}
}