节点JS的HTML游戏

<!doctype html> 
<html> 
<head> 
    <script src="http://localhost:8000/socket.io/socket.io.js"></script> 
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
    <script> 
     var name='';     
     var socket = io.connect('http://localhost:8000'); 
     $(document).ready(function() { 
      //var app = require('http').createServer(handler), 
      //io = require('socket.io').listen(app); 
      //app.listen(8000); 

      //var url = 'http://localhost:8000'; 
      //var socket = io.connect(url); 

      //socket.connect(); 
      //socket.on('movement', function() {socket.send(); 
      //console.log('Connected!');}); 

      while (name == '') { name = prompt("What's your name?",""); } 

       var left =5; 
       var top = 5; 
       var width =20; 
       var height =20; 

       var rcolor= get_random_color(); 
       var ctx = $('#cgame')[0].getContext("2d"); 
       ctx.fillStyle = rcolor;   
       ctx.fillRect(left, top, width, height); 
       ctx.lineWidth = 10; 
      $(document).keydown(onkeydown); 
      socket.emit('movement', function onkeydown(left,top, width, height) 
      { 
      var kycode; 

       if (evt!= null) 
       { 
       kycode = evt.keyCode; 
       ctx = $('#cgame')[0].getContext("2d");  
       switch(kycode) 
          { 
        case 37: //left 
         if(left >> ctx.left){ 
         call: clear(); 
         left--; 
         call:draw(); 
         //alert("Hi left"); 
         break; 
         } 
        case 38: //up 
         if(top >> ctx.top) 
         { 
         call: clear(); 
         top--; 
         call:draw(); 
         //alert("Hi Up"); 
         break; 
         } 
          case 39://right 
         if((left+width) << (ctx.width+ctx.left)) 
         { 
         call: clear(); 
         left++; 
         call:draw(); 
         //alert("Hi right"); 
         break; 
         } 
        case 40: 
         { 
         call: clear(); 
         top++; 
         call:draw(); 
         //alert("Hi down"); 
         break; 
         } 
          Default: 
         { 
         alert("Hi"); 
         break; 
         } 
        }  
       } 

      } 
      ); 

      function get_random_color() 
      { 
       var letters = 'ABCDEF'.split(''); 
      var color = '#'; 
      for (var i = 0; i < 6; i++) 
      { 
      color += letters[Math.round(Math.random() * 15)]; 
      } 
       return color; 
      } 

      function clear() 
      { 
      ctx.width = ctx.width; 
      ctx.height = ctx.height; 
      ctx = $('#cgame')[0].getContext("2d"); 
      ctx.clearRect(0,0,cgame.width,cgame.height); 
      } 

      function draw() 
      { 
       ctx.width = ctx.width; 
      ctx.height = ctx.height; 
      ctx = $('#cgame')[0].getContext("2d"); 
      ctx.fillRect(left, top, width, height); 
       } 

      socket.emit('register', name); 

      $('#Name').hide(); 
      $('#Game').hide(); 
      $('#start').hide(); 
      }); 
      </script> 
     </head> 
     <body> 
      <label id="Game">Welcome to Node JS Gaming</label> 
      <input type='text' id ='Name'> 
      <input type='button' id="start" value= 'login' Onclick="welcome()" > 
      <div> 
       <canvas id= "cgame" style="border:1px solid #000000; width: 100%; height: 100%;"; onkeydown ="onkeydown"></canvas> 
      </div> 
     </body> 
    </html>

尝试插座代码：节点JS的HTML游戏

var io = require('socket.io').listen(8000); 
io.sockets.on('connection', function (socket) 
{ 
socket.on('movement',function(left,top, width, height){}); 
socket.broadcast.emit('movement', { 

     }); 
    }); 

} 
); 

//io.sockets.emit();

我有使得该值反映另一个客户端上的左顶的宽度和高度的值传递给服务器。比如说，两个客户端是Chrome和Mozilla，无论用户按下上下左右哪个矩形都必须移动。同样，它也应该发生在其他用户身上。

我不知道如何传递值。对不起，太天真了;我是node.js的初学者。

请让我知道什么适当的代码是服务器端。

来源

2012-09-01 balaji dileep kumar

请参阅this question关于游戏，是非常相似的，你正在努力实现

编辑什么：刚刚意识到这个问题忽略了实际的多人游戏部分。我的代码的执行情况如下（不完整的代码，只有重要的位）

客户端：也

draw : function(){ 
    context.fillStyle = this.color; // context is canvas.getContext('2d'); 
    context.fillRect(this.x, this.y, this.width, this.height); 
}

现在在客户端：

socket.on('message', function(msg) { 
    msg = JSON.parse(msg); 
    players[msg.player] = new Player(msg.name, msg.x, msg.y, msg.width, msg.height, msg.color); 
});

在Player类你可以有：

function update() { 
    context.clearRect(0, 0, 700, 300); // clearing the canvas (width = 700, height = 300) 
    for(var player in players) { 
     players[player].draw(); 
    } 
} 
var FPS = 60; 
setInterval(update, 1000/FPS);

根据我的经验，你最好做实际的移动玩家在服务器端进行协调。因此，客户端按下Left - >通过套接字 - >服务器发送x调整为x- = 1，然后将其发回到绘制的地方。

请注意，这是一个原始版本的代码需要

来源

2012-09-05 13:22:20 SlashmanX

节点JS的HTML游戏

回答

相关问题