节点的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 = '0123456789ABCDEF'.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>

尝试套接字代码： 

 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的初学者。

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

请看这个问题关于一个游戏，是非常类似于你想要实现的

编辑：只是意识到，这个问题省略了实际的多人部分。 我的代码实现如下（不是完整的代码，只有重要的位）

客户端： 

 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类中： 

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

现在在客户端也可以有： 

 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，然后将其发回到绘制的地方。

请注意，这是所需代码的粗略版本

Interesting Posts