SOCKET.IO && NODE.JS MULTIPLAYER CLIENT

ELHS

2015-05-29 06:56:59

License: MIT License

Fork: 16

Fav: 6

View: 7976

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 257 lines
HTML 1 lines
CSS 0 lines

SOCKET.IO && NODE.JS MULTIPLAYER, の多人数 , 멀티 플레이어 CLIENT

これはsocket.ioとnode.js.ためのシンプルなマルチクライアントです
一部のプレイヤーデータはuserinfo.io APIを介して取得されます。
GoogleマップのWeb APIも使用されます。

ポップアップで自分の名前を入力します。
SのD Wプレーヤーを移動します。
アプリケーションまたはにオープン複数のタブ、
あなたの友人が同時に参加しています。

(より良い翻訳が認められています。)

_____________________________________________________________

이 socket.io 및 node.js. 에 대한 간단한 멀티 클라이언트입니다
일부 플레이어 데이터 는 userinfo.io API 를 통해 얻어진다 .
Google지도 웹 API는 사용됩니다.

팝업 에 이름을 입력합니다.
S 의 D W 플레이어를 이동합니다.
응용 프로그램이나 열기 여러 탭 ,
친구 가 동시에 가입 해야합니다.

(더 나은 번역 이 허용됩니다.)

_____________________________________________________________

This is a simple multiplayer client for socket.io and node.js.
Some player data is obtained via userinfo.io API.
The Google Maps Web API is also used.

Enter your name in popup.
W A S D to move your player.
Open multiple tabs to the application or,
have your friends join at the same time.

(Better translations are accepted.)

SOCKET.IO && NODE.JS MULTIPLAYER CLIENT

// initialize socket
var socket = io.connect('http://3dp-elhs.rhcloud.com:8000');

var Player = function(playerData){
	this.playerData = playerData;
	var div = document.createElement("DIV");
	div.style.position = 'absolute';
	div.style.width = '128px';
	div.style.height = '128px';
	div.style.backgroundColor = 'pink';
	var h3 = document.createElement("H3");
	this.name = playerData.name;
	h3.innerHTML = this.name;
	h3.style.margin = '20px';
	div.appendChild(h3);
    this.country_div = document.createElement("DIV");
    this.ip_div = document.createElement("DIV");
    this.img_elem = document.createElement("IMG");
    div.appendChild(this.country_div);
    div.appendChild(this.ip_div);
    div.appendChild(this.img_elem);
	this.e = div;
	document.body.appendChild(this.e);
	this.playerData.x = 0;
	this.playerData.y = 0;
	this.playerData.speed = 6;
	this.playerData.staleCount = 0;
    this.playerData.imgURL = '';
    this.playerData.ip = '';
    this.playerData.country = '';
    this.playerData.gameName = 'bar';
    
	
}

Player.prototype ={
	update: function(playerData,otherPlayers){
     // not implemented
		
	},
	move: function(dx,dy){
		this.playerData.x += dx;
		this.playerData.y += dy;
		this.e.style.top = this.playerData.y + "px";
		this.e.style.left = this.playerData.x + "px";
		//console.log('moving player named ' + this.name);
	},
	destroy: function(){
		if(isNode(this.e)){
			document.body.removeChild(this.e);
			this.e = 0;
		}
	}
}

//HELPER
//Returns true if it is a DOM node
function isNode(o){
  return (
    typeof Node === "object" ? o instanceof Node : 
    o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string"
  );
}

var otherPlayers = [];

var myName = '';
	var myPlayer = '';

socket.on('uuid', function(uuid){
		if(myName == ''){
			myName = prompt("名前を入力します。Enter name. 이름을 입력합니다.");

myPlayer = new Player({uuid: uuid, name:myName});

socket.emit('add player', myPlayer.playerData);

GameLoop();

SendMyDataToServer();

console.log('my player created named ' + myPlayer.playerData.name + ' with uuid: ' + uuid + ".");

}
				// presuming the playerData on server has been lost
				socket.emit('add player', myPlayer.playerData);
				console.log('NEW uuid ASSIGNED TO '+myPlayer.playerData.name+'!');
				console.log('NEW SERVERSIDE PLAYER DATA CREATED FOR '+myPlayer.playerData.name+'!');
		}
	});

