多人HTML5,Node.js,Socket.IO

前端之家收集整理的这篇文章主要介绍了多人HTML5,Node.js,Socket.IO前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我尝试使用HTML5 Canvas创建简单的多播放器,JavaScript(也使用John Resig简单继承库)和带有Socket.IO的Node.js。
我的客户端代码
  1. var canvas = document.getElementById('game');
  2. var context = canvas.getContext('2d');
  3. var socket = new io.Socket('127.0.0.1',{port: 8080});
  4.  
  5. var player = null;
  6.  
  7. var UP = 'UP',LEFT = 'LEFT',DOWN = 'DOWN',RIGHT = 'RIGHT';
  8.  
  9. socket.connect();
  10.  
  11. socket.on('connect',function() {socket.send();
  12. console.log('Connected!');
  13. player = new Player(50,50);
  14. });
  15.  
  16. socket.on('message',function(msg) {
  17. if(msg == 'UP') {
  18. player.moveUP();
  19. } else if(msg == 'LEFT') {
  20. player.moveLEFT();
  21. } else if(msg == 'DOWN') {
  22. player.moveDOWN();
  23. } else if(msg == 'RIGHT') {
  24. player.moveRIGHT();
  25. } else {
  26.  
  27. }
  28. });
  29.  
  30. socket.on('disconnect',function() {
  31. console.log('Disconnected!');
  32. });
  33.  
  34. var Player = Class.extend({
  35. init : function(x,y) {
  36. this.x = x;
  37. this.y = y;
  38. },setX : function(x){
  39. this.x = x;
  40. },getX : function(){
  41. return this.x;
  42. },setY : function(y){
  43. this.y = y;
  44. },getY : function(){
  45. return this.y;
  46. },draw : function(){
  47. context.clearRect(0,350,150);
  48. context.fillRect(this.x,this.y,15,15);
  49. },move : function() {
  50. this.x += 1;
  51. this.y += 1;
  52. },moveUP : function() {
  53. this.y--;
  54. },moveLEFT : function() {
  55. this.x--;
  56. },moveDOWN : function() {
  57. this.y++;
  58. },moveRIGHT : function() {
  59. this.x++;
  60. }
  61. });
  62.  
  63. function checkKeyCode(event) {
  64. var keyCode;
  65. if(event == null) {
  66. keyCode = window.event.keyCode;
  67. } else {
  68. keyCode = event.keyCode;
  69. }
  70.  
  71. switch(keyCode) {
  72. case 38: // UP
  73. player.moveUP();
  74. socket.send(UP);
  75. break;
  76. case 37: // LEFT
  77. player.moveLEFT();
  78. socket.send(LEFT);
  79. break;
  80. case 40: //DOWN
  81. player.moveDOWN();
  82. socket.send(DOWN);
  83. break;
  84. case 39: // RIGHT
  85. player.moveRIGHT();
  86. socket.send(RIGHT);
  87. break;
  88. default:
  89. break;
  90.  
  91. }
  92.  
  93. }
  94.  
  95. function update() {
  96. player.draw();
  97. }
  98.  
  99. var FPS = 30;
  100. setInterval(function() {
  101. update();
  102. player.draw();
  103. },1000/FPS);
  104.  
  105. function init() {
  106. document.onkeydown = checkKeyCode;
  107. }
  108.  
  109. init();

和服务器代码

  1. var http = require('http'),io = require('socket.io'),buffer = new Array(),server = http.createServer(function(req,res){
  2. res.writeHead(200,{'Content-Type': 'text/html'});
  3. res.end('<h1>Hello world</h1>');
  4. });
  5. server.listen(8080);
  6.  
  7. var socket = io.listen(server);
  8.  
  9. socket.on('connection',function(client){
  10.  
  11. client.on('message',function(message){
  12. console.log(message);
  13. client.broadcast(message);
  14. })
  15. client.on('disconnect',function(){
  16.  
  17. })
  18.  
  19. });

当我运行两个客户端时,我与第一个客户端可以移动第二个客户端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相关文章