Full version: jsB@nk » Game » Tetris » Simple tetris
URL: https://www.javascriptbank.com/simple-tetris.html
This clone of the popularly trademarked JavaScript Tetris game allows you to set difficulty levels from 1 to 9. No images are necessary.
Full version: jsB@nk » Game » Tetris » Simple tetris
URL: https://www.javascriptbank.com/simple-tetris.html
<STYLE>BODY {BACKGROUND: black; MARGIN: 0px;color: white;}TD {HEIGHT: 20px; WIDTH: 20px}#block_div {POSITION: absolute; WIDTH: 80px; Z-INDEX: 1}#table_div {POSITION: absolute; WIDTH: 320px}#nblock_div {COLOR: red; FONT: 48px system; POSITION: absolute; Z-INDEX: 2}#title_div {COLOR: white; FONT-SIZE: 22px; LEFT: 326px; POSITION: absolute; TOP: 7px}#infobar_div {LEFT: 396px; POSITION: absolute; TOP: 416px}#infobar2_div {COLOR: white; FONT-SIZE: 14px; LEFT: 396px; POSITION: absolute; TOP: 480px}#infobar2_div A {COLOR: #99ccff; TEXT-DECORATION: none}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT id=clientEventHandlersJS language=javascript><!--if (document.all){var n_width = 800;var n_height = 600;var n_left = Math.round( screen.width/2 ) - n_width/2;var n_top = Math.round( screen.height/2 ) - n_height/2;var n_IncStep = 20;var curBlcok,nextBlock;var arr_curBlock = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);var curX,curY;var speed=1;var maxspeed=9;var clr_per_line=18;var pause=0;var gameover=0;var colors = new Array("#999999","#0000FF","#80FFFF","#80FF80","#FFFF00","#FF8000","#FF00FF","#FF0000");var cid;var ncid;var blocks = new Array("tt_O1","tt_T2","tt_Z1","tt_S1","tt_L1","tt_J1","tt_I2");var bid;var killedlines=0;var tt_O1 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);var tt_O2 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);var tt_O3 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);var tt_O4 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);var tt_T1 = new Array(0,0,0,0,0,1,0,0,1,1,0,0,0,1,0,0);var tt_T2 = new Array(0,0,0,0,0,0,0,0,1,1,1,0,0,1,0,0);var tt_T3 = new Array(0,0,0,0,0,1,0,0,0,1,1,0,0,1,0,0);var tt_T4 = new Array(0,0,0,0,0,1,0,0,1,1,1,0,0,0,0,0);var tt_Z1 = new Array(0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0);var tt_Z2 = new Array(0,0,0,0,0,0,1,0,0,1,1,0,0,1,0,0);var tt_Z3 = new Array(0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0);var tt_Z4 = new Array(0,0,1,0,0,1,1,0,0,1,0,0,0,0,0,0);var tt_S1 = new Array(0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0);var tt_S2 = new Array(0,0,0,0,0,1,0,0,0,1,1,0,0,0,1,0);var tt_S3 = new Array(0,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0);var tt_S4 = new Array(0,1,0,0,0,1,1,0,0,0,1,0,0,0,0,0);var tt_L1 = new Array(0,1,0,0,0,1,0,0,0,1,1,0,0,0,0,0);var tt_L2 = new Array(0,0,0,0,0,0,1,0,1,1,1,0,0,0,0,0);var tt_L3 = new Array(0,0,0,0,0,1,1,0,0,0,1,0,0,0,1,0);var tt_L4 = new Array(0,0,0,0,0,1,1,1,0,1,0,0,0,0,0,0);var tt_J1 = new Array(0,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0);var tt_J2 = new Array(0,0,0,0,1,1,1,0,0,0,1,0,0,0,0,0);var tt_J3 = new Array(0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,0);var tt_J4 = new Array(0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0);var tt_I1 = new Array(0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0);var tt_I2 = new Array(0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1);var tt_I3 = new Array(0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0);var tt_I4 = new Array(0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1);var table = new Array(1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1, 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1)}elsealert("You need IE4+ to play Tetris!")function dimension2(row,col,num){var i = row * num + col;return (this[i]);}Array.prototype.getd = dimension2;function ShowBlock(x,y,block_type,color){for (var i=0;i<block_tbl.rows.length;i++){for (var j=0;j<block_tbl.rows(i).cells.length;j++){var d2 = i * 4 + j;if (block_type[d2]==1){block_tbl.rows(i).cells(j).style.background = color;}else{block_tbl.rows(i).cells(j).style.background = "";}}}block_div.style.pixelLeft=x;block_div.style.pixelTop=y;}function ShowBlock1(x,y,block_type,color,obj_tabID,obj_divID){for (var i=0;i<obj_tabID.rows.length;i++){for (var j=0;j<obj_tabID.rows(i).cells.length;j++){var d2 = i * 4 + j;if (block_type[d2]==1){obj_tabID.rows(i).cells(j).style.background = color;}else{obj_tabID.rows(i).cells(j).style.background = "";}}}obj_divID.style.pixelLeft=x;obj_divID.style.pixelTop=y;}function Change(inc){var type = curBlock.substr(0,4);var num = curBlock.substr(curBlock.length-1);num = parseInt(num) + inc;if (num>4||num<1) num -= 4*inc;type += num;eval("arr_tmp = " + type + ";");if (CanMove(curX,curY,arr_tmp)){curBlock = type;eval("arr_curBlock = " + curBlock + ";");eval("ShowBlock(block_div.style.pixelLeft,block_div.style.pixelTop," + curBlock + ",colors[" + cid + "]);");}}function CanMove(x,y,block){for (i=0;i<4;i++){for (j=0;j<4;j++){if (block.getd(i,j,4)&table.getd(y/n_IncStep+i,x/n_IncStep+j,16)) return false;}}return true;}function NewBlock(){curBlock = nextBlock;cid = ncid;bid = Math.round(Math.random()*(blocks.length-1));ncid = Math.round(Math.random()*(colors.length-1));nextBlock = blocks[bid];eval("arr_curBlock = " + curBlock + ";");eval("ShowBlock(120,0," + curBlock + ",colors[" + cid + "]);");eval("arr_curBlock = " + curBlock + ";");eval("ShowBlock1(466,116," + nextBlock + ",colors[" + ncid + "],nblock_tbl,nblock_div);");}function SaveBlock(){for (i=0;i<4;i++){for (j=0;j<4;j++){table[(curY/n_IncStep+i)*16+curX/n_IncStep+j]|=arr_curBlock[i*4+j];if (arr_curBlock[i*4+j]==1)if ((curY/n_IncStep+i<21)&&(curX/n_IncStep+j>1)&&(curX/n_IncStep+j<14))table_tbl.rows(curY/n_IncStep+i).cells(curX/n_IncStep+j).style.background = colors[cid];if (table[(curY/n_IncStep+i)*16+curX/n_IncStep+j]!=1)table_tbl.rows(curY/n_IncStep+i).cells(curX/n_IncStep+j).style.background = "black";}}}function DelLine(line){for(i=line;i>0;i--){for(j=2;j<14;j++){table[i*16+j]=table[(i-1)*16+j];}}table_tbl.deleteRow(line);table_tbl.insertRow(0);for (i=0;i<16;i++){table_tbl.rows(0).insertCell();if (i<2||i>13) table_tbl.rows(0).cells(i).style.background="navy";}killedlines++;cll.innerText=parseInt(cll.innerText)+1;}function DelLines(){var c,d,i,j;d=0;curY=block_div.style.pixelTop;for(i=(curY/20+3);i>curY/20-1;i--){c=0;for(j=2;j<14;j++){if (isNaN(table[i*16+j])||i==21) break;c+=table[i*16+j];}if(c==12){DelLine(i);i++;d++;}}if (d>0)sco.innerText=parseInt(sco.innerText)+d*d*36;}function Lucifer(){for(var i=2;i<14;i++){if (table[16+i]==1) return true;}return false;}function GameOver(){gameover=1;clearInterval(gameInterval);block_div.innerHTML="";for (i=0;i<21;i++){for (j=2;j<14;j++){setTimeout("table_tbl.rows(" + i + ").cells(" + j + ").style.background = colors[Math.round(Math.random()*7)];",16*i*j);}}nblock_div.innerHTML = "Game Over";}function document_onkeydown() {if (gameover==1) return;with (block_div.style){curX = pixelLeft;curY = pixelTop;switch (event.keyCode){case 37:if (CanMove(curX-n_IncStep,curY,arr_curBlock))pixelLeft-=n_IncStep;break;case 38:Change(1);break;case 39:if (CanMove(curX+n_IncStep,curY,arr_curBlock))pixelLeft+=n_IncStep;break;case 40:if (CanMove(curX,curY+n_IncStep,arr_curBlock)){pixelTop+=n_IncStep;}else{SaveBlock();DelLines();if (Lucifer()){GameOver();return;}sco.innerText=parseInt(sco.innerText)+2;NewBlock();}break;case 32:if (pause==0){clearInterval(gameInterval);pause=1;}else{gameInterval=window.setInterval("Handle_Interval()",(maxspeed-speed+1)*60);pause=0;}break;case 90:Change(1);break;case 88:Change(-1);break;default:}}}function Handle_Interval(){curX = block_div.style.pixelLeft;curY = block_div.style.pixelTop;if (CanMove(curX,curY+n_IncStep,arr_curBlock)){block_div.style.pixelTop+=n_IncStep;}else{SaveBlock();DelLines();if (Lucifer()){GameOver();return;}sco.innerText=parseInt(sco.innerText)+2NewBlock();}if (killedlines>=clr_per_line){killedlines-=clr_per_line;if (speed<maxspeed)speed++;elsespeed=maxspeed;spd.innerText=speed;clearInterval(gameInterval);gameInterval=window.setInterval("Handle_Interval()",(maxspeed-speed+1)*60);}}//--></SCRIPT><SCRIPT event=onkeydown for=document language=javascript><!-- if (document.all) document_onkeydown()//--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY language=javascript><DIV id=block_div style="LEFT: 60px; TOP: 0px"><TABLE border=0 cellPadding=0 cellSpacing=0 id=block_tbl> <SCRIPT>if (document.all){for (var i=0;i<4;i++){document.write("<tr>");for (var j=0;j<4;j++){document.write("<td style=\"border:1 solid black;\"></td>");}document.write("</tr>");}} </SCRIPT> <TBODY></TBODY></TABLE></DIV><DIV id=nblock_div><TABLE border=0 cellPadding=0 cellSpacing=0 id=nblock_tbl> <SCRIPT>if (document.all){for (var i=0;i<4;i++){document.write("<tr>");for (var j=0;j<4;j++){document.write("<td style=\"height:40;width:40;border:1 outset black;\"></td>");}document.write("</tr>");}} </SCRIPT> <TBODY></TBODY></TABLE></DIV><DIV id=table_div><TABLE border=0 cellPadding=0 cellSpacing=0 id=table_tbl> <SCRIPT>if (document.all){for (var i=0;i<22;i++){document.write("<tr>");for (var j=0;j<16;j++){var d2 = i * 16 + j;if (table[d2]==1)document.write("<td bgcolor=navy></td>");elsedocument.write("<td style=\"background:black;\"></td>");}document.write("</tr>");}} </SCRIPT> <TBODY></TBODY></TABLE></DIV><DIV id=title_div noWrap>Please input speed (1-9) to begin: <INPUT id=speedin size=8> <BUTTON id=but onclick=begintet()>Submit!</BUTTON></DIV><DIV id=infobar_div><TABLE border=1 borderColor=navy cellPadding=0 cellSpacing=0> <TBODY> <TR align=middle> <TD style="COLOR: #99ccff; FONT: 12px system; WIDTH: 56px">Speed:</TD> <TD id=spd style="COLOR: red; FONT: 12px system">1</TD> <TD style="COLOR: #99ccff; FONT: 12px system; WIDTH: 86px">Total Score:</TD> <TD id=sco style="COLOR: red; FONT: 12px system">0</TD> <TD style="COLOR: #99ccff; FONT: 12px system; WIDTH: 96px">Cleared Lines:</TD> <TD id=cll style="COLOR: red; FONT: 12px system">0</TD></TR></TBODY></TABLE></DIV><SCRIPT id=MainSection language=javascript><!--if (document.all){ncid = Math.round(Math.random()*(colors.length-1));bid = Math.round(Math.random()*(blocks.length-1));nextBlock = blocks[bid];NewBlock();}function begintet(){document.all.speedin.disabled=truedocument.all.but.disabled=truespeed=parseInt(document.all.speedin.value);if (isNaN(speed)||speed==null||speed>maxspeed||speed<1) speed=1;spd.innerText=speed;gameInterval=window.setInterval("Handle_Interval()",(maxspeed-speed+1)*60);}//--></SCRIPT></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->