topical media & game development

talk show tell print

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.