在多个套接字上定位在canvas上

所以我正在尝试使用socket.io和HTML5canvas来制作节点多人游戏。 我已经得到的对象出现在彼此的客户端canvas上,但他们的位置是离开的。 如何定位这些对象,以便它们在客户端正确显示?

这是我的代码。 客户:

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

我所看到的部分问题是,其他客户端对象正在被绘制,好像它们的起点不在其对象的中心。

我想清楚为什么这是一个问题。 我不知道翻译和旋转function不是对象特定的。 这意味着,当我为我的客户轮换时,它旋转了canvas的视angular,而不是对象。 所以任何其他的物体都会在其周围旋转。