2012-04-24 8 views
2

私はWeb開発とWeb技術に慣れていません。学習のために、私はwebsocketでマルチプレイヤーゲームを創造しようとしています。ゲームは「大きな言葉を作ろう」です。ここでは、ベースからユーザーとその文字WINの大きな単語を持つユーザーに「ランダム」な文字を取得するコードを記述します。socketIOで開発しているWebゲーム

私は、コードを持っているが、私はsocket.io APIを介してベースと単語作成するための手紙を与える

コードの接続とseriuos問題を抱えている:

<div id="s">STOP</div> 

<div id="L1"></div> 
<div id="L2"></div> 
<div id="L3"></div> 
<div id="L4"></div> 
<div id="L5"></div> 

$a="AGHBV"; 

v=setInterval(function(){for(i=0;i<6;i++){$("#L"+i).html(String.fromCharCode(Math.floor(Math.random()*26+65)))};},500);$("#s").click(function(){clearInterval(v);setTimeout(function(){for(j=0;j<$a.length;j++){$("#L"+(j+1)).html($a[j]);}},250);}); 

STOP divの上のユーザー]をクリックしを彼らは$手紙を手に入れます...あなたがPHP経由でベースから$を得るときにはとても簡単ですが、socket.io経由でサーバからクライアントに$を送る方法

for socket.io私はいくつか持っていますコードが、私は正確に動作する必要があるか分からない。ここで

は、ソケットクライアントファイルです:

// Require HTTP module (to start server) and Socket.IO 
var http = require('http'), io = require('socket.io'); 

// Start the server at port 8080 
var server = http.createServer(function(req, res){ 

    // Send HTML headers and message 
    res.writeHead(200,{ 'Content-Type': 'text/html' }); 
    res.end('<h1>Hello Socket Lover!</h1>'); 
}); 
server.listen(8080); 

// Create a Socket.IO instance, passing it our server 
var socket = io.listen(server); 

// Add a connect listener 
socket.on('connection', function(client){ 

    // Create periodical which ends a message to the client every 5 seconds 
    var interval = setInterval(function() { 
     client.send('This is a message from the server! ' + new Date().getTime()); 
    },5000); 

    // Success! Now listen to messages to be received 
    client.on('message',function(event){ 
     console.log('Received message from client!',event); 
    }); 
    client.on('disconnect',function(){ 
     clearInterval(interval); 
     console.log('Server has disconnected'); 
    }); 

}); 

私は私が必要なものを得るために行うために必要なもの:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     * { margin:0; padding:0; font-size:11px; font-family:arial; color:#444; } 
     body { padding:20px; } 
     #message-list { list-style-type:none; width:300px; height:300px; overflow:auto; border:1px solid #999; padding:20px; } 
     #message-list li { border-bottom:1px solid #ccc; padding-bottom:2px; margin-bottom:5px; } 
     code { font-family:courier; background:#eee; padding:2px 4px; } 
    </style> 
    <script src="http://cdn.socket.io/stable/socket.io.js"></script> 
    <script> 

     // Create SocketIO instance 
     var socket = new io.Socket('localhost',{ 
      port: 8080 
     }); 
     socket.connect(); 

     // Add a connect listener 
     socket.on('connect',function() { 
      log('<span style="color:green;">Client has connected to the server!</span>'); 
     }); 
     // Add a connect listener 
     socket.on('message',function(data) { 
      log('Received a message from the server: ' + data); 
     }); 
     // Add a disconnect listener 
     socket.on('disconnect',function() { 
      log('<span style="color:red;">The client has disconnected!</span>'); 
     }); 

     // Sends a message to the server via sockets 
     function sendMessageToServer(message) { 
      socket.send(message); 
      log('<span style="color:#888">Sending "' + message + '" to the server!</span>'); 
     } 

     // Outputs to console and list 
     function log(message) { 
      var li = document.createElement('li'); 
      li.innerHTML = message; 
      document.getElementById('message-list').appendChild(li); 
     } 

     /* 
     // Create a socket instance 
     socket = new WebSocket('ws://localhost:8080'); 

     // Open the socket 
     socket.onopen = function(event) { 
      console.log('Socket opened on client side',event); 

      // Listen for messages 
      socket.onmessage = function(event) { 
       console.log('Client received a message',event); 
      }; 

      // Listen for socket closes 
      socket.onclose = function(event) { 
       console.log('Client notified socket has closed',event); 
      }; 

     }; 
     */ 

    </script> 
</head> 
<body> 

    <p>Messages will appear below (and in the console).</p><br /> 
    <ul id="message-list"></ul> 
    <ul style="margin:20px 0 0 20px;"> 
     <li>Type <code>socket.disconnect()</code> to disconnect</li> 
     <li>Type <code>socket.connect()</code> to reconnect</li> 
     <li>Type <code>sendMessageToServer('Your Message')</code> to send a message to the server</li> 
    </ul> 

</body> 
</html> 

、ここではソケット・サーバ・ファイルです。私のスクリプトでsocketIOを実装して、サーバをクライアントから$にする方法...そのサーバをどうやってa $をベースからクライアントに送りますか?

(私の英語のため申し訳ありませんが、私はウェブ技術にbeginerだ。些細な問題についてとても申し訳ありません)

+0

もここで働いているバージョン:http://jsfiddle.net/ Hx28c/3/ –

+0

誰も知らない? ... –

+1

あなたは基本的に言った、ここに私のコードは何ですか、何が間違っていますか?通常、関連するコードスニペットのみを使用して、非常に具体的な質問をします。これは非常に漠然とした質問であり、見通すべきコードの小説があります。 – dqhendricks

答えて

2

ここでは、サーバからクライアントおよびクライアントへのサーバーにメッセージを送信する方法についての良い例です。複数のクライアントを持つゲームがあるため、この資料はあなたに適しています。だから私は最良の選択肢は、クライアント間でメッセージをブロードキャストすることだと思う。サーバーで

..クライアントで

io.sockets.on('connection', function (socket) { 
    console.log('Socket Created...'); 

     socket.on('sendMessage', function (data) { 
     socket.broadcast.emit('messageRecieve', data); 
    }); 
}); 

、ここで

socket.on('messageRecieve', function (data) {//receive broadcasted message from server 
     AppendMessage(data.msg); 
    }); 

    function SendMessage() {// sends the message from client to the server may be on click 
     var message = document.getElementById('text').value; 
     socket.emit('sendMessage', { msg: message }); 
     AppendMessage(message); 
    } 

は、この上の詳細をである、 http://codetuner.blogspot.com/2012/04/real-time-web-sample-using-socketio-and.html

+0

だから私はこのコードで自分のコードを変更する必要がありますし、仕事になるでしょう –

+0

私はあなたがurの方法でこれを整理する必要があります.. :) –

+0

大丈夫、私はしようとしますが、私はそうは思わない...どこに私のコードにこれを追加する必要がありますか...助けてください...そしてあなたを退屈してすみませんが、私はこのtehnologyでとても面白いです –