0

我在用箭头移动数字时遇到问题，如您所见，我想制作一个多人游戏应用程序，以便 2 个用户可以在画布上移动数字。我不知道为什么我的号码不动。keydown 和 keyup 功能有问题。但我找不到问题

// 服务器.js ´

    var express = require('express');

    var app = express();
    var server = app.listen(3000);

    app.use(express.static('public'));
    console.log("server started!");

    var socket = require('socket.io');

    var io = socket(server);

    io.sockets.on('connection', newConnection);


    // Skapar en lista för alla som är connectade till servern
    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;
    }

    // Skapar functionen så att man kan connecta till hemsidan via sockets

    function newConnection(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;
});

console.log('Socket:' + socket.id + ' connected');

      }


    // Skapar en loop som 
    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);

'

index.html(客户端) ´

    <html>
    <head>
<title>monsta</title>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>


 <style>

     </style>
      </head>
      <body>

    <canvas id="ctx" width="500" height="500" style="border: 1px solid black"> </canvas>




    <script type="text/javascript">
    var ctx = document.getElementById("ctx").getContext("2d");
    ctx.font = '30px';


    var socket;
    socket = io.connect("http://192.168.1.73:3000");



    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.addEventListener("keydown", function(event){
        if(event.keyCode === 68) {
            socket.emit('keyPress', {inputId:'right', state:true});

        }
        else if(event.keyCode === 83){
            socket.emit('keyPress', {inputId:'down', state:true});
        }
        else if(event.keyCode === 65){
            socket.emit('keyPress', {inputId:'left', state:true});
        }
        else if(event.keyCode === 87){
            socket.emit('keyPress', {inputId:'up', state:true});
        }
    });

    document.addEventListener("keyup",function(event){
        if(event.keyCode === 68){
            socket.emit('keyPress', {inputId:'right', state:false});
        }
        else if(event.keyCode === 83){
            socket.emit('keyPress', {inputId:'down', state:false});
        }
        else if(event.keyCode === 65){
            socket.emit('keyPress', {inputId:'left', state:false});
        }
        else if(event.keyCode === 87){
            socket.emit('keyPress', {inputId:'up', state:false});
        }
    });

</script>
    </body>
    </html>

'

4

0 回答 0