使用socket.io进行简单的多人游戏开发

时间:2012-05-09 19:50:20

标签: javascript jquery socket.io

使用socket.io进行多人游戏 - 用字母表示更大的单词

我的游戏需要如何运作:

  1. 用户点击停止然后他们会收到一个字母来创建一个比其他玩家更大的单词!

  2. 当用户创建一个单词然后单击“提交”按钮并发送到服务器和服务器时选择了更大的单词...尚未完成

  3. 这里我们必须允许两个玩家使用socket.io

  4. 进行游戏

    以下是基本ONE玩家游戏模式的代码:http://jsfiddle.net/9rtFa/14/

    同样在游戏中有玩家聊天beetwen的实时聊天。

    app.js

    var app = require('express').createServer()
    var io = require('socket.io').listen(app);
    
    app.listen(8080);
    
    // routing
    app.get('/', function (req, res) {
      res.sendfile(__dirname + '/index.html');
    });
    
    // usernames which are currently connected to the chat
    var usernames = {};
    
    io.sockets.on('connection', function (socket) {
    
        // when the client emits 'sendchat', this listens and executes
        socket.on('sendchat', function (data) {
            // we tell the client to execute 'updatechat' with 2 parameters
            io.sockets.emit('updatechat', socket.username, data);
        });
    
        // when the client emits 'adduser', this listens and executes
        socket.on('adduser', function(username){
            // we store the username in the socket session for this client
            socket.username = username;
            // add the client's username to the global list
            usernames[username] = username;
            // echo to client they've connected
            socket.emit('updatechat', 'SERVER', 'you have connected');
            // echo globally (all clients) that a person has connected
            socket.broadcast.emit('updatechat', 'SERVER', username + ' has connected');
            // update the list of users in chat, client-side
            io.sockets.emit('updateusers', usernames);
        });
    
        // when the user disconnects.. perform this
        socket.on('disconnect', function(){
            // remove the username from global usernames list
            delete usernames[socket.username];
            // update list of users in chat, client-side
            io.sockets.emit('updateusers', usernames);
            // echo globally that this client has left
            socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected');
        });
    });
    

    和index.html

    <script src="/socket.io/socket.io.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
        var socket = io.connect('http://localhost:8080');
    
        // on connection to server, ask for user's name with an anonymous callback
        socket.on('connect', function(){
            // call the server-side function 'adduser' and send one parameter (value of prompt)
            socket.emit('adduser', prompt("What's your name?"));
        });
    
        // listener, whenever the server emits 'updatechat', this updates the chat body
        socket.on('updatechat', function (username, data) {
            $('#conversation').append('<b>'+username + ':</b> ' + data + '<br>');
        });
    
        // listener, whenever the server emits 'updateusers', this updates the username list
        socket.on('updateusers', function(data) {
            $('#users').empty();
            $.each(data, function(key, value) {
                $('#users').append('<div>' + key + '</div>');
            });
        });
    
        // on load of page
        $(function(){
            // when the client clicks SEND
            $('#datasend').click( function() {
                var message = $('#data').val();
                $('#data').val('');
                // tell server to execute 'sendchat' and send along one parameter
                socket.emit('sendchat', message);
            });
    
            // when the client hits ENTER on their keyboard
            $('#data').keypress(function(e) {
                if(e.which == 13) {
                    $(this).blur();
                    $('#datasend').focus().click();
                }
            });
        });
    
    </script>
    <div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
        <b>USERS</b>
        <div id="users"></div>
    </div>
    <div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;">
        <div id="conversation"></div>
        <input id="data" style="width:200px;" />
        <input type="button" id="datasend" value="send" />
    </div>
    

    现在我需要允许两个玩家实时使用socket.io进行游戏 - 聊天我已经拥有但是如何将socket.io实现到我的游戏 - 代码我放在jsfiddle上面

    请帮助了解socket.io游戏开发。

    我认为这对于理解用于创建游戏的socket.io来说一定是一个很好的教程。 我认为这对许多人来说会非常有趣......

1 个答案:

答案 0 :(得分:0)

你的问题很难理解,所以我不确定你要求的是什么,除了一般的建议。

我做了一个快速搜索,找到了这个Multiplayer HTML5, Node.js, Socket.IO

可能会有帮助吗?