javascript - 多人游戏金币

Question

使用 eureca.io websockets 获取一些硬币来生成多人游戏时遇到一个小问题。我已经让玩家通过远程连接进行多人游戏，但我似乎无法通过连接生成硬币，因此它们出现在所有玩家连接上的同一位置。我正在使用 Phaser 为我的网络连接生成游戏和 eureca 和引擎。我已经在页面上生成了硬币，没有任何问题，但是每当新玩家加入时，硬币总是显示在不同的位置，我想知道如何让它们通过连接生成。我的游戏代码如下:

游戏代码

var myId = 0;
var background;
var blueSquare;
var player;
var coins;
var goldCoin;
var squareList;
var coinList;
var cursors;
var score;
var highScore;

var ready = false;
var eurecaServer;

var eurecaClientSetup = function () {
var eurecaClient = new Eureca.Client();
eurecaClient.ready(function (proxy) {       
    eurecaServer = proxy;
});
eurecaClient.exports.setId = function (id) 
{
    myId = id;
    create();
    eurecaServer.handshake();
    ready = true;
}   
eurecaClient.exports.kill = function (id)
{   
    if (squareList[id]) {
        squareList[id].kill();
        console.log('Player has left the game ', id, squareList[id]);
    }
}   
eurecaClient.exports.spawnBlueSquare = function (i, x, y)
{
    if (i == myId) return;

    console.log('A new player has joined the game');
    var blsq = new BlueSquare(i, game, blueSquare);
    squareList[i] = blsq;
}
eurecaClient.exports.spawnCoins = function (c, x, y)
{   
    console.log('A coin has been generated');
    var cn = new GenerateCoin(c, game, coin);
    coinList[c] = cn;
}
eurecaClient.exports.updateState = function (id, state)
{
    if (squareList[id]) {
        squareList[id].cursor = state;
        squareList[id].blueSquare.x = state.x;
        squareList[id].blueSquare.y = state.y;
        squareList[id].blueSquare.angle = state.angle;
        squareList[id].update();

        coinList.cursor = state;
        coinList.blueSquare.x = state.x;
        coinList.blueSquare.y = state.y;
        coinList.update();
    }
 }
}

BlueSquare = function (index, game, player) {
this.cursor = {
    left:false,
    right:false,
    up:false,
    down:false, 
}

this.input = {
    left:false,
    right:false,
    up:false,
    down:false,
}

var x = 0;
var y = 0;

this.game = game;
this.player = player;
this.currentSpeed = 0;

this.isBlue = true;

this.blueSquare = game.add.sprite(x, y, 'blueSquare');
this.blueSquare.anchor.set(0.5);

this.blueSquare.id = index;
game.physics.enable(this.blueSquare, Phaser.Physics.ARCADE);
this.blueSquare.body.immovable = false;
this.blueSquare.body.collideWorldBounds = true;
this.blueSquare.body.setSize(34, 34, 0, 0);

this.blueSquare.angle = 0;

game.physics.arcade.velocityFromRotation(this.blueSquare.rotation, 0,         this.blueSquare.body.velocity);
}

BlueSquare.prototype.update = function () {
var inputChanged = (
    this.cursor.left != this.input.left ||
    this.cursor.right != this.input.right ||
    this.cursor.up != this.input.up ||
    this.cursor.down != this.input.down
);
if (inputChanged)
{   
    if (this.blueSquare.id == myId)
    {
        this.input.x = this.blueSquare.x;
        this.input.y = this.blueSquare.y;
        this.input.angle = this.blueSquare.angle;

        eurecaServer.handleKeys(this.input);    
    }
}
if (this.cursor.left)
    {
        this.blueSquare.body.velocity.x = -250;
        this.blueSquare.body.velocity.y = 0;
    }
    else if (this.cursor.right)
    {
        this.blueSquare.body.velocity.x = 250;
        this.blueSquare.body.velocity.y = 0;

    }
    else if (this.cursor.down)
    {
        this.blueSquare.body.velocity.x = 0;
        this.blueSquare.body.velocity.y = 250;
    }   
    else if (this.cursor.up)
    {
        this.blueSquare.body.velocity.x = 0;
        this.blueSquare.body.velocity.y = -250;
    }
    else 
    {
        this.blueSquare.body.velocity.x = 0;
        this.blueSquare.body.velocity.y = 0;
    }
}

BlueSquare.prototype.kill = function () {
this.alive = false;
this.blueSquare.kill();
}

GenerateCoin = function (game, goldCoin) {

this.game = game;
this.goldCoin = goldCoin;

x = 0;
y = 0;

this.coins = game.add.sprite(x, y, 'coin');
game.physics.enable(this.coins, Phaser.Physics.ARCADE);
this.coins.body.immovable = true;
this.coins.body.collideWorldBounds = true;
this.coins.body.setSize(16, 16, 0, 0);
}

