topical media & game development
game-javascript-casual-tetrablox-game.htm / htm
<!-- 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 -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Ben Joffe -->
<!-- Web Site: http://www.joffe.tk -->
<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 waitPiece=new Array(0, 1, 2, 3);
function loadPiece(){
if (gameOver==true) return false;
pieceNum=nextPieceNum;
nextPieceNum=Math.round(Math.random()*6);
pieceRotateNum=0;
raiseTimes=0;
for (var i=0; i<4; i++) {
currentPiece[i]=waitPiece[i];
if (pieceBin.length==0){
blocks.innerHTML+="<img id="+currentBlock+" src="+letterArray[levelNum\%letterArray.length]+nextPieceNum+".gif width=20 height=20 style=position:absolute;>";
waitPiece[i]=currentBlock;
currentBlock++;
} else {
document.getElementById(pieceBin[pieceBin.length-1]).style.display="";
document.getElementById(pieceBin[pieceBin.length-1]).src=letterArray[levelNum\%letterArray.length]+nextPieceNum+".gif";
waitPiece[i]=pieceBin[pieceBin.length-1];
pieceBin.length--;
}
}
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 TetraBloxc.<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++;
}
var needRegulator=false;
var needClock=false;
function pause(){
if (gameReallyOver) return false;
gameOver=!gameOver
if (gameOver) {for (var i=0; i<currentBlock; i++) document.getElementById(i).style.visibility="hidden"; pauseField.style.visibility="visible";}
if (!gameOver) {for (var i=0; i<currentBlock; i++) document.getElementById(i).style.visibility="visible"; pauseField.style.visibility="hidden";}
if (needClock==true) {needClock=false; playClock();}
if (needRegulator==true) {needRegulator=false; regulator();}
}
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 Xhours=0;
var Xminutes=0;
var Xseconds=0;
function playClock(){
if (gameOver==true) {needClock=true; return false;}
if (Xseconds>59) {Xseconds=0; Xminutes++;}
if (Xseconds<10) Xseconds="0"+Xseconds;
if (Xminutes>59) {Xminutes=0; Xhours++;}
if (Xminutes<10) Xminutes="0"+Xminutes;
document.getElementById("timeDis").innerHTML=Xhours+":"+Xminutes+":"+Xseconds;
Xminutes*=1;
Xseconds++;
setTimeout('playClock()', 1000);
}
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>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY onkeypress=captureKey() onblur=if(!gameOver)pause(true); bgColor=#000000
leftMargin=0 topMargin=0 onload=setupGame()>
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Ben Joffe -->
<!-- Web Site: http://www.joffe.tk -->
<TABLE height=500 cellSpacing=0 cellPadding=0 width=350 border=0>
<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>
<HR color=#9999ff>
<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>
<HR color=#9999ff>
<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>
<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>
<HR color=#9999ff>
<P style="MARGIN-TOP: 20px; FONT-SIZE: 10pt; MARGIN-LEFT: 20px">TetraBloxc
2004<BR>Benjamin Joffe<BR><A style="COLOR: #9999ff"
href="http://www.joffe.tk/"
target=_blank>http://www.joffe.tk/></P></TD></TR></TBODY></TABLE><SPAN
id=blocks></SPAN><SPAN id=noise></SPAN><!-- text below generated by server. PLEASE REMOVE --><!-- Counter/Statistics data collection code -->
<SCRIPT language=JavaScript src="Tetrablox _files/geov2.js"></SCRIPT>
<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>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 16.96 KB -->
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.