Question

我正在开发node.js和socket.io以及jquery中的游戏。主要时间有两个用户使用不同的位置和不同的浏览器登录到该站点。当第一个用户登录玩游戏时，应该出现一条消息＆＃34; Your Turn＆＃34;他将打30秒。轮到他了。 30秒后轮到第二个使用不同位置登录的用户＆＃34;轮到＆＃34;完成30秒后。第二个用户轮到第一个用户，这个过程将继续。

这是我在node.js中的app.js

 var express = require('express')
    , app = express()
    , http = require('http')
    , server = http.createServer(app)
    , io = require('socket.io').listen(server);
    server.listen(8080);
    app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
    });
   var users = {};

    io.sockets.on('connection', function(socket){
    socket.on('addUser', function(user){
    socket.user = user;
    users[user] = user;
    socket.emit('updateUser',
    socket.user + ' has connected to this game');
    });
    socket.on('playGame1', function(data){
    io.sockets.emit('update',  data);
    });
    });

这是我的index.html

<html>
    <head>
        <title>Game Development In Node.js</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="/socket.io/socket.io.js"></script>
        <script type="text/javascript">
        var socket = io.connect('http://localhost:8080');
        //var left = {'left': '-=100'};
        socket.on('connect', function(){    
            socket.emit('addUser', prompt('Please Enter your username'));
        });

        socket.on('update',function (data){
            console.log(data);
            $('#arrow').css('left',data.left);
            $('#arrow').css('top',data.top);
            if(data.top == 50){
                alert("you won");
            }
        });

        socket.on('updateUser', function(user){         
            $('#displayUser').append('<b>'+ user +'</b>');  
        });

    //  var auto_refresh = setInterval(function (){
                    //          $('#loadPage').load( alert('Your Turn') );
                    //      }, 20000);


            $(document).ready(function(){
                $(document).keydown(function(e) {
                    if(e.which == 37){
                        $('#arrow').css({'left': '-=100'});
                    }
                    if(e.which == 38){
                        $('#arrow').css({ 'top': '-=100' });
                    }
                    if(e.which == 39){
                        $('#arrow').css({ 'left': '+=100' });
                    }
                    if(e.which == 40){
                        $('#arrow').css({ 'top': '+=100' });                        
                    }
                    //e.preventDefault(); // prevent the default action (scroll / move caret)

                    var data = {left:$('#arrow').position().left,top:$('#arrow').position().top};
                                socket.emit('playGame1', data);
                });
            });
        </script>
        <style>
            #arrowContainer{
                height: 500px;
                width: 500px;
                border: 1px solid #000;
                margin: 0px auto;
                padding: 0px;
                position: relative;
                overflow: hidden;
            }
            #arrow{
                height: 10px;
                width: 10px;
                margin: 0px auto;
                padding: 0px;
                position: absolute;
                top: 250px;
                left: 0;
                bottom: 0;
                right: 0;
            }
            #displayUser{
                float: none;
                margin: 0 auto;
                width: 500px;
                height: auto;
            }
            #result{
                height: 10px;
                width: 10px;
                margin: 0px auto;
                padding: 0px;
                position: absolute;
                top: 50px;
                left: 0;
                bottom: 0;
                right: 0;
            }
        </style>
    </head>
    <body id="loadPage">
        <div id="displayUser"></div>
        <div id="arrowContainer">
            <div id="result">+</div>
            <div id="arrow">*</div>
        </div>
    </body>
</html>

Answer 1

您的服务器需要在此处完成更多工作。至少，它可以让第一个加入的玩家知道他们是首发球员。我在一个名为Cake Rush的游戏中做到了这一点。游戏中的第一个玩家负责生成第一个目标。当用户加入房间时发送该信号。这是一些示例代码：

socket.on('joinRoom', function (data) {
  // find the room being requested
  var room = _.find(rooms, {id: data.roomId});

  // verify that player can join room:
  // room must exist and have less than 4 players
  if (!room || room.playerIds.length >= 4) {
    // send refusal
    socket.emit('connectionRefused');
    return;
  }
  var shouldGenerateFirstCake;
  if (room.playerIds.length === 0){
    shouldGenerateFirstCake = true
  }

  // register player with room
  room.playerIds.push(socket.id);
  socket.join(room.id);

  // send verification that room was joined to the player with room id
  socket.emit('roomJoined', {roomId: room.id, shouldGenerateFirstCake: shouldGenerateFirstCake});
});

一旦你知道谁先走了，你应该能够通过以下几种方式之一来同步计时器：a）服务器上的计时器（这可能在服务器性能上更难），b）玩家的计时器轮到它自动向另一个通过控制的玩家发起套接字事件，c）两个玩家都有独立的计时器（这可能是导致竞争条件和其他问题的坏主意）。我可能先尝试选项b。

这是指向我的服务器代码的其余部分的链接：https://github.com/azurelogic/CakeRush/blob/master/controllers/cakerush.js

用户转向node.js和socket.io以及jquery的简单游戏开发

1 个答案: