节点 JS html 游戏答案

【问题标题】：Node JS html Game节点 JS html 游戏
【发布时间】：2012-08-26 22:17:36
【问题描述】：

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

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

【问题讨论】：

标签： node.js socket.io drawrectangle

【解决方案1】：

请参阅this question，了解与您想要实现的目标非常相似的游戏

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

客户端：

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);

根据我的经验，您最好在服务器端实际移动玩家坐标。所以客户端按下左键 -> 通过套接字发送 -> 服务器将玩家 x 调整为 x-=1 并将其发送回然后绘制的位置。

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

【讨论】：