个人中心
gpt4 book ai didi

node.js - Node JS html 游戏

转载 作者：太空宇宙 更新时间：2023-11-04 01:14:26 25 4
gpt4 key购买 nike 

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

我必须将左上角的宽度和高度值传递给服务器，以便该值反射(reflect)在另一个客户端上。举例来说，两个客户端是 Chrome 和 Mozilla，每当用户按下向上、向下、向左或向右时，相应的矩形就必须移动。同样，其他用户也应该发生这种情况。

我不知道如何传递这些值。抱歉我这么天真；我是 node.js 的初学者。

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

最佳答案

请参阅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 并将其发送回绘制的位置。

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

关于node.js - Node JS html 游戏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12226480/

25 4 0
文章推荐： 来自模板的 Node.js 异步调用
文章推荐： css - 更改嵌入为网络聊天的 QnA Bot 的 Css
文章推荐： html - 为什么悬停时不透明度的变化会使第二行的 flex children 移动/改变？
文章推荐： python - 在 python 中合并文件时双引号不断出现在 csv 中，如何删除？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com