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