与nodeJS和Socket.io旋转的html5多人游戏不起作用

时间:2017-09-13 17:05:51

标签: javascript node.js html5 canvas socket.io

我目前正在尝试使用nodeJS和socket.io开发一个太空多人游戏。 我想让玩家能够旋转宇宙飞船,并让船只根据其旋转向前或向后移动。 所以我已经阅读了很多关于如何在单人游戏中进行操作的教程,并且我已经尝试调整多人游戏的代码。虽然我已经设法用键盘在所有4个方向上移动玩家,但这种方法并不适合旋转。

有人可以帮我把它拉下来吗?

//the server
var express = require('express');
var app = express();
var serv = require('http').Server(app);

app.get('/',function(req, res) {
res.sendFile(__dirname + '/client/edenindex.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,
    speedX = Math.cos(self.angle/180*Math.PI) * 30;
    speedY = Math.sin(self.angle/180*Math.PI) * 30;,
    angle: 0,
    rotspeed:6,
 }
 self.updatePosition = function(){
    if(self.pressingRight)
    self.angle -=self.rotspeed;    
    //self.x += self.maxSpd;
    if(self.pressingLeft)
        self.angle +=self.rotspeed;
        //self.x -= self.maxSpd;
    if(self.pressingUp){
    self.x += self.speedX;
    self.y += self.speedY;
    }
    if(self.pressingDown){
        self.x += self.speedX;
       self.y += self.speedY;
    }
  }
  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,
        angle:player.angle,
    });    
}
for(var i in SOCKET_LIST){
    var socket = SOCKET_LIST[i];
    socket.emit('newPositions',pack);
}




},1000/30);

客户:

<canvas id="ctx" width="500" height="500" 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.save();
        ctx.translate(data[i].x, data[i].y);
        ctx.rotate(data[i].angle * Math.PI / 180);
        ctx.fillStyle = "red";
        ctx.fillText(data[i].number,data[i].x,data[i].y);
        ctx.restore();
        }           
   });

 document.onkeydown = function(event){
    if(event.keyCode === 68)    //d
        socket.emit('keyPress',{inputId:'right',state:true});
    else if(event.keyCode === 83)   //s
        socket.emit('keyPress',{inputId:'down',state:true});
    else if(event.keyCode === 65) //a
        socket.emit('keyPress',{inputId:'left',state:true});
    else if(event.keyCode === 87) // w
        socket.emit('keyPress',{inputId:'up',state:true});

}
  document.onkeyup = function(event){
    if(event.keyCode === 68)    //d
        socket.emit('keyPress',{inputId:'right',state:false});
    else if(event.keyCode === 83)   //s
        socket.emit('keyPress',{inputId:'down',state:false});
    else if(event.keyCode === 65) //a
         socket.emit('keyPress',{inputId:'left',state:false});
     else if(event.keyCode === 87) // w
         socket.emit('keyPress',{inputId:'up',state:false});
 }

</script>

感谢先进:)

1 个答案:

答案 0 :(得分:0)

我认为您需要以下步骤进行轮换:

  1. 保存上下文(ctx.save())
  2. 移动枢轴(ctx.translate(a,b))
  3. 画船
  4. RESET pivot(ctx.translate(-a,-b))
  5. 然后恢复上下文(ctx.restore())
  6. 在你的情况下,你忘记了第四步。

    当你使用ctx.translate(a,b)时,“a”应该等于positionX + 0.5 * width而“b”应该等于positionY + o.5 * height