forked: SOCKET.IO && NODE.JS MULTIPLAYER CLIENT

Readme
JavaScript 246 lines
HTML 1 lines
CSS 10 lines

forked: SOCKET.IO && NODE.JS MULTIPLAYER CLIENT

// forked from ELHS's "SOCKET.IO && NODE.JS MULTIPLAYER CLIENT" http://jsdo.it/ELHS/z7Bx
// 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 = '';
    
	
}

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;
		}
	}
}

//HELPERS
//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 a name for your player.");

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++){

var playerData = playersDataFromServer[i];
			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(!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);

forked: SOCKET.IO && NODE.JS MULTIPLAYER CLIENT

// forked from ELHS's "SOCKET.IO && NODE.JS MULTIPLAYER CLIENT" http://jsdo.it/ELHS/z7Bx // 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 = ''; } 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; } } } //HELPERS //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 a name for your player."); 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++){ var playerData = playersDataFromServer[i]; 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(!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="https://cdn.socket.io/socket.io-1.3.5.js"></script>* { margin: 0; padding: 0; border: 0; } body { background: #ddf; font: 30px sans-serif; }