我尝试使用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等等。
第二,游戏状态应该存在于服务器上,并在客户端上镜像。
当玩家点击下一步时,客户端应该只发送消息。服务器应该向所有客户端发送消息,包括采取该操作的客户端。
每个播放器应该作为服务器上的对象存在。当玩家登录时,应该掌握已经在服务器上的每个玩家的状态。