Question

我正在创建一个多达10名玩家的多人游戏。当每个玩家登录游戏时，他/她被分配一个随机化身，其走到指定的屏幕坐标。当我在画布上绘制头像时，我使用clearRect（）为头像绘制6个步行帧。当然clearRect（）正在删除已登录的玩家/头像，我不确定是否有办法绕过这个或更好的方法来创建多个步行头像。

以下是代码：

服务器端：

//position the players          
        var newPlayer = new Player(newX, newY); //update co-ordinates based on number of users.
        newPlayer.id = this.id;
        console.log('Server, player id:' + newPlayer.id);

        newPlayer.x = newX;
        newPlayer.y = newY;
        newPlayer.imgFile = newFile;
        console.log(players.length+1);

        // Add new player to the players array
        io.sockets.emit('welcome message', {msg: data.logname, nick: socket.nickname}); 

        // Draw new player
        io.sockets.emit("create-player", {id: newPlayer.id, x: newX, y: newY, imgFile: newFile});

        // Broadcast new player to connected socket clients
        var i, existingPlayer;
        for (i = 0; i < players.length; i++) {
            existingPlayer = players[i];
            console.log('Existing id:' + existingPlayer.id);
            io.sockets.emit("create-player", {id: existingPlayer.id, x: existingPlayer.x, y: existingPlayer.y, imgFile: existingPlayer.imgFile});
        };

        // Add new player to the players array
        players.push(newPlayer);

客户方：

var draw = function(context) {
    flag = true;
    var shift = 0;
    var width = 166,
    height = 340,
    frames = 6,
    currentFrame = 0;
    var x = newPlayer.x;
    var y = newPlayer.y - 165;
    var sx = x-425;

image = new Image();
image.src = newPlayer.imgAvatar;

//draw avatar
var drawAvatar = function(){
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(image, 0, height * currentFrame, width, height, sx, y, width, height);

    if (currentFrame == frames) {
        currentFrame = 0;
        flag = true;
            clearInterval(timer);
        } else {
            currentFrame++;
            sx = sx + 85;
        }
    }

    if (flag == false) {
        clearTimeout(timer);
    } 

var timer = setInterval(drawAvatar, 1000 / FPS);

};

由于

Javascript，Express，Socket io - Muplitplayer游戏，步行头像不工作

0 个答案: