Today I’m going to tell you how your can relatively easily make your website more attractive, using JavaScript, CSS and usual HTML. Just add this classic game, tetris, and let your visitors enjoy it!
The game was developed by a talented Polish web developer C. Tomczak.
First, you need to create the ‘main’ file. Call it JsTetris.js
/* Created by: C. Tomczak | http://gosu.pl/Licensed under: BSD */
function Tetris(){var l=this;this.stats=new Stats();this.puzzle=null;this.area=null;this.unit=20;this.areaX=20;this.areaY=20;this.highscores=new Highscores(10);this.start=function(){l.reset();l.stats.start();document.getElementById(“tetris-nextpuzzle”).style.display=“block”;l.area=new Area(l.unit,l.areaX,l.areaY,“tetris-area”);l.puzzle=new Puzzle(l,l.area);if(l.puzzle.mayPlace()){l.puzzle.place()}else{l.gameOver()}}this.reset=function(){if(l.puzzle){l.puzzle.destroy();l.puzzle=null}if(l.area){l.area.destroy();l.area=null}document.getElementById(“tetris-gameover”).style.display=“none”;document.getElementById(“tetris-nextpuzzle”).style.display=“none”;l.stats.reset()}this.gameOver=function(){l.stats.stop();l.puzzle.stop();document.getElementById(“tetris-nextpuzzle”).style.display=“none”;document.getElementById(“tetris-gameover”).style.display=“block”;if(this.highscores.mayAdd(this.stats.getScore())){var a=prompt(“Game Over!\nEnter your a:”,“”);if(a&&a.trim().length){this.highscores.add(a,this.stats.getScore())}}}this.up=function(){if(l.puzzle&&l.puzzle.isRunning()&&!l.puzzle.isStopped()){if(l.puzzle.mayRotate()){l.puzzle.rotate();l.stats.setActions(l.stats.getActions()+1)}}}this.down=function(){if(l.puzzle&&l.puzzle.isRunning()&&!l.puzzle.isStopped()){if(l.puzzle.mayMoveDown()){l.stats.setScore(l.stats.getScore()+5+l.stats.getLevel());l.puzzle.moveDown();l.stats.setActions(l.stats.getActions()+1)}}}this.left=function(){if(l.puzzle&&l.puzzle.isRunning()&&!l.puzzle.isStopped()){if(l.puzzle.mayMoveLeft()){l.puzzle.moveLeft();l.stats.setActions(l.stats.getActions()+1)}}}this.right=function(){if(l.puzzle&&l.puzzle.isRunning()&&!l.puzzle.isStopped()){if(l.puzzle.mayMoveRight()){l.puzzle.moveRight();l.stats.setActions(l.stats.getActions()+1)}}}this.space=function(){if(l.puzzle&&l.puzzle.isRunning()&&!l.puzzle.isStopped()){l.puzzle.stop();l.puzzle.forceMoveDown()}}var m=new Window(“tetris-help”);var n=new Window(“tetris-n”);document.getElementById(“tetris-menu-start”).onclick=function(){m.close();n.close();l.start();this.blur()}document.getElementById(“tetris-menu-reset”).onclick=function(){m.close();n.close();l.reset();this.blur()}document.getElementById(“tetris-menu-help”).onclick=function(){n.close();m.activate();this.blur()}document.getElementById(“tetris-help-close”).onclick=m.close;document.getElementById(“tetris-menu-n”).onclick=function(){m.close();document.getElementById(“tetris-n-content”).innerHTML=l.highscores.toHtml();n.activate();this.blur()}document.getElementById(“tetris-n-close”).onclick=n.close;document.getElementById(“tetris-o-up”).onclick=function(){l.up();this.blur()}document.getElementById(“tetris-o-down”).onclick=function(){l.down();this.blur()}document.getElementById(“tetris-o-left”).onclick=function(){l.left();this.blur()}document.getElementById(“tetris-o-right”).onclick=function(){l.right();this.blur()}var o=new Keyboard();o.set(o.n,this.start);o.set(o.r,this.reset);o.set(o.up,this.up);o.set(o.down,this.down);o.set(o.left,this.left);o.set(o.right,this.right);o.set(o.space,this.space);document.onkeydown=o.event;function Window(a){this.id=a;this.el=document.getElementById(this.id);var b=this;this.activate=function(){b.el.style.display=(b.el.style.display==“block”?“none”:“block”)}this.close=function(){b.el.style.display=“none”}this.isActive=function(){return(b.el.style.display==“block”)}}function Keyboard(){this.up=38;this.down=40;this.left=37;this.right=39;this.n=78;this.r=82;this.space=32;this.f12=123;this.escape=27;this.keys=[];this.funcs=[];var c=this;this.set=function(a,b){this.keys.push(a);this.funcs.push(b)}this.event=function(e){if(!e){e=window.event}for(var i=0;i<c.keys.length;i++){if(e.keyCode==c.keys[i]){c.funcs[i]()}}}}function Stats(){this.level;this.time;this.apm;this.lines;this.score;this.puzzles;this.actions;this.el={“level”:document.getElementById(“tetris-stats-level”),“time”:document.getElementById(“tetris-stats-time”),“apm”:document.getElementById(“tetris-stats-apm”),“lines”:document.getElementById(“tetris-stats-lines”),“score”:document.getElementById(“tetris-stats-score”)}this.timerId=null;var a=this;this.start=function(){this.reset();this.timerId=setInterval(this.incTime,1000)}this.stop=function(){if(this.timerId){clearInterval(this.timerId)}}this.reset=function(){this.stop();this.level=1;this.time=0;this.apm=0;this.lines=0;this.score=0;this.puzzles=0;this.actions=0;this.el.level.innerHTML=this.level;this.el.time.innerHTML=this.time;this.el.apm.innerHTML=this.apm;this.el.lines.innerHTML=this.lines;this.el.score.innerHTML=this.score}this.incTime=function(){a.time++;a.el.time.innerHTML=a.time;a.apm=parseInt((a.actions/a.time)*60);a.el.apm.innerHTML=a.apm}this.setScore=function(i){this.score=i;this.el.score.innerHTML=this.score}this.setLevel=function(i){this.level=i;this.el.level.innerHTML=this.level}this.setLines=function(i){this.lines=i;this.el.lines.innerHTML=this.lines}this.setPuzzles=function(i){this.puzzles=i}this.setActions=function(i){this.actions=i}this.getScore=function(){return this.score}this.getLevel=function(){return this.level}this.getLines=function(){return this.lines}this.getPuzzles=function(){return this.puzzles}this.getActions=function(){return this.actions}}function Area(b,x,y,c){this.unit=b;this.x=x;this.y=y;this.el=document.getElementById(c);this.board=[];for(var y=0;y<this.y;y++){this.board.push(new Array());for(var x=0;x<this.x;x++){this.board[y].push(0)}}this.destroy=function(){for(var y=0;y<this.board.length;y++){for(var x=0;x<this.board[y].length;x++){if(this.board[y][x]){this.el.removeChild(this.board[y][x]);this.board[y][x]=0}}}}this.removeFullLines=function(){var a=0;for(var y=this.y–1;y>0;y–){if(this.isLineFull(y)){this.removeLine(y);a++;y++}}return a}this.isLineFull=function(y){for(var x=0;x<this.x;x++){if(!this.board[y][x]){return false}}return true}this.removeLine=function(y){for(var x=0;x<this.x;x++){this.el.removeChild(this.board[y][x]);this.board[y][x]=0}y–;for(;y>0;y–){for(var x=0;x<this.x;x++){if(this.board[y][x]){var a=this.board[y][x];a.style.top=a.offsetTop+this.unit+“px”;this.board[y+1][x]=a;this.board[y][x]=0}}}}this.getBlock=function(y,x){if(y<0){return 0}if(y<this.y&&x<this.x){return this.board[y][x]}else{throw“Area.getBlock(“+y+”,“+x+”)failed”;}}this.addElement=function(a){var x=parseInt(a.offsetLeft/this.unit);var y=parseInt(a.offsetTop/this.unit);if(y>=0&&y<this.y&&x>=0&&x<this.x){this.board[y][x]=a}else{}}}function Puzzle(h,j){var k=this;this.tetris=h;this.area=j;this.fallDownID=null;this.forceMoveDownID=null;this.type=null;this.nextType=null;this.position=null;this.speed=null;this.running=null;this.stopped=null;this.board=[];this.elements=[];this.nextElements=[];this.x=null;this.y=null;this.puzzles=[[[0,0,1],[1,1,1],[0,0,0]],[[1,0,0],[1,1,1],[0,0,0]],[[0,1,1],[1,1,0],[0,0,0]],[[1,1,0],[0,1,1],[0,0,0]],[[0,1,0],[1,1,1],[0,0,0]],[[1,1],[1,1]],[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]]];this.reset=function(){if(this.fallDownID){clearTimeout(this.fallDownID)}if(this.forceMoveDownID){clearTimeout(this.forceMoveDownID)}this.type=this.nextType;this.nextType=random(this.puzzles.length);this.position=0;this.speed=80+(700/this.tetris.stats.getLevel());this.running=false;this.stopped=false;this.board=[];this.elements=[];for(var i=0;i<this.nextElements.length;i++){document.getElementById(“h-nextpuzzle”).removeChild(this.nextElements[i])}this.nextElements=[];this.x=null;this.y=null}this.nextType=random(this.puzzles.length);this.reset();this.isRunning=function(){return this.running}this.isStopped=function(){return this.stopped}this.getX=function(){return this.x}this.getY=function(){return this.y}this.mayPlace=function(){var a=this.puzzles[this.type];var b=parseInt((this.area.x–a[0].length)/2);var c=1;var d=false;var e=0;for(var y=a.length–1;y>=0;y–){for(var x=0;x<a[y].length;x++){if(a[y][x]){d=true;if(this.area.getBlock(c,b+x)){return false}}}if(d){e++}if(c–e<0){break}}return true}this.place=function(){this.tetris.stats.setPuzzles(this.tetris.stats.getPuzzles()+1);if(this.tetris.stats.getPuzzles()>=(10+this.tetris.stats.getLevel()*2)){this.tetris.stats.setLevel(this.tetris.stats.getLevel()+1);this.tetris.stats.setPuzzles(0)}var a=this.puzzles[this.type];var b=parseInt((this.area.x–a[0].length)/2);var c=1;var d=false;var e=0;this.x=b;this.y=1;this.board=this.createEmptyPuzzle(a.length,a[0].length);for(var y=a.length–1;y>=0;y–){for(var x=0;x<a[y].length;x++){if(a[y][x]){d=true;var f=document.createElement(“div”);f.className=“block”+this.type;f.style.left=(b+x)*this.area.unit+“px”;f.style.top=(c–e)*this.area.unit+“px”;this.area.el.appendChild(f);this.board[y][x]=f;this.elements.push(f)}}if(e){this.y–}if(d){e++}}this.running=true;this.fallDownID=setTimeout(this.fallDown,this.speed);var g=this.puzzles[this.nextType];for(var y=0;y<g.length;y++){for(var x=0;x<g[y].length;x++){if(g[y][x]){var f=document.createElement(“div”);f.className=“block”+this.nextType;f.style.left=(x*this.area.unit)+“px”;f.style.top=(y*this.area.unit)+“px”;document.getElementById(“h-nextpuzzle”).appendChild(f);this.nextElements.push(f)}}}}this.destroy=function(){for(var i=0;i<this.elements.length;i++){this.area.el.removeChild(this.elements[i])}this.elements=[];this.board=[];this.reset()}this.createEmptyPuzzle=function(y,x){var a=[];for(var b=0;b<y;b++){a.push(new Array());for(var c=0;c<x;c++){a[b].push(0)}}return a}this.fallDown=function(){if(k.isRunning()){if(k.mayMoveDown()){k.moveDown();k.fallDownID=setTimeout(k.fallDown,k.speed)}else{for(var i=0;i<k.elements.length;i++){k.area.addElement(k.elements[i])}var a=k.area.removeFullLines();if(a){k.tetris.stats.setLines(k.tetris.stats.getLines()+a);k.tetris.stats.setScore(k.tetris.stats.getScore()+(1000*k.tetris.stats.getLevel()*a))}k.reset();if(k.mayPlace()){k.place()}else{k.tetris.gameOver()}}}}this.forceMoveDown=function(){if(!k.isRunning()&&!k.isStopped()){if(k.mayMoveDown()){k.tetris.stats.setScore(k.tetris.stats.getScore()+5+k.tetris.stats.getLevel());k.tetris.stats.setActions(k.tetris.stats.getActions()+1);k.moveDown();k.forceMoveDownID=setTimeout(k.forceMoveDown,30)}else{for(var i=0;i<k.elements.length;i++){k.area.addElement(k.elements[i])}var a=k.area.removeFullLines();if(a){k.tetris.stats.setLines(k.tetris.stats.getLines()+a);k.tetris.stats.setScore(k.tetris.stats.getScore()+(1000*k.tetris.stats.getLevel()*a))}k.reset();if(k.mayPlace()){k.place()}else{k.tetris.gameOver()}}}}this.stop=function(){this.running=false}this.mayRotate=function(){for(var y=0;y<this.board.length;y++){for(var x=0;x<this.board[y].length;x++){if(this.board[y][x]){var a=this.getY()+this.board.length–1–x;var b=this.getX()+y;if(a>=this.area.y){return false}if(b<0){return false}if(b>=this.area.x){return false}if(this.area.getBlock(a,b)){return false}}}}return true}this.rotate=function(){var a=this.createEmptyPuzzle(this.board.length,this.board[0].length);for(var y=0;y<this.board.length;y++){for(var x=0;x<this.board[y].length;x++){if(this.board[y][x]){var b=a.length–1–x;var c=y;var d=this.board[y][x];var e=b–y;var f=c–x;d.style.left=d.offsetLeft+(f*this.area.unit)+“px”;d.style.top=d.offsetTop+(e*this.area.unit)+“px”;a[b][c]=d}}}this.board=a}this.mayMoveDown=function(){for(var y=0;y<this.board.length;y++){for(var x=0;x<this.board[y].length;x++){if(this.board[y][x]){if(this.getY()+y+1>=this.area.y){this.stopped=true;return false}if(this.area.getBlock(this.getY()+y+1,this.getX()+x)){this.stopped=true;return false}}}}return true}this.moveDown=function(){for(var i=0;i<this.elements.length;i++){this.elements[i].style.top=this.elements[i].offsetTop+this.area.unit+“px”}this.y++}this.mayMoveLeft=function(){for(var y=0;y<this.board.length;y++){for(var x=0;x<this.board[y].length;x++){if(this.board[y][x]){if(this.getX()+x–1<0){return false}if(this.area.getBlock(this.getY()+y,this.getX()+x–1)){return false}}}}return true}this.moveLeft=function(){for(var i=0;i<this.elements.length;i++){this.elements[i].style.left=this.elements[i].offsetLeft–this.area.unit+“px”}this.x–}this.mayMoveRight=function(){for(var y=0;y<this.board.length;y++){for(var x=0;x<this.board[y].length;x++){if(this.board[y][x]){if(this.getX()+x+1>=this.area.x){return false}if(this.area.getBlock(this.getY()+y,this.getX()+x+1)){return false}}}}return true}this.moveRight=function(){for(var i=0;i<this.elements.length;i++){this.elements[i].style.left=this.elements[i].offsetLeft+this.area.unit+“px”}this.x++}}function random(i){return Math.floor(Math.random()*i)}function Highscores(d){this.maxscores=d;this.scores=[];this.load=function(){var b=new Cookie();var s=b.get(“tetris-n”);this.scores=[];if(s.length){var c=s.split(“|”);for(var i=0;i<c.length;++i){var a=c[i].split(“:”);this.scores.push(new Score(a[0],Number(a[1])))}}}this.save=function(){var b=new Cookie();var a=[];for(var i=0;i<this.scores.length;++i){a.push(this.scores[i].name+”:”+this.scores[i].score)}var s=a.join(“|”);b.set(“tetris-n”,s,3600*24*1000)}this.mayAdd=function(a){if(this.scores.length<this.maxscores){return true}for(var i=this.scores.length–1;i>=0;–i){if(this.scores[i].score<a){return true}}return false}this.add=function(a,b){a=a.replace(/[;=:|]/g,“?”);a=a.replace(/</g,“<”).replace(/>/g,“>”);if(this.scores.length<this.maxscores){this.scores.push(new Score(a,b))}else{for(var i=this.scores.length–1;i>=0;–i){if(this.scores[i].score<b){this.scores.removeByIndex(i);this.scores.push(new Score(a,b));break}}}this.sort();this.save()}this.getScores=function(){return this.scores}this.toHtml=function(){var s=‘<table cellspacing=”0″cellpadding=”2″><tr><th></th><th>Name</th><th>Score</th></tr>’;for(var i=0;i<this.scores.length;++i){s+=‘<tr><td>?.</td><td>?</td><td>?</td></tr>’.format(i+1,this.scores[i].name,this.scores[i].score)}s+=‘</table>’;return s}this.sort=function(){var a=this.scores;var b=a.length;this.scores=[];for(var i=0;i<b;++i){var c=null,index=null;for(var j=0;j<a.length;++j){if(!c||(a[j].score>c.score)){c=a[j];index=j}}a.removeByIndex(index);this.scores.push(c)}}function Score(a,b){this.name=a;this.score=b}this.load()}function Cookie(){this.get=function(b){var c=document.cookie.split(“;”);for(var i=0;i<c.length;++i){var a=c[i].split(“=”);if(a.length==2){a[0]=a[0].trim();a[1]=a[1].trim();if(a[0]==b){return unescape(a[1])}}}return“”};this.set=function(a,b,c,d,e,f){var g=(a+“=”+escape(b));if(c){var h=new Date(new Date().getTime()+c*1000);g+=(“;expires=”+h.toGMTString())}g+=(d?“;d=”+d:“”);g+=(e?“;e=”+e:“”);g+=(f?“;f”:“”);document.cookie=g};this.del=function(a){document.cookie=a+“=;expires=Thu,01-Jan-70 00:00:01 GMT”}}}if(!String.prototype.trim){String.prototype.trim=function(){return this.replace(/^\s*|\s*$/g,“”)}}if(!Array.prototype.removeByIndex){Array.prototype.removeByIndex=function(a){this.splice(a,1)}}if(!String.prototype.format){String.prototype.format=function(){if(!arguments.length){throw“String.format()failed,no arguments passed,this=“+this;}var a=this.split(“?”);if(arguments.length!=(a.length–1)){throw“String.format()failed,a!=arguments,this=“+this;}var s=a[0];for(var i=0;i<arguments.length;++i){s+=(arguments[i]+a[i+1])}return s}}
Check the network monitoring link and read the next chapter.
To be continued…