HackingUniversity - Hacks . Tricks . How-To's

25 January 2013

Amuse Readers Add JavaScript Based Snake Game in Blogger

snake-game-online

If you an old gamer than you might bee knowing about the snake game we used to play for hours creating that long snake and getting killed by biting his own tail, as their was no space left to escape and eat that food to grow more, well if you are still that kind of person than know you can easily add this same game to your blog or website and amuse your readers. Well I have even posted one more game that's claimed to be the world's most difficult strategy game, you can play that too.

Well there is already an online cleaner version of this game created by patorjk that's much more cleaner than this one, so if you are good at getting stuff scrapped out of any website you can get JavaScript and CSS files for that game too, but this version as mentioned in the JavaScript is created by Manish Raj, so if he is the creator of this one I thank him too, so now if you want to see demo for this game just visit my editor page and add the below JavaScript in the left section provided and press preview button to see this game loaded in right panel.

<script type="text/javascript">window.onload=function(){var e=38;var t=37;var n=40;var r=39;var i=38;var s=37;var o=40;var u=39;var a=window.innerWidth;var f=window.innerHeight;var l=15;var c=new Audio("b.ogg");var h=100;var p=1;var d="#FFFFFF";var v="#FFFFFF";var m=0;var g=10;var y=0;var b=document.getElementsByTagName("body")[0];var w=function(e,t){for(var n in t){e.style[n]=t[n]}};w(b,{padding:"0px",margin:"0px"});var E=document.createElement("div");w(E,{background:"#000000",display:"block",width:a+"px",height:f+"px",margin:"0px;",padding:"0px",position:"relative",overflow:"hidden"});b.appendChild(E);var S=document.createElement("div");var x=[0,0];var T=50;var N=a-T;var C=f-T;var k=l+T;var L=l+T;var A=function(){x[0]=Math.floor((Math.random()*(N-k)+k)/k)*k;x[1]=Math.floor((Math.random()*(C-L)+L)/L)*L};A();w(S,{background:v,display:"block",width:l+"px",height:l+"px",position:"absolute",left:x[0]+"px",top:x[1]+"px",border:"2px solid #000000"});E.appendChild(S);var O=document.createElement("div");w(O,{display:"block",position:"absolute",right:"10px",top:"10px",font:"bold 25px Arial",color:"#FFFFFF"});var M=document.createElement("div");w(M,{display:"block",position:"absolute",left:"10px",top:"10px",font:"bold 25px Arial",color:"#FFFFFF"});E.appendChild(O);E.appendChild(M);var _=new Array;_[0]=[Math.floor((Math.random()*(N-k)+k)/k)*k,Math.floor((Math.random()*(C-L)+L)/L)*L];for(var D=1;D<=p;D++){_[D]=[_[0][0]-D*l,_[0][1]]}var P=u;var H=false;var B=function(){if(!H){j({keyCode:P});window.setTimeout(B,h-g*m)}else{var e=document.createElement("div");w(e,{display:"block",position:"absolute",width:"400px",height:"100px",font:"bold 25px Arial",color:"orangered",background:"#DDDDDD",left:"50%",top:"50%",marginLeft:"-200px",marginTop:"-50px","z-index":"99",textAlign:"center"});e.innerHTML="GAME OVER!";gameover_dialog_button=document.createElement("button");w(gameover_dialog_button,{display:"block",margin:"auto",font:"bold 15px Merienda"});gameover_dialog_button.innerHTML="Click To Play Again";gameover_dialog_button.onclick=function(){document.location.reload(false)};e.appendChild(gameover_dialog_button);b.appendChild(e);gameover_dialog_button.focus()}};window.setTimeout(B,h);document.onkeydown=function(e){j({keyCode:e.keyCode})};var j=function(h){if(H){return null}if(P==i&&h.keyCode==n){return null}if(P==u&&h.keyCode==t){return null}if(P==s&&h.keyCode==r){return null}if(P==o&&h.keyCode==e){return null}if(h.keyCode==e||h.keyCode==t||h.keyCode==n||h.keyCode==r){var p=_[_.length-1][0];var v=_[_.length-1][1];for(var g=_.length-1;g>0;g--){_[g][0]=_[g-1][0];_[g][1]=_[g-1][1]}if(h.keyCode==e){_[0][1]-=l;P=i}if(h.keyCode==t){_[0][0]-=l;P=s}if(h.keyCode==n){_[0][1]+=l;P=o}if(h.keyCode==r){_[0][0]+=l;P=u}if(_[0][0]>a){_[0][0]=0}if(_[0][1]>f){_[0][1]=0}if(_[0][0]<0){_[0][0]=a}if(_[0][1]<0){_[0][1]=f}for(var g=1;g<_.length;g++){if(_[0][0]==_[g][0]&&_[0][1]==_[g][1]){H=true}}}if(Math.abs(_[0][0]-x[0])<l&&Math.abs(_[0][1]-x[1])<l){_[_.length]=[p,v];y++;if(y!=0&&y%10==0&&m!=10){m++}c.play();A();w(S,{left:x[0]+"px",top:x[1]+"px"})}M.innerHTML="Score: "+y;O.innerHTML="Level: "+(m+1);for(var g=0;g<_.length;g++){var b=document.getElementById("snake_"+g);if(b==null){b=document.createElement("div");b.setAttribute("id","snake_"+g);w(b,{position:"absolute",display:"block",width:l+"px",height:l+"px",border:"0px solid #000000",background:d});E.appendChild(b)}w(b,{left:_[g][0]+"px",top:_[g][1]+"px"})}}}</script>

So now just copy the above JavaScript and paste it in your HTML Gadget or directly anywhere where you normally paste the JavaScript and your snake game will be loaded. So you can even create a new page in your blogger blog and paste the whole JavaScript in its HTML to make a separate page for this game for your visitors.

So now it depends on you if you wanna use it or not but this works good and its pretty fun to be played, so have fun sharing this game with your friends.