HTML5   发布时间:2022-04-26  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了多人HTML5,Node.js,Socket.IO大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我尝试使用HTML5 Canvas创建简单的多播放器,JavaScript(也使用John Resig简单继承库)和带有Socket.IO的Node.js。
我的客户端代码
var canvas  = document.getElementById('game');
var context = canvas.getContext('2d');
var socket  = new io.socket('127.0.0.1',{port: 8080});

var player = null;

var UP    = 'UP',LEFT  = 'LEFT',DOWN  = 'DOWN',RIGHT = 'RIGHT';

socket.connect();

socket.on('connect',function() {socket.send();
    console.log('Connected!');
    player = new Player(50,50);
});

socket.on('message',function(msg) {
    if(msg == 'UP') {
        player.moveUP();
    } else if(msg == 'LEFT') {
        player.moveLEFT();
    } else if(msg == 'DOWN') {
        player.moveDOWN();
    } else if(msg == 'RIGHT') {
        player.moveRIGHT();
    } else {

    }
});

socket.on('disconnect',function() {
    console.log('Disconnected!');
});

var Player = Class.extend({
    init : function(x,y) {
        this.x = x;
        this.y = y;
    },setX : function(X){
        this.x = x;
    },getX : function(){
        return this.x;
    },setY : function(y){
        this.y = y;
    },getY : function(){
        return this.y;
    },draw : function(){
        context.clearRect(0,350,150);
        context.fillRect(this.x,this.y,15,15);
    },move : function() {
        this.x += 1;
        this.y += 1;
    },moveUP : function() {
        this.y--;
    },moveLEFT : function() {
        this.x--;
    },moveDOWN : function() {
        this.y++;
    },moveRIGHT : function() {
        this.x++;
    }
});

function checkKeyCode(event) {
    var keyCode;
    if(event == null) {
        keyCode = window.event.keyCode;
    } else {
        keyCode = event.keyCode;
    }

    switch(keyCodE) {
        case 38: // UP
            player.moveUP();
            socket.send(Up);
        break;
        case 37: // LEFT
            player.moveLEFT();
            socket.send(LEFT);
        break;
        case 40: //DOWN
            player.moveDOWN();
            socket.send(DOWN);
        break;
        case 39: // RIGHT
            player.moveRIGHT();
            socket.send(RIGHT);
        break;
        default:
        break;

    }

}

function update() {
    player.draw();
}

var FPS = 30;
seTinterval(function() {
    update();
    player.draw();
},1000/FPS);

function init() {
    document.onkeydown = checkKeyCode;
}

init();

和服务器代码

var http = require('http'),io = require('socket.io'),buffer = new Array(),server = http.createServer(function(req,res){
    res.writeHead(200,{'Content-Type': 'text/html'});
    res.end('<h1>Hello world</h1>');
});
server.listen(8080);

var socket = io.listen(server);

socket.on('connection',function(client){

    client.on('message',function(messagE){
        console.log(messagE);
        client.broadcast(messagE);
    })
    client.on('disconnect',function(){

    })

});

当我运行两个客户端时,我与第一个客户端可以移动第二个客户端Rect,并与第二个客户端移动第一个客户端rect和像第三客户端的东西可以移动第一个和第二个客户端。

我有问题如何创建真正的多人?就像是:
打开三个客户端和第一个客户端得到rect1,第二个rect2和最后一个rect3。第一个客户端只能移动rect1,客户端第三个可以只移动rect3。

也许有人有想法吗?我在Google上搜索,但找不到答案。

对不起我的英语

解决方法

首先,查看 http://www.google.com/events/io/2011/sessions/super-browser-2-turbo-hd-remix-introduction-to-html5-game-development.html

它解释了如何使用requestAnimationFrame等等。

第二,游戏状态应该存在于服务器上,并在客户端上镜像。

当玩家点击下一步时,客户端应该只发送消息。服务器应该向所有客户端发送消息,包括采取该操作的客户端。

每个播放器应该作为服务器上的对象存在。当玩家登录时,应该掌握已经在服务器上的每个玩家的状态。

修改客户端代码http://codr.cc/s/d0154536/js

修改后的服务器代码http://codr.cc/s/f96ce1d2/js

大佬总结

以上是大佬教程为你收集整理的多人HTML5,Node.js,Socket.IO全部内容,希望文章能够帮你解决多人HTML5,Node.js,Socket.IO所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。