Tetrablox

Ben Joffe Mar 5, 2004

Clearing lines is the name of the game. Different levels and customizable backgrounds make this a lot of fun.

The JavaScript Source: Games: Tetrablox

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- THREE STEPS TO INSTALL TETRABLOX:

1.  Copy the coding into the HEAD of your HTML document

2.  Add the onLoad event handler into the BODY tag

3.  Put the last coding into the BODY of your HTML document  -->

<HEAD>

<SCRIPT>
function captureKey(){
if (window.event.keyCode==80 || window.event.keyCode==112) pause();
if (gameOver==true) return false;
if (window.event.keyCode==87 || window.event.keyCode==119) return true;
if (window.event.keyCode==65 || window.event.keyCode==97) movePiece("left");
if (window.event.keyCode==83 || window.event.keyCode==115) lowerPiece();
if (window.event.keyCode==68 || window.event.keyCode==100) movePiece("right");
if (window.event.keyCode==32) rotatePiece();
}

function movePiece(direction){
if (gameOver==true) return false;
if (direction=="left"){
document.getElementById(currentPiece[0]).style.pixelLeft-=20;
document.getElementById(currentPiece[1]).style.pixelLeft-=20;
document.getElementById(currentPiece[2]).style.pixelLeft-=20;
document.getElementById(currentPiece[3]).style.pixelLeft-=20;
for (var i=0; i<4; i++)
if (document.getElementById(currentPiece[i]).style.pixelLeft<0 || play[24-(document.getElementById(currentPiece[i]).style.pixelTop/20)][document.getElementById(currentPiece[i]).style.pixelLeft/20]=="1")
movePiece("right");
}
if (direction=="right"){
document.getElementById(currentPiece[0]).style.pixelLeft+=20;
document.getElementById(currentPiece[1]).style.pixelLeft+=20;
document.getElementById(currentPiece[2]).style.pixelLeft+=20;
document.getElementById(currentPiece[3]).style.pixelLeft+=20;
for (var i=0; i<4; i++)
if (document.getElementById(currentPiece[i]).style.pixelLeft>180 || play[24-(document.getElementById(currentPiece[i]).style.pixelTop/20)][document.getElementById(currentPiece[i]).style.pixelLeft/20]=="1")
movePiece("left");
}
if (direction==null){

for (var i=0; i<4; i++){
if (document.getElementById(currentPiece[i]).style.pixelLeft>180) movePiece("left");
if (document.getElementById(currentPiece[i]).style.pixelLeft<0) movePiece("right");
if (document.getElementById(currentPiece[i]).style.pixelTop>480 || play[24-(document.getElementById(currentPiece[i]).style.pixelTop/20)][document.getElementById(currentPiece[i]).style.pixelLeft/20]=="1" && raiseTimes<10) raisePiece();
// if (document.getElementById(currentPiece[i]).style.pixelTop>480 || play[24-(document.getElementById(currentPiece[i]).style.pixelTop/20)][document.getElementById(currentPiece[i]).style.pixelLeft/20])&& raiseTimes>=10) {rotatePiece(true);rotatePiece(true);rotatePiece(true);}
}

}
}

var letterArray=new Array("c", "b", "a")
var pieceBin=new Array()
var currentPiece=new Array();
var currentBlock=0;
var pieceNum=6;
var pieceRotateNum;
var levelNum=0;
linesNum=0;
var nextPieceNum=Math.round(Math.random()*6);

var pieceCoords=new Array();
pieceCoords[0]="240x040-260x040-280x040-300x040";
pieceCoords[1]="240x040-260x040-240x060-260x060";
pieceCoords[2]="260x040-240x060-260x060-280x060";
pieceCoords[3]="240x040-260x040-260x060-280x060";
pieceCoords[4]="260x040-280x040-240x060-260x060";
pieceCoords[5]="240x040-240x060-260x060-280x060";
pieceCoords[6]="280x040-240x060-260x060-280x060";