socket.on('update',function(playersDataFromServer){

// fix this
		if(myName == '') return;

for(var i=0; i<playersDataFromServer.length; i++){
            
            // filter out player data from other games
		    playersDataFromServer = playersDataFromServer.filter(function(p){
			    return p.gameName == 'bar';
		    });
            
            console.log('There are ' + playersDataFromServer.length + ' other players in my game.');

var playerData = playersDataFromServer[i];
			if(typeof playerData === 'undefined') return;
			var found = false;

for(var j=0; j<otherPlayers.length; j++){

// loop over my array of other players
				if(otherPlayers[j].name == playerData.name  && playerData.name != myName){

//otherPlayers[j].update(playerData,otherPlayers);
					if(playerData.destroy){
						otherPlayers[j].destroy();
						console.log('destroying '+ otherPlayers[j].playerData.name);
						return;
					} else{
						if(otherPlayers[j].e == 0){
							console.log('Other player named '+otherPlayers[j].name +' found with e = 0');
							return;
						}
                        if(otherPlayers[j].country_div.innerHTML == '' && playerData.country != ''){
                            console.log('setting country of '+ playerData.name);
                            otherPlayers[j].country_div.innerHTML = playerData.country;
                            console.log('setting ip of '+ playerData.name);
                            otherPlayers[j].ip_div.innerHTML = playerData.ip;
                        }
						otherPlayers[j].e.style.top = playerData.y + 'px';
						otherPlayers[j].e.style.left = playerData.x + 'px';
                        
                        if(otherPlayers[j].img_elem.src == '' && playerData.imgURL != ''){
                            console.log('setting image of '+ playerData.name);
                            console.log(playerData.name +"'s image URL is " + playerData.imgURL);
                            otherPlayers[j].img_elem.src = playerData.imgURL;
                        }

found = true;
					}
					
				}
			}
            
            
            if( typeof playerData !== 'undefined'){
                if(!found && playerData.name != myName){
                    var np = new Player(playerData);
                    otherPlayers.push(np);
                    console.log("New player created named " + np.name + " with uuid: " + playerData.uuid +".");
                    console.log("Now there are " + otherPlayers.length + " other players.");
                }
            }

} // end loop on players data sent from server

}); // end socket.on('update')

// we are currently NOT tracking deltaTime on this loop!
	function GameLoop(){
		myPlayer.update();
		window.requestAnimationFrame(GameLoop);
	}

// send updates on my playerData to the server 10 times per second
	function SendMyDataToServer(){
		socket.emit('sendDataToServer',myPlayer.playerData);
		setTimeout(SendMyDataToServer,100);
	}

Added a userinfo.io feature.

var lat,long;

function userinfoCallback(data) {
      console.log("I can now do awesome things with this beautiful data I just received!");
      console.dir(data);
      lat = data.position.latitude;
      long = data.position.longitude;
    
      myPlayer.img_elem.src = "https://maps.googleapis.com/maps/api/staticmap?center="+lat+","+long+"&zoom=15&size=128x128&maptype=satellite";
      myPlayer.playerData.imgURL = myPlayer.img_elem.src;
      myPlayer.country_div.innerHTML = data.country.name;
      myPlayer.ip_div.innerHTML = data.ip_address;
      myPlayer.playerData.country = data.country.name;
      myPlayer.playerData.ip = data.ip_address;

}

var container = document.createElement('div');
document.body.appendChild(container);
var userinfo = document.createElement('script');
userinfo.src = "http://api.userinfo.io/userinfos?jsonp_callback=userinfoCallback";

setTimeout(function(){
   container.appendChild(userinfo); 
},1400);

SOCKET.IO && NODE.JS MULTIPLAYER CLIENT