window.onload = function() {
function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;
    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }
    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
            element.innerHTML = "Game Over!";
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }
    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}countdown( "countdown", 5, 0 );
}

var game = new Phaser.Game(700, 600, Phaser.AUTO, 'Square Hunt', { preload:  preload, create: eurecaClientSetup, update: update, render: render });

function preload () {
game.load.spritesheet('coin', 'assets/coin.png', 18, 18);
game.load.image('blueSquare', 'assets/blue-square.png');
game.load.image('redSquare', 'assets/red-square.png');
game.load.image('earth', 'assets/sand.png');
}

function create () {
game.world.setBounds(0, 0, 1500, 1500);
game.stage.disableVisibilityChange  = true;

background = game.add.tileSprite(0, 0, 800, 600, 'earth');
background.fixedToCamera = true;

squareList = {};

player = new BlueSquare(myId, game, blueSquare);
squareList[myId] = player;
blueSquare = player.blueSquare;
blueSquare.x = Math.floor(Math.random() * 650);
blueSquare.y = Math.floor(Math.random() * 650);

blueSquare.bringToTop();

game.camera.follow(blueSquare);
game.camera.deadzone = new Phaser.Rectangle(150, 150, 500, 300);
game.camera.focusOnXY(0, 0);

cursors = game.input.keyboard.createCursorKeys();

coinList = {};

goldCoin = new GenerateCoin(game, coins);
coinList = goldCoin;
coins = goldCoin.coins;
coins.x = Math.floor(Math.random() * 650);
coins.y = Math.floor(Math.random() * 650);

coins.bringToTop();
}

function update () {
if (!ready) return;

game.physics.arcade.collide(blueSquare, coins);

player.input.left = cursors.left.isDown;
player.input.right = cursors.right.isDown;
player.input.up = cursors.up.isDown;
player.input.down = cursors.down.isDown;

player.input.fire = game.input.activePointer.isDown;
player.input.tx = game.input.x+ game.camera.x;
player.input.ty = game.input.y+ game.camera.y;

background.tilePosition.x = -game.camera.x;
background.tilePosition.y = -game.camera.y; 

for (var i in squareList)
{
    if (!squareList[i]) continue;
    var curBlue = squareList[i].blueSquare;
    for (var j in squareList)
    {
        if (!squareList[j]) continue;
        if (j!=i) 
        {
            var targetBlue = squareList[j].blueSquare;
        }
        if (squareList[j].isBlue)
        {
            squareList[j].update();
        }           
    }
}
}

function test(){
console.log('collsion');
}

function render () {}

Server.js 文件

var express = require('express')
, app = express(app)
, server = require('http').createServer(app);

app.use(express.static(__dirname));

var clients = {};
var EurecaServer = require('eureca.io').EurecaServer;
var eurecaServer = new EurecaServer({allow:['setId', 'spawnBlueSquare', 'spawnCoins', 'kill', 'updateState']});
eurecaServer.attach(server);

eurecaServer.onConnect(function (conn) {    
console.log('New Client id=%s ', conn.id, conn.remoteAddress);

var remote = eurecaServer.getClient(conn.id);    

clients[conn.id] = {id:conn.id, remote:remote}
remote.setId(conn.id);  
});

eurecaServer.onConnectionLost(function (conn) {
console.log('connection lost ... will try to reconnect');
});

eurecaServer.onDisconnect(function (conn) {    
console.log('Client disconnected ', conn.id);

var removeId = clients[conn.id].id;

delete clients[conn.id];

for (var c in clients)
{
    var remote = clients[c].remote;
    remote.kill(conn.id);
}   
});

eurecaServer.exports.handshake = function()
{
for (var c in clients)
{
    var remote = clients[c].remote;
    for (var cc in clients)
    {       
        var x = clients[cc].laststate ? clients[cc].laststate.x:  0;
        var y = clients[cc].laststate ? clients[cc].laststate.y:  0;

        remote.spawnBlueSquare(clients[cc].id, x, y);   
    }
}
}

eurecaServer.exports.handleKeys = function (keys) {
var conn = this.connection;
var updatedClient = clients[conn.id];

for (var c in clients)
{
    var remote = clients[c].remote;
    remote.updateState(updatedClient.id, keys);

    clients[c].laststate = keys;
}
}
server.listen(8000);

Answer 1

您可以在服务器端(在 conexion 事件上)生成此随机位置(x 和 y)，然后将此位置发送给所有客户端，以便他们可以在同一位置生成硬币，而不是在每个客户端上随机生成硬币.