javascript - Why is this object's position NaN?
问题描述
Right now, I have a websocket server that sends the client the position of other players using an object ({pos:{x:32,y:46}}
). I then put that into a point by doing var newposition = new Point(msg.pos.x,msg.pos.y)
but then I never see the player appear.
I tried to console.log it, but it said the position was NaN. Then I tried to console.log the point, and it worked. I even tried not setting the position at all but it randomly sets its position to NaN for no reason that I can see.
This is my code for making a player join:
function addPlayer(nickname,position,color,uid,size,face) {
var circle = new Path.Circle(position,size)
var face = new Raster("/faces/"+face+"/face.png")
face.rescale(40,40)
face.position = position
var masker = new Group({
children: [circle, face],
clipped: true
});
face.onLoad = function() {
// Fit the circle snugly around the image:
circle.fitBounds(face.bounds);
};
circle.fillColor = color
console.log(nickname + " has joined the server")
console.log(players)
players[uid] = {
circle: circle,
nickname: nickname,
entirething: masker,
face: face
}
console.log(circle.position)
}
And here's what happens when a player moves (without actually setting the position of the player.)
if(msg.event == "move" && msg.who != cuid) {
var thepoint = new Point(msg.pos.x,msg.pos.y)
console.log(thepoint)
console.log(players[msg.who].circle.position)
}
And finally when the player joins:
if(msg.event == "join" && msg.who != cuid) {
addPlayer(msg.username,{x:0,y:0},"dodgerblue",msg.who,20,msg.face)
}
On my backend, I just have it broadcast that someone joined with their id (who
) and face (face
).
There are no errors in the console and I am rather confused of why this happens... Why does it set itself to NaN?
解决方案
(我把它作为答案而不是评论,因为我没有足够的空间)
为了找出问题出在哪里,请尝试模拟来自后端的消息,以检查您的客户端逻辑是否正确。
这是根据您的代码示例改编的草图,可作为此任务的起点。
我修改了一些对我没有意义的东西,但我认为你应该能够根据你的具体情况进行调整。
// Init global variables.
var cuid = 999;
var players = {};
function addPlayer(nickname, position, color, uid, size, face) {
// Init image and circle.
var circle = new Path.Circle(position, size);
var image = new Raster(face);
image.onLoad = function() {
// Make image fit circle bounds.
image.fitBounds(circle.bounds);
};
// Use circle as image clip mask.
var masker = new Group({
children: [circle, image],
clipped: true
});
console.log(nickname + ' has joined the server');
// Store player.
players[uid] = {
circle: circle,
nickname: nickname,
entirething: masker,
face: image
};
}
// On message...
function onMessage(msg) {
// If message concerns current player...
if (msg.who === cuid) {
// ...don't do nothing.
return;
}
// If message is a move event...
else if (msg.event == 'move' && msg.who != cuid) {
// ...update player position.
players[msg.who].entirething.position = new Point(msg.pos.x, msg.pos.y);
// If message is a join event...
} else if (msg.event == 'join' && msg.who != cuid) {
// ...add a new player.
addPlayer(msg.username, { x: 0, y: 0 }, 'dodgerblue', msg.who, 20, msg.face);
}
}
//
// Simulate messages reception.
//
// Add player 1
onMessage({
event: 'join',
who: 1,
username: 'player 1',
face: 'http://assets.paperjs.org/images/marilyn.jpg'
});
// Move player 1
onMessage({
event: 'move',
who: 1,
pos: {
x: 50,
y: 50
}
});
// Add player 2
onMessage({
event: 'join',
who: 2,
username: 'player 2',
face: 'http://assets.paperjs.org/images/marilyn.jpg'
});
// Move player 2
onMessage({
event: 'move',
who: 2,
pos: {
x: 500,
y: 125
}
});
推荐阅读
- html - 我可以破解 Rails 服务器中 HTML 页面的一部分吗
- python - 如何使用带有 python、selenium 和 chromedriver 的 Brave 网络浏览器?
- javascript - 从单独的 JavaScript 文件调用 PHP 文件中的方法
- java - Java 在转换为 Object 后更改变量的值
- .net-core - .NET Core 与 Webforms 中的应用设置
- intellij-idea - IntelliJ 说与 Bazel 同步后文件未同步
- javascript - 原生支持 async 和 await 吗?
- python - 为什么将列表切片分配给另一个变量会改变结果?
- androidx - Androidx OnBackPressedDispatcher - 如何使用后退按钮按下
- r - 如何在 R 的这个六角网格中创建相等的角度?