## SOCKET.IO && NODE.JS MULTIPLAYER, の多人数 , 멀티 플레이어 CLIENT ____ これはsocket.ioとnode.js.ためのシンプルなマルチクライアントです一部のプレイヤーデータはuserinfo.io APIを介して取得されます。 GoogleマップのWeb APIも使用されます。ポップアップで自分の名前を入力します。 SのD Wプレーヤーを移動します。アプリケーションまたはにオープン複数のタブ、あなたの友人が同時に参加しています。 (より良い翻訳が認められています。) _____________________________________________________________ 이 socket.io 및 node.js. 에 대한 간단한 멀티 클라이언트입니다 일부 플레이어 데이터 는 userinfo.io API 를 통해 얻어진다 . Google지도 웹 API는 사용됩니다. 팝업 에 이름을 입력합니다. S 의 D W 플레이어를 이동합니다. 응용 프로그램이나 열기 여러 탭 , 친구 가 동시에 가입 해야합니다. (더 나은 번역 이 허용됩니다.) _____________________________________________________________ This is a simple multiplayer client for socket.io and node.js. Some player data is obtained via userinfo.io API. The Google Maps Web API is also used. Enter your name in popup. W A S D to move your player. Open multiple tabs to the application or, have your friends join at the same time. (Better translations are accepted.)// initialize socket var socket = io.connect('http://3dp-elhs.rhcloud.com:8000'); var Player = function(playerData){ this.playerData = playerData; var div = document.createElement("DIV"); div.style.position = 'absolute'; div.style.width = '128px'; div.style.height = '128px'; div.style.backgroundColor = 'pink'; var h3 = document.createElement("H3"); this.name = playerData.name; h3.innerHTML = this.name; h3.style.margin = '20px'; div.appendChild(h3); this.country_div = document.createElement("DIV"); this.ip_div = document.createElement("DIV"); this.img_elem = document.createElement("IMG"); div.appendChild(this.country_div); div.appendChild(this.ip_div); div.appendChild(this.img_elem); this.e = div; document.body.appendChild(this.e); this.playerData.x = 0; this.playerData.y = 0; this.playerData.speed = 6; this.playerData.staleCount = 0; this.playerData.imgURL = ''; this.playerData.ip = ''; this.playerData.country = ''; this.playerData.gameName = 'bar'; } Player.prototype ={ update: function(playerData,otherPlayers){ // not implemented }, move: function(dx,dy){ this.playerData.x += dx; this.playerData.y += dy; this.e.style.top = this.playerData.y + "px"; this.e.style.left = this.playerData.x + "px"; //console.log('moving player named ' + this.name); }, destroy: function(){ if(isNode(this.e)){ document.body.removeChild(this.e); this.e = 0; } } } //HELPER //Returns true if it is a DOM node function isNode(o){ return ( typeof Node === "object" ? o instanceof Node : o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string" ); } var otherPlayers = []; var myName = ''; var myPlayer = ''; socket.on('uuid', function(uuid){ if(myName == ''){ myName = prompt("名前を入力します。Enter name. 이름을 입력합니다."); myPlayer = new Player({uuid: uuid, name:myName}); socket.emit('add player', myPlayer.playerData); GameLoop(); SendMyDataToServer(); console.log('my player created named ' + myPlayer.playerData.name + ' with uuid: ' + uuid + "."); document.body.addEventListener('keydown', function(e){ switch(e.which){ //w case 87: { myPlayer.move(0,-myPlayer.playerData.speed); // up } break; //s case 83: { myPlayer.move(0,myPlayer.playerData.speed); // down } break; //a case 65: { myPlayer.move(-myPlayer.playerData.speed,0); // left } break; //d case 68: { myPlayer.move(myPlayer.playerData.speed,0); // right } break; } //end switch for keydown }); } // end if myName = '' else { myPlayer.playerData.uuid = uuid; myPlayer.playerData.staleCount = 0; if(myPlayer.e == 0){ myPlayer = new Player({uuid: uuid, name:myName}); console.log('I created a new player for myself.'); console.log('My name is '+myName+'.'); } // presuming the playerData on server has been lost socket.emit('add player', myPlayer.playerData); console.log('NEW uuid ASSIGNED TO '+myPlayer.playerData.name+'!'); console.log('NEW SERVERSIDE PLAYER DATA CREATED FOR '+myPlayer.playerData.name+'!'); } }); socket.on('update',function(playersDataFromServer){ // fix this if(myName == '') return; for(var i=0; i<playersDataFromServer.length; i++){ // filter out player data from other games playersDataFromServer = playersDataFromServer.filter(function(p){ return p.gameName == 'bar'; }); console.log('There are ' + playersDataFromServer.length + ' other players in my game.'); var playerData = playersDataFromServer[i]; if(typeof playerData === 'undefined') return; var found = false; for(var j=0; j<otherPlayers.length; j++){ // loop over my array of other players if(otherPlayers[j].name == playerData.name && playerData.name != myName){ //otherPlayers[j].update(playerData,otherPlayers); if(playerData.destroy){ otherPlayers[j].destroy(); console.log('destroying '+ otherPlayers[j].playerData.name); return; } else{ if(otherPlayers[j].e == 0){ console.log('Other player named '+otherPlayers[j].name +' found with e = 0'); return; } if(otherPlayers[j].country_div.innerHTML == '' && playerData.country != ''){ console.log('setting country of '+ playerData.name); otherPlayers[j].country_div.innerHTML = playerData.country; console.log('setting ip of '+ playerData.name); otherPlayers[j].ip_div.innerHTML = playerData.ip; } otherPlayers[j].e.style.top = playerData.y + 'px'; otherPlayers[j].e.style.left = playerData.x + 'px'; if(otherPlayers[j].img_elem.src == '' && playerData.imgURL != ''){ console.log('setting image of '+ playerData.name); console.log(playerData.name +"'s image URL is " + playerData.imgURL); otherPlayers[j].img_elem.src = playerData.imgURL; } found = true; } } } if( typeof playerData !== 'undefined'){ if(!found && playerData.name != myName){ var np = new Player(playerData); otherPlayers.push(np); console.log("New player created named " + np.name + " with uuid: " + playerData.uuid +"."); console.log("Now there are " + otherPlayers.length + " other players."); } } } // end loop on players data sent from server }); // end socket.on('update') // we are currently NOT tracking deltaTime on this loop! function GameLoop(){ myPlayer.update(); window.requestAnimationFrame(GameLoop); } // send updates on my playerData to the server 10 times per second function SendMyDataToServer(){ socket.emit('sendDataToServer',myPlayer.playerData); setTimeout(SendMyDataToServer,100); } /* Added a userinfo.io feature. */ var lat,long; function userinfoCallback(data) { console.log("I can now do awesome things with this beautiful data I just received!"); console.dir(data); lat = data.position.latitude; long = data.position.longitude; myPlayer.img_elem.src = "https://maps.googleapis.com/maps/api/staticmap?center="+lat+","+long+"&zoom=15&size=128x128&maptype=satellite"; myPlayer.playerData.imgURL = myPlayer.img_elem.src; myPlayer.country_div.innerHTML = data.country.name; myPlayer.ip_div.innerHTML = data.ip_address; myPlayer.playerData.country = data.country.name; myPlayer.playerData.ip = data.ip_address; } var container = document.createElement('div'); document.body.appendChild(container); var userinfo = document.createElement('script'); userinfo.src = "http://api.userinfo.io/userinfos?jsonp_callback=userinfoCallback"; setTimeout(function(){ container.appendChild(userinfo); },1400); <script src="http://cdn.socket.io/socket.io-1.3.5.js"></script>

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

