Forked from: ELHS's SOCKET.IO && NODE.JS MULTIPLAYER CLIENT View Diff (13) forked: SOCKET.IO && NODE.JS MULTIPLAYER CLIENT ELHS Follow 2015-05-24 11:29:39 License: MIT License Fork1 Fav0 View2054 Play Stop Reload Fullscreen Smart Phone Fork tree 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 + "."); 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> forked: SOCKET.IO && NODE.JS MULTIPLAYER CLIENT * { margin: 0; padding: 0; border: 0; } body { background: #ddf; font: 30px sans-serif; } // 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author ELHS URLhttp://guam.github.io/ Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/cRIw/js"></script> application art&design game html5_elements&api library&test multiplayer node.js socket.io user_interface websockets Discussion Questions on this code? Tags application art&design game html5_elements&api library&test multiplayer node.js socket.io user_interface websockets Forked sort by latest page views favorite forked Admin Root 00 1186 44/1/10 application art&design game html5_elements&api library&test multiplayer node.js socket.io user_interface websockets