Question

对于我正在制作的在线棋盘游戏，我定义了一个Tile类，我使用它来创建“地图”。 Tile类有几个属性，还有一个名为show的方法，它在画布上显示实例。

所有脚本都通过node.js提供的index.html中的脚本标记作为静态文件传递给客户端。在我介绍服务器之前，Tile类的实例化工作正常。现在它产生了一些非常奇怪和有趣的结果。

HexMap类在实例化时创建一个Tile的二维数组，如下所示：

function HexMap (width, height, image) {
    this.width = width;
    this.height = height;
    this.contents = [];
    for (let i = 0; i < this.width; i++) {
        this.contents[i] = [];
        for (let j = 0; j < this.height; j++)
            this.contents[i].push(new Tile(i, j, size, image, "SEA"));
    }

}

Tile类的代码是：

var Tile = function (row, column, side, image, type) {

Vector.call(this, row, column);

this.unit = null;
this.canvas = null;
this.side = side;

this.type = type;

this.startingPoint = new Vector(this.x*Math.sqrt(3)*this.side + (this.y& 1) * this.side*Math.sqrt(3)/2, this.side*1.5*this.y);
this.middlePoint = new Vector(this.startingPoint.x + Math.sqrt(3)*this.side/2, this.startingPoint.y + this.side/2);

this.getOffset = function () {
    return {
        "SEA" : 0,
        "SHORELINE" : 60,
        "PLAINS" : 120,
        "FOREST_LIGHT" : 180,
        "FOREST_HEAVY" : 240,
        "MOUNTAINS" : 300,
        "SWAMP" : 360,
        "MARSH" : 420
    }[this.type];
};

this.getVector = function () {
    return new Vector(this.x, this.y);
};

this.show = function (context) {
    if(!this.canvas){
        this.canvas = makeTemplate(side, this.type, image);
    }
    context.drawImage(this.canvas, this.startingPoint.x - this.getOffset(), this.startingPoint.y);
};

this.getPixelX = function () {
    return this.x*Math.sqrt(3)*this.side + (this.y & 1) * this.side;
};

this.getPixelY = function () {
    return this.side/2 + this.side*2*this.y;
};

this.setType = function (type){
    this.type = type;
};

};

在控制台中打印Tile对象通常会显示如下内容：

Tile {x: 0, y: 0, unit: null, canvas: canvas, side: 15, …}

这次我使用服务器做了同样的事情，结果就是这样：

{x: 0, y: 1, unit: null, canvas: null, side: 15, …}

有趣的是，结果确实是一个对象，但不是Tile对象。它具有Tile对象具有的所有属性，但没有任何方法。我最终得到的错误是：

tile.show is not a function

创建地图对象并通过socket.io套接字传输到服务器。以下代码在客户端（guest虚拟机）上运行。

function selectGame(id) {
        var hexmap = new HexMap(rowspan, colspan, spritesheet);
        hexmap.generateIsland();
        socket.emit('game-select', {id: id, hexmap: hexmap});
    }

服务器然后接收地图：

socket.on('game-select', function (data) {

    //The 2 sockets corresponding to the players join the same room
    io.sockets.connected[data.id].join(games[data.id].identifier);
    io.sockets.connected[socket.id].join(games[socket.id].identifier);

    //The start-game event is emitted for just the sockets of the same room
    io.to(games[socket.id].identifier).emit('start-game', {
        map: data.hexmap
    });

});

然后两个客户再次收到它：

    socket.on('start-game', function (data) {
        let el = document.getElementById("wrapper");
        el.parentNode.removeChild(el);
        hexmap = data.map;
        contexts = setupCanvas();
        displayMap(hexmap, contexts.mapContext);
    });

displayMap做的是迭代地图内容，并使用Tile方法显示每个show。

无论我怎么努力，我都无法确定问题...有关如何解决此问题的任何建议？

对象实例被剥离其方法

0 个答案: