Javascript 为什么我的角色握得太久会重复？

在我的游戏中，我希望我的角色四处移动。我的角色就是这样。然而，如果我握着钥匙太久，我的角色就会开始重复，留下一条线索。例如，如果我的角色是6，在按住左箭头键3秒钟后，我会在后面留下一条3的轨迹。下图：

为什么会这样？我怎么修理它

代码：

---

您也可以使用clear rect，但需要管理“笔和填充”

clearRect只清除了屏幕的一部分

       socket.on('newPositions',function(data){
          // This only blanks a part of the screen,
          //ctx.clearRect(0,0,500,500);
          // Clear (whitewash) the screen 
          ctx.fillStyle='white';
          ctx.fillRect(0,0,width,height);
          // since we are using fillText below
          ctx.fillStyle='black';
          for(var i = 0 ; i < data.length; i++){
             ctx.fillText(data[i].number,data[i].x,data[i].y);       
          }
       });

socket.on（'newPositions'，函数（数据）{
//这只会清空屏幕的一部分，
//ctx.clearRect（0,0500）；
//清除（粉刷）屏幕
ctx.fillStyle='white'；
ctx.fillRect（0,0，宽度，高度）；
//因为我们在下面使用了fillText
ctx.fillStyle='black'；
对于（变量i=0；i

var ctx=document.getElementById（“ctx”）.getContext（“2d”）；
ctx.font='30px Arial'；
var宽度=200；
var高度=300；
var数据=[{数字：“1”，x:0，y:3，颜色：“蓝色”}，{数字：“4”，x:6，y:10，颜色：“红色”}]；
setInterval（函数（）{
ctx.fillStyle=“黑色”；
ctx.fillRect（0,0，宽度，高度）；
对于（变量i=0；i

您是否打算发布服务器端代码？因为你发布了两次相同的代码。哦！你说得对！让我改变一下，看起来您需要清除

循环中的画布以实现您的目标。我添加了
const-context=canvas.getContext（'2d'）；clearRect（0，0，canvas.width，canvas.height）但是现在我的角色甚至不出现了，你只有一个“newPositions”消息的处理程序。在clientAdded示例中，您可能还应该考虑广播包，而不是每个套接字的新位置。
var express = require('express');
var app = express();
var serv = require('http').Server(app);
 
app.get('/',function(req, res) {
    res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client'));
 
serv.listen(2000)
console.log("Server started.");
 
var SOCKET_LIST = {};
var PLAYER_LIST = {};

var Player = function(id) {
    var self = {
        x:250,
        y:250,
        id:id,
        number: "" + Math.floor(10 * Math.random()),
        pressingRight:false,
        pressingLeft:false,
        pressingUp:false,
        pressingDown:false,
        maxSpd:10,
    }
    self.updatePosition = function(){
        if(self.pressingRight)
            self.x += self.maxSpd;
        if(self.pressingLeft)
            self.x -= self.maxSpd;
        if(self.pressingUp)
            self.y -= self.maxSpd;
        if(self.pressingDown)
            self.y += self.maxSpd;
    }
    return self;
}
 
var io = require('socket.io')(serv,{});
io.sockets.on('connection', function(socket){
    socket.id = Math.random();
    SOCKET_LIST[socket.id] = socket;

    var player = Player(socket.id);
    PLAYER_LIST[socket.id] = player
 
    socket.on('disconnect',function(){
        delete SOCKET_LIST[socket.id];
        delete PLAYER_LIST[socket.id];
    });

    socket.on('keyPress',function(data){
        if(data.inputId === 'left')
            player.pressingLeft = data.state;
        else if(data.inputId === 'right')
            player.pressingRight = data.state;
        else if(data.inputId === 'up')
            player.pressingUp = data.state;
        else if(data.inputId === 'down')
            player.pressingDown = data.state;
    });
 
});
 
setInterval(function(){
    var pack = [];
    for(var i in PLAYER_LIST){
        var player = PLAYER_LIST[i];
        player.updatePosition();
        pack.push({
            x:player.x,
            y:player.y,
            number:player.number
        });     
    }
    for(var i in SOCKET_LIST){
        var socket = SOCKET_LIST[i];
        socket.emit('newPositions',pack);
    }
 
 
 
 
},1000/25);
 

       socket.on('newPositions',function(data){
          // This only blanks a part of the screen,
          //ctx.clearRect(0,0,500,500);
          // Clear (whitewash) the screen 
          ctx.fillStyle='white';
          ctx.fillRect(0,0,width,height);
          // since we are using fillText below
          ctx.fillStyle='black';
          for(var i = 0 ; i < data.length; i++){
             ctx.fillText(data[i].number,data[i].x,data[i].y);       
          }
       });