ポップアップで自分の名前を入力します。
    SのD Wプレーヤーを移動します。
    アプリケーションまたはにオープン複数のタブ、
    あなたの友人が同時に参加しています。
    
    (より良い翻訳が認められています。)
    
    _____________________________________________________________
    
    이 socket.io 및 node.js. 에 대한 간단한 멀티 클라이언트입니다
    일부 플레이어 데이터 는 userinfo.io API 를 통해 얻어진다 .
    Google지도 웹 API는 사용됩니다.

팝업 에 이름을 입력합니다.
    S 의 D W 플레이어를 이동합니다.
    응용 프로그램이나 열기 여러 탭 ,
    친구 가 동시에 가입 해야합니다.
    
    (더 나은 번역 이 허용됩니다.)
    
    _____________________________________________________________
    
    This is a simple multiplayer client for socket.io and node.js.
    Some player data is obtained via userinfo.io API.
    The Google Maps Web API is also used.
    
    Enter your name in popup.
    W A S D to move your player.
    Open multiple tabs to the application or,
    have your friends join at the same time.
    
    (Better translations are accepted.)

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

ELHS

URL
http://guam.github.io/

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/z7Bx/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

tjoen

djankey

nukobito

geta

FizX:

nodeWell done. This is helpful for me to practice.

ELHS:

application art&design game html5_elements&api library&test multiplayer node.js socket.io user_interface websocketsThis gives me a great idea for a game!

Forked

sort by

forked: SOCKET.IO && NODE.JS M

Root

258/1/10

forked: SOCKET.IO && NODE.JS M

zacharyzadak

258/1/10

forked: SOCKET.IO && NODE.JS M

Amenduin

258/1/10

mike

valgore69

257/1/10

SOCKET.IO && NODE.JS MULTIPLAYER CLIENT

SOCKET.IO && NODE.JS MULTIPLAYER, の多人数 , 멀티 플레이어 CLIENT

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by

Forked