document.getElementById(waitPiece[0]).style.pixelLeft=pieceCoords[nextPieceNum].substring(0,3);
document.getElementById(waitPiece[0]).style.pixelTop=pieceCoords[nextPieceNum].substring(4,7);
document.getElementById(waitPiece[1]).style.pixelLeft=pieceCoords[nextPieceNum].substring(8,11);
document.getElementById(waitPiece[1]).style.pixelTop=pieceCoords[nextPieceNum].substring(12,15);
document.getElementById(waitPiece[2]).style.pixelLeft=pieceCoords[nextPieceNum].substring(16,19);
document.getElementById(waitPiece[2]).style.pixelTop=pieceCoords[nextPieceNum].substring(20,23);
document.getElementById(waitPiece[3]).style.pixelLeft=pieceCoords[nextPieceNum].substring(24,27);
document.getElementById(waitPiece[3]).style.pixelTop=pieceCoords[nextPieceNum].substring(28,31);

if (document.getElementById(currentPiece[0]).style.pixelTop!=0)
for (var i=0; i<4; i++) {document.getElementById(currentPiece[i]).style.pixelTop-=40;
document.getElementById(currentPiece[i]).style.pixelLeft-=160;
if (pieceNum==0) {document.getElementById(currentPiece[i]).style.pixelLeft-=20;}
if (play[24-(document.getElementById(currentPiece[i]).style.pixelTop/20)][document.getElementById(currentPiece[i]).style.pixelLeft/20]=="1") {endGame(); break;}
}

}

function storePiece(){
if (gameOver==true) return false;
for (var i=0; i<4; i++)
play[24-(document.getElementById(currentPiece[i]).style.pixelTop/20)][document.getElementById(currentPiece[i]).style.pixelLeft/20]="1";
for (var i=24; i>=0; i--)
if (play[i][0]=="1" && play[i][1]=="1" && play[i][2]=="1" && play[i][3]=="1" && play[i][4]=="1" && play[i][5]=="1" && play[i][6]=="1" && play[i][7]=="1" && play[i][8]=="1" && play[i][9]=="1")
clearLine(i);
}

gameReallyOver=false;
var gameOver=false;
function endGame(){
blocks.innerHTML+="<table style=position:absolute;top:0;left:0 width=200 height=500 style=font-family:Arial;color:#FFFFFF;font-size:12pt;font-weight:bold bgcolor=#000000><tr><td align='center'><p align=center style=color:#9999FF>GAME OVER</p><p align=center><input type=button value='New Game' onclick='window.location.href=window.location.href' style='font-family: Arial; color: #FFFFFF; font-size: 10pt; font-weight: bold; background-color: #003366; border-style: dashed; border-color: #FFFFFF'><br> <hr width=80%><P style='margin-left: 15; margin-right: 15'><small>Thankyou for play TetraBlox©.<br>      Visit </small> <a href=http://www.joffe.tk/ target=_blank><font color='#9898FF'><small>www.joffe.tk</small></font></a> <small> for more games.</small></p></td></tr></table>";
gameOver=true;
gameReallyOver=true;
}

var bgArray=new Array("bg0.jpg", "bg1.jpg", "bg2.jpg");
function clearLine(lineNum){
if (document.getElementById('soundList').options.selectedIndex==0 || linesNum%20!=0) document.getElementById('noise').innerHTML='<embed src="clearline.mp3" hidden>';
linesNum++;
if (linesNum%20==0) {levelNum++; document.getElementById("playBG").background=bgArray[levelNum%3]; document.getElementById('noise').innerHTML='<embed src="leveladvance.mp3" hidden>';}
document.getElementById("levelDis").innerHTML=levelNum;
document.getElementById("lineDis").innerHTML=linesNum;
for (var i=lineNum; i<24; i++)
play[i]=play[i+1]
play[24]=new Array()
for (var i=0; i<10; i++)
play[24][i]="0";

for (var i=0; i<currentBlock; i++)
if (document.getElementById(i)!=null){ 
if (document.getElementById(i).style.pixelTop==(24-lineNum)*20) {
document.getElementById(i).style.display="none";
document.getElementById(i).style.pixelTop=500;
pieceBin[pieceBin.length]=i}
if (document.getElementById(i).style.pixelTop<(24-lineNum)*20) document.getElementById(i).style.pixelTop+=20;
}
}

