Javascript p、 更新是我的多人游戏中的一个函数错误

Javascript p、 更新是我的多人游戏中的一个函数错误,javascript,socket.io,Javascript,Socket.io,我一直在做一个多人html5游戏,当我实现管道代码时,我得到了错误p。更新不是一个函数。下面是我的代码 server.js var express = require('express'); var http = require('http'); var path = require('path'); var socketIO = require('socket.io'); var app = express(); var server = http.Server(app); var io =

我一直在做一个多人html5游戏,当我实现管道代码时,我得到了错误p。更新不是一个函数。下面是我的代码

server.js

var express = require('express');
var http = require('http');
var path = require('path');
var socketIO = require('socket.io');
var app = express();
var server = http.Server(app);
var io = socketIO(server);
app.set('port', 5000);
app.use('/static', express.static(__dirname + '/static'));

// Routing
app.get('/', function(request, response) {
  response.sendFile(path.join(__dirname, '/static/index.html'));
});

// Starts the server
server.listen(5000, function() {
  console.log('Starting server on port 5000');
});

// Game vars
var 
width,
height,

frames = 0,
clients = {},
pipes = [];

// Bird class
function Bird() {
    this.x = 64;
    this.y = height/2;
    this.r = 32;
    this.gravity = 0.5;
    this.velocity = 0;
    this.lift = 10;
    this.time = new Date().getTime();

    this.up = function() {
        this.velocity = -this.lift;
        this.velocity = this.velocity * 0.9; 
    }

    this.update = function() {
        this.velocity += this.gravity;
        this.y += this.velocity;
        if (this.y > height) {
            this.y = height;
            this.velocity = -(this.velocity * 0.8);
        }
        if (this.y < 0) {
            this.y = 0;
            this.velocity = 0;
        }
    }
}

function Pipe() {
    this.x = width;
    this.y = 0;
    this.width = 20;
    this.speed = 1;
    this.topPipe = Math.random()*height/2;
    this.bottomPipe = Math.random()*height/2;
    this.highlight = null;

    this.update = function () {
        this.x -= this.speed;
    }
}

// Updating
function update() {
    frames++;

    if(frames % 100 == 0) {
        pipes.push(new Pipe());
    }

    for(var key in clients) {
        var b = clients[key];
        b.update();
    }

    io.sockets.emit('update', {
        birds: clients,
        pipes: pipes
    });
}

io.on("connection", function(socket) {
    socket.on('new-client', function(data) {
        width = data.width;
        height = data.height;
        clients[socket.id] = new Bird();
    });
    socket.on('disconnect', function() {
        delete clients[socket.id];
    });
});

setInterval(update, 1000/60);
“pipes”对象中的客户端出现错误。

   socket.on('update', function(data) {
    birds.update(data.birds);
    pipes.update(data.pipes);
data.birds
data.pipes
是JSON对象的序列化数组,它不保留其函数属性(例如
update
)或原型方法

Pipe.prototype.update = function () {
    this.x -= this.speed;
}
// To apply the function
for(var key in this._pipes) {
    var p = this._pipes[key];
    Pipe.prototype.update.call(p); // Equivalent to p.update()
    if(p.x > -p.width) {
      delete this._pipes[key];
    }
}
我建议让客户端和服务器都可以访问管道类,并将
update
转化为一种方法。除非需要重新分配,否则使用函数作为对象属性不是一个好主意(例如,它们占用更多空间,而不是使用原型方法)


然后,您甚至可以使用apply对序列化对象调用update。当然,如果您有一个函数可以将socket.io中的数据反序列化到
Pipe
实例中,则效果更好。

但是Pipe类位于服务器上。我们如何在客户端设置proto如果您使用Browserify或Webpack之类的工具,您可以在客户端和服务器之间共享代码。
Pipe.prototype.update = function () {
    this.x -= this.speed;
}
// To apply the function
for(var key in this._pipes) {
    var p = this._pipes[key];
    Pipe.prototype.update.call(p); // Equivalent to p.update()
    if(p.x > -p.width) {
      delete this._pipes[key];
    }
}