时间戳

首页 > 解决方案 > 为什么我的角色握得太久会重复？

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

问题描述

在我的游戏中，我希望我的角色四处走动。而我的性格确实如此。但是，如果我握住钥匙的时间过长，我的角色就​​会开始重复自己，并在其身后留下痕迹。例如，如果我的角色是一个 6，在按住左箭头键三秒钟后，我最终会在它后面留下一个 3。下面是一张图片：

六分之一

为什么会这样？我如何解决它？

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="ctx" width="1773" height="990" style="border:1px solid #000000;"></canvas>
 
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <script>
        var ctx = document.getElementById("ctx").getContext("2d");
        ctx.font = '30px Arial';
     
        var socket = io();
     
        socket.on('newPositions',function(data){
            ctx.clearRect(0,0,500,500);
            for(var i = 0 ; i < data.length; i++)
                ctx.fillText(data[i].number,data[i].x,data[i].y);       
        });
     
        document.onkeydown = function(event){
            if(event.keyCode === 39)    //d
                socket.emit('keyPress',{inputId:'right',state:true});
            else if(event.keyCode === 40)   //s
                socket.emit('keyPress',{inputId:'down',state:true});
            else if(event.keyCode === 37) //a
                socket.emit('keyPress',{inputId:'left',state:true});
            else if(event.keyCode === 38) // w
                socket.emit('keyPress',{inputId:'up',state:true});
     
        }
        document.onkeyup = function(event){
            if(event.keyCode === 39)    //d
                socket.emit('keyPress',{inputId:'right',state:false});
            else if(event.keyCode === 40)   //s
                socket.emit('keyPress',{inputId:'down',state:false});
            else if(event.keyCode === 37) //a
                socket.emit('keyPress',{inputId:'left',state:false});
            else if(event.keyCode === 38) // w
                socket.emit('keyPress',{inputId:'up',state:false});
        }
     
    </script>
</body>
</html>

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);

标签： javascripthtml

解决方案

您也可以使用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);       
          }
       });


<canvas id="ctx" width="200" height="300" >

<script> 
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
var width = 200; 
var height = 300;

var data = [{number:"1",x:0,y:3,color:"blue"},{number:"4",x:6,y:10,color:"red"}];
setInterval(function(){
    ctx.fillStyle="black";
    ctx.fillRect(0,0,width,height);
    for(var i = 0 ; i < data.length; i++){
      ctx.fillStyle=data[i].color;
      ctx.fillText(data[i].number,data[i].x,data[i].y);      
      data[i].x += 1 + i; 
      data[i].y += 2 + i;
    }
    
}, 23);


</script>

推荐阅读