2013-06-29 47 views
0

我是使用Socket.io編寫遊戲的,我有問題,當服務器創建新的img(新字符)時,我只能在一臺計算機上看到它。 我想在這種情況下,對於每個連接計算機上看到更好的圖像 相同數量的,如果你看看這個 感謝每個幫助Socket.io遊戲。如何添加新字符

SERVER:

var handler = function(req, res) { 
    fs.readFile('./index.html', function (err, data) { 
     if(err) throw err; 
     res.writeHead(200); 
     res.end(data); 
    }); 
} 
var app = require('http').createServer(handler); 
var io = require('socket.io').listen(app); 
var fs = require('fs'); 
var port = 3250; 

app.listen(port); 
var postacie = []; 
var ile=0; 

// socket.io 
io.sockets.on('connection', function (socket) { 
    postacie[ile]=createChar(); 
    ile++; 
    io.sockets.emit("tworz", postacie); 


    socket.on("disconnect", function() 
    { 
     postacie.splice(0, 1); 
     io.sockets.emit("tworz", postacie); 
    }) 

}); 


function createChar() 
{ 
    var postac = { 
     src: "http://img703.imageshack.us/img703/1416/2st.gif", 
     id: "character" 
    } 
    return postac; 
} 

客戶:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Real tie game</title> 
     <script src="socket.io/socket.io.js"></script> 
     <script type="text/javascript"> 
      window.onload = function() { 

       var socket = io.connect('http://localhost:3250'); 

       socket.on("tworz", function(data) 
       { 
        for (var i=0; i < data.length; i++) { 
        var element = document.createElement('img'); 
        element.src = data[i].src; 
        element.id = data[i].id; 

        var body = document.getElementsByTagName('body') 
        body.appendChild(element); 
        }; 

       }) 

      } 
     </script> 
    </head> 
    <body> 

    </body> 
</html> 

,它看起來像這樣 http://img42.imageshack.us/img42/4793/q10w.jpg

回答

0

我重構你的代碼位。希望它可以幫助您在正確的方向移動:

主要思想是用3個基本信息:

  1. 加盟 - 當新的客戶端連接服務器發送信息關於新手到所有其他客戶端;
  2. list - 當新客戶端連接服務器時,向他發送已連接的客戶端列表;
  3. 休假 - 當有人斷開連接斷開連接客戶端的服務器發送ID

服務器:

var handler = function(req, res) { 
    fs.readFile('./index.html', function (err, data) { 
     if(err) throw err; 
     res.writeHead(200); 
     res.end(data); 
    }); 
} 

var app = require('http').createServer(handler); 
var io = require('socket.io').listen(app); 
var fs = require('fs'); 
var port = 3250; 

app.listen(port); 
var postacie = []; 
var idGenerator = 0; 

// socket.io 
io.sockets.on('connection', function (socket) { 
    var pId = idGenerator++; 
    socket.emit("list", postacie); 

    var postac = createChar(pId); 
    postacie.push(postac); 
    io.sockets.emit("join", postac); 

    socket.on("disconnect", function() 
    { 
     var sId = "character" + pId; 
     for (var i = 0,n=postacie.length; i < n; ++i) { 
      var postac = postacie[i]; 
      if (postac.id == sId) { 
       io.sockets.emit("leave", {id:postac.id}); 
       postacie.splice(i, 1); 
       break; 
      } 
     } 
    }); 

}); 


function createChar(id) 
{ 
    var postac = { 
     src: "http://img703.imageshack.us/img703/1416/2st.gif", 
     id: "character" + id 
    }; 
    return postac; 
} 

客戶:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Real tie game</title> 
     <script src="/socket.io/socket.io.js"></script> 
     <script type="text/javascript"> 
      window.onload = function() { 

       var socket = io.connect('http://localhost:3250'); 

       socket.on("join", function(data) 
       { 
        var element = document.createElement('img'); 
        element.src = data.src; 
        element.id = data.id; 

        var body = document.getElementsByTagName('body')[0]; 
        body.appendChild(element); 

       }); 
       socket.on("list", function(data) 
       { 
        for (var i=0; i < data.length; i++) { 
         var element = document.createElement('img'); 
         element.src = data[i].src; 
         element.id = data[i].id; 

         var body = document.getElementsByTagName('body')[0]; 
         body.appendChild(element); 
        }; 

       }); 
       socket.on("leave", function(data) 
       { 
        var element = document.getElementById(data.id); 
        if (element) 
         element.parentNode.removeChild(element); 
       }); 

      } 
     </script> 
    </head> 
    <body> 

    </body> 
</html> 
+0

謝謝男子<3 <3 – user2534045