function rotatePiece(undomove){
if (pieceNum==1) return false;
var block0=new Array("-20x+20_000x000_+20x-20_+40x-40", "+20x-20_000x000_-20x+20_-40x+40");
var block2=new Array("+20x+20_-20x+20_000x000_+20x-20", "+20x-20_+20x+20_000x000_-20x-20", "-20x-20_+20x-20_000x000_-20x+20", "-20x+20_-20x-20_000x000_+20x+20");
var block3=new Array("+20x000_000x000_000x000_+20x-40", "-20x000_000x000_000x000_-20x+40");
var block4=new Array("000x000_-20x-40_-20x000_000x000", "000x000_+20x+40_+20x000_000x000");
var block5=new Array("000x+20_-20x000_000x-20_+20x-40", "+20x000_000x+20_-20x000_-40x-20", "000x-20_+20x000_000x+20_-20x+40", "-20x000_000x-20_+20x000_+40x+20");
var block6=new Array("+20x000_-40x+20_-20x000_000x-20", "000x-20_+20x+40_000x+20_-20x000", "-20x000_+40x-20_+20x000_000x+20", "000x+20_-20x-40_000x-20_+20x000");
var block=new Array(block0, null, block2, block3, block4, block5, block6)
document.getElementById(currentPiece[0]).style.pixelTop+=eval(block[pieceNum][pieceRotateNum].substring(0,3));
document.getElementById(currentPiece[0]).style.pixelLeft+=eval(block[pieceNum][pieceRotateNum].substring(4,7));
document.getElementById(currentPiece[1]).style.pixelTop+=eval(block[pieceNum][pieceRotateNum].substring(8,11));
document.getElementById(currentPiece[1]).style.pixelLeft+=eval(block[pieceNum][pieceRotateNum].substring(12,15));
document.getElementById(currentPiece[2]).style.pixelTop+=eval(block[pieceNum][pieceRotateNum].substring(16,19));
document.getElementById(currentPiece[2]).style.pixelLeft+=eval(block[pieceNum][pieceRotateNum].substring(20,23));
document.getElementById(currentPiece[3]).style.pixelTop+=eval(block[pieceNum][pieceRotateNum].substring(24,27));
document.getElementById(currentPiece[3]).style.pixelLeft+=eval(block[pieceNum][pieceRotateNum].substring(28,31));
pieceRotateNum++;
if ((pieceNum==0 || pieceNum==3|| pieceNum==4) && pieceRotateNum==2) pieceRotateNum=0;
if (pieceRotateNum==4) pieceRotateNum=0;
for (var i=0; i<4; i++) while (document.getElementById(currentPiece[i]).style.pixelTop<=0) for (var a=0; a<4; a++) document.getElementById(currentPiece[a]).style.pixelTop+=20;
if (undomove==null) movePiece();
}

function regulator(){
if (gameOver==true) {needRegulator=true; return false;}
lowerPiece();
var delaytime=1000-(5*linesNum)
if (delaytime<40) delaytime=40;
setTimeout("regulator()", delaytime);
}

var raiseTimes;
function raisePiece(){
document.getElementById(currentPiece[0]).style.pixelTop-=20;
document.getElementById(currentPiece[1]).style.pixelTop-=20;
document.getElementById(currentPiece[2]).style.pixelTop-=20;
document.getElementById(currentPiece[3]).style.pixelTop-=20;
raiseTimes++;
}

function lowerPiece(){
if (gameOver==true) return false;
for (var i=0; i<4; i++) document.getElementById(currentPiece[i]).style.pixelTop+=20;
for (var i=0; i<4; i++)
if (document.getElementById(currentPiece[i]).style.pixelTop>480 || play[24-(document.getElementById(currentPiece[i]).style.pixelTop/20)][document.getElementById(currentPiece[i]).style.pixelLeft/20]=="1") {
for (var ii=0; ii<4; ii++) document.getElementById(currentPiece[ii]).style.pixelTop-=20;
storePiece();
loadPiece();
break;
}
}

var play=new Array();
for (var a=0; a<25; a++) {play[a]=new Array(); for (var b=0; b<10; b++) play[a][b]="0";}

function setupGame(){
window.focus(); 
loadPiece();
loadPiece();
playClock();
setTimeout('regulator()',1000);
}

</SCRIPT>

</HEAD>

<TBODY>

<TR>

<TD id=playBG align=middle width=200

background="Tetrablox _files/bg0.jpg"><TABLE id=pauseField

style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; VISIBILITY: hidden; COLOR: #9999ff; FONT-FAMILY: Arial"

cellSpacing=0 cellPadding=10 bgColor=#003366

background="Tetrablox _files/bg.jpg" border=2>

<TBODY>

<TR>

<TD>

<P align=center>Game Paused<BR><BR><INPUT style="FONT-WEIGHT: bold; FONT-SIZE: 10pt; BORDER-LEFT-COLOR: #ffffff; BORDER-BOTTOM-COLOR: #ffffff; COLOR: #ffffff; BORDER-TOP-STYLE: dashed; BORDER-TOP-COLOR: #ffffff; FONT-FAMILY: Arial; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BACKGROUND-COLOR: #003366; BORDER-RIGHT-COLOR: #ffffff; BORDER-BOTTOM-STYLE: dashed" onclick=window.focus();if(gameOver)pause() type=button value=Continue></P></TD></TR></TBODY></TABLE></TD>

<TD

style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #9999ff; FONT-FAMILY: Arial"

align=middle

width=10>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|<BR>|

</TD>

<TD

style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #ffffff; FONT-FAMILY: Arial"

vAlign=top width=140 background="Tetrablox _files/bg.jpg">

<P style="MARGIN-TOP: 10px; MARGIN-LEFT: 20px; COLOR: #ccccff">Next

Piece:</P><BR><BR>

<P style="MARGIN-TOP: 10px; MARGIN-LEFT: 20px; LINE-HEIGHT: 120%"><SPAN

style="COLOR: #ccccff">Lines:</SPAN> <SPAN id=lineDis>0</SPAN><BR><SPAN

style="COLOR: #ccccff">Level:</SPAN> <SPAN id=levelDis>0</SPAN><BR><SPAN

style="COLOR: #ccccff"> Time:</SPAN> <SPAN

id=timeDis>0:00:00</SPAN></P>

<P style="MARGIN-TOP: 10px; FONT-SIZE: 10pt; MARGIN-LEFT: 20px"><BIG

style="COLOR: #ccccff">Keys: </BIG><BR>Move Left - <SPAN

style="COLOR: #c0c0c0">[A]</SPAN><BR>Move Right - <SPAN

style="COLOR: #c0c0c0">[D]</SPAN><BR>Lower Piece - <SPAN

style="COLOR: #c0c0c0">[S]</SPAN><BR>Drop Piece - <SPAN

style="COLOR: #c0c0c0">[W]</SPAN><BR>Rotate - <SPAN

style="COLOR: #c0c0c0">[Space]</SPAN><BR>Pause - <SPAN

style="COLOR: #c0c0c0">[P]</SPAN></P>

style="MARGIN-TOP: 20px; FONT-SIZE: 12pt; MARGIN-LEFT: 20px; COLOR: #ccccff">Sound:

<SELECT id=soundList

style="FONT-WEIGHT: bold; FONT-SIZE: 10pt; BORDER-LEFT-COLOR: #ffffff; BORDER-BOTTOM-COLOR: #ffffff; COLOR: #ffffff; BORDER-TOP-STYLE: dashed; BORDER-TOP-COLOR: #ffffff; FONT-FAMILY: Arial; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BACKGROUND-COLOR: #003366; BORDER-RIGHT-COLOR: #ffffff; BORDER-BOTTOM-STYLE: dashed"

size=1> <OPTION selected>On</OPTION> <OPTION>Off</OPTION></SELECT></P>

2004<BR>Benjamin Joffe<BR><A style="COLOR: #9999ff"

href="http://www.joffe.tk/"

target=_blank>http://www.joffe.tk/</A></P></TD></TR></TBODY></TABLE><SPAN

id=blocks></SPAN><SPAN id=noise></SPAN>

<SCRIPT language=javascript>geovisit();</SCRIPT>

<NOSCRIPT><IMG height=1 alt=setstats src="Tetrablox _files/visit.gif" width=1

border=0></NOSCRIPT> <IMG height=1 alt=1 src="Tetrablox _files/serv.gif"

width=1>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Tetrablox

Leave a Response

Attention JavaScript Coders

Go Deeper