Question

所以我试图使用socket.io和HTML5画布制作节点多人游戏。我已经让对象出现在彼此的客户端画布上，但是他们的位置很远。如何定位对象以便它们在客户端正确显示？

这是我的代码。客户端：

var socket;
var ship;
var cnv;

function setup() {

 cnv = createCanvas(1000, 1000);
 translate(120, 120);
 var x = (windowWidth - width) / 2;
 var y = (windowHeight - height) / 2;
 cnv.position(x, y);
  background(51);
  socket = io('http://localhost:3000');
  ship = new Avatar();
   socket.on('pos', newDrawing)

   var data = {
     x:ship.pos.x,
     y:ship.pos.y,
     r:ship.r,
     heading:ship.heading
   }
   socket.emit('start', data)
}

 function newDrawing(data){
  for(var i =0; i< data.length;i++){
    if(data[i].id != socket.id){
      rotate(data[i].h+ PI/2)
      var x=data[i].x;
      var y= data[i].y
      var r = data[i].r

      console.log(r)
      triangle(x+ -data[i].r, y+data[i].r, x+data[i].r,y+data[i].r,x+ 0,y+-data[i].r)
    }
  }
  }


function keyPressed(){

  if(keyCode == 65){
    ship.setRotation(-0.1)
    //ship.vel.x += -speed;
  }
  //Right
  if(keyCode == 68){
    ship.setRotation(0.1)
  }
  if(keyCode == 87){
    ship.boosting(true);
  }

}
function keyReleased(){
  ship.setRotation(0);
  ship.boosting(false);
}

function draw() {
  //background(51);
//console.log(cnv)
ship.render();
ship.turn()
ship.update();
ship.edges();
var data = {
  x:ship.pos.x,
  y:ship.pos.y,
  r:ship.r,
  heading:ship.heading
}

socket.emit('pos', data)
//clear()
}

对象

class Avatar{
  constructor(){
    this.pos=createVector(1000,1000);
    this.r=50;
    this.vel=createVector(0,0)
    this.color = 'red';
    this.move=false;
    this.heading=0;
    this.rotation=0;
    this.isBoost=false;
  }
  update(){
    if(this.isBoost){
      this.boost();
    }
    this.pos.add(this.vel);
    this.vel.mult(.99)
    }
  setRotation(a){
    this.rotation=a;
  }
  boosting(a){
    this.isBoost=a;
  }
  boost(){
    var force= p5.Vector.fromAngle(this.heading);
    this.vel.add(force);
  }
  turn(){
    this.heading+= this.rotation;
  }
  edges(){
    if(this.pos.x>width+this.r){
      this.pos.x=-this.r;
    } else if(this.pos.x<-this.r){
      this.pos.x=width +this.r;
    }
    if(this.pos.y>height+this.r){
      this.pos.y=-this.r;
    } else if(this.pos.y<-this.r){
      this.pos.y=height +this.r;
    }
  }
  render(){
    //clear()
    //translate(this.pos.x, this.pos.y)
    rotate(this.heading+ PI/2)
    //rect(this.r,-this.r,this,this.r)
    fill(this.color)
    triangle(-this.r,this.r,this.r,this.r,0,-this.r)
  }
}

服务器

var express=require('express');
var app=express();
var server = app.listen(3000)
var ships=[];

function Avatar(id,x,y,r,h){
  this.id=id;
  this.x = x;
  this.y= y;
  this.r=r;
  this.h=h;
}

console.log("Server on %s", server.address().port)
// function listen(){
//   var host= server.address().address;
//   var port= server.address().port;
//   console.log('Server running on %s',port )
// }
app.use(express.static('public'));

var socket=require('socket.io');
var io=socket(server);
io.sockets.on('connection',function(socket){

  console.log("New Socket:" + socket.id)

  socket.on('start',function(data){
    ships.push(new Avatar(socket.id, data.x, data.y, data.r, data.heading));
    //console.log(ships)
  })

  socket.on('pos',function(data){
    var ship;
    for(var i =0; i< ships.length; i++){
      if(ships[i].id == socket.id){
        ships[i].x=data.x;
        ships[i].y=data.y;
        ships[i].r=data.r;
        ships[i].h=data.heading;
      }
    }
    //console.log(ships[0])
    //console.log(ships)
      //console.log(socket.id)
      //io.sockets.emit('pos',ships)

      socket.broadcast.emit('pos',ships)

  })
  socket.on('disconnect' , function(){

    for(var i =0; i< ships.length; i++){
      if(ships[i].id == socket.id){
        console.log(socket.id + " Has Left")
        ships.splice(i,1);
      }

    }
  })
})

我看到的部分问题是正在绘制其他客户端对象，就好像它们的原点不在它自己的对象的中心。

Answer 1

我弄清楚为什么这是一个问题。我不知道翻译和旋转功能不是特定于对象的。意思是，当我为我的客户端旋转时，它正在旋转画布的视角，而不是对象。所以任何其他物体都会在它周围明显地旋转。

使用多个套接字在Canvas上定位

1 个答案: