大佬教程收集整理的这篇文章主要介绍了多人HTML5,Node.js,Socket.IO,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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上搜索,但找不到答案。
对不起我的英语
它解释了如何使用requestAnimationFrame等等。
第二,游戏状态应该存在于服务器上,并在客户端上镜像。
当玩家点击下一步时,客户端应该只发送消息。服务器应该向所有客户端发送消息,包括采取该操作的客户端。
每个播放器应该作为服务器上的对象存在。当玩家登录时,应该掌握已经在服务器上的每个玩家的状态。
以上是大佬教程为你收集整理的多人HTML5,Node.js,Socket.IO全部内容,希望文章能够帮你解决多人HTML5,Node.js,Socket.IO所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。