var c; var ctx; const size=25; var w; var h; var t=size; var delay=700; var blocky=0, blockx=0; var randomblock; var initialblock = [0,1,5,7,9,11,15]; var score=0; var level=1; var reset=false; var pause=true; var matrix=[]; const ocolor="Yellow"; const lcolor="Blue"; const zcolor="Red"; const scolor="Green"; const icolor="Turquoise"; const tcolor="Purple"; const jcolor="Orange"; var oblock= [["*","*","0","0"], ["*","*","0","0"], ["0","0","0","0"], ["0","0","0","0"]]; var lblock= [["*","0","0","0"], ["*","0","0","0"], ["*","*","0","0"], ["0","0","0","0"]]; var lblockrot1= [["*","*","*","0"], ["*","0","0","0"], ["0","0","0","0"], ["0","0","0","0"]]; var lblockrot2= [["*","*","0","0"], ["0","*","0","0"], ["0","*","0","0"], ["0","0","0","0"]]; var lblockrot3= [["0","0","*","0"], ["*","*","*","0"], ["0","0","0","0"], ["0","0","0","0"]]; var zblock= [["*","*","0","0"], ["0","*","*","0"], ["0","0","0","0"], ["0","0","0","0"]]; var zblockrot1= [["0","*","0","0"], ["*","*","0","0"], ["*","0","0","0"], ["0","0","0","0"]]; var sblock= [["0","*","*","0"], ["*","*","0","0"], ["0","0","0","0"], ["0","0","0","0"]]; var sblockrot1= [["*","0","0","0"], ["*","*","0","0"], ["0","*","0","0"], ["0","0","0","0"]]; var iblock= [["*","0","0","0"], ["*","0","0","0"], ["*","0","0","0"], ["*","0","0","0"]]; var iblockrot1=[["0","0","0","0"], ["*","*","*","*"], ["0","0","0","0"], ["0","0","0","0"]]; var tblock= [["*","*","*","0"], ["0","*","0","0"], ["0","0","0","0"], ["0","0","0","0"]]; var tblockrot1= [["0","*","0","0"], ["*","*","0","0"], ["0","*","0","0"], ["0","0","0","0"]]; var tblockrot2= [["0","*","0","0"], ["*","*","*","0"], ["0","0","0","0"], ["0","0","0","0"]]; var tblockrot3= [["*","0","0","0"], ["*","*","0","0"], ["*","0","0","0"], ["0","0","0","0"]]; var jblock= [["0","*","0","0"], ["0","*","0","0"], ["*","*","0","0"], ["0","0","0","0"]]; var jblockrot1= [["*","0","0","0"], ["*","*","*","0"], ["0","0","0","0"], ["0","0","0","0"]]; var jblockrot2= [["*","*","0","0"], ["*","0","0","0"], ["*","0","0","0"], ["0","0","0","0"]]; var jblockrot3= [["0","0","0","0"], ["*","*","*","0"], ["0","0","*","0"], ["0","0","0","0"]]; function init() { window.alert("Works best on mobile...") c=document.querySelector("canvas"); ctx=c.getContext('2d'); c.width=size*10 c.height=size*20; w=c.width; h=c.height; for(i=0;i<20;i++) matrix[i]=new Array(10); initMatrix (); randomblock=randomlyChooseBlock(); blockx=Math.floor(minmaxRandom(0,6))*size; } function startGame() { pause=false; resetGame(); } window.addEventListener('load', function() { setInterval(loop, delay); }); function minmaxRandom(min,max) { return Math.random()*(max-min)+min; } function randomlyChooseBlock() { return initialblock[Math.floor(Math.random()*initialblock.length)]; } function drawSquare(x,y,color) { ctx.fillStyle=color; ctx.fillRect(x,y,size,size); } function drawBlock(x,y,block,color) { for(i=0;i<4;i++) { for(j=0;j<4;j++) { if(block[i][j]=="*") drawSquare(x+j*size,y+i*size,color); } } } function drawBorder() { ctx.lineWidth=2; ctx.strokeStyle="rgba(0,255,255,0.3)"; ctx.moveTo(0,0); ctx.lineTo(0,h); ctx.moveTo(w,0); ctx.lineTo(w,h); ctx.moveTo(0,h); ctx.lineTo(w,h); ctx.stroke(); } function drawText(s,x,y) { ctx.font="20px Georgia"; ctx.fillStyle="rgba(255,255,255,0.3)"; ctx.fillText(s,x,y); } function debugoutput(msg,msg2) { var m1 = "Block X:" + msg.toString() + " "; var m2 = "Block Y: " + msg2.toString(); drawText(m1,0,25); drawText(m2,0,45); } function debugoutput2(msg) { var m1 = "Block chosen:" + msg.toString() + " "; drawText(m1,0,35); } function drawScore() { var s = "Score: " + score.toString(); drawText(s,10,25); } function drawLevel() { var s = "Level: " + level.toString(); drawText(s,10,55); } function drawGameOver() { ctx.font="30px Georgia"; ctx.fillStyle="rgba(255,0,0,0.3)"; ctx.fillText("GAME OVER!",w/2-100,h/2); } function initMatrix() { for(j=0;j<20;j++) { for(i=0;i<10;i++) { matrix[i][j]="Black"; } } } function drawMatrix() { for(y=0;y<20;y++) { for(x=0;x<10;x++) { if(matrix[x][y]!="Black") drawSquare(x*size,y*size,matrix[x][y]); } } } function writeBlockData(block,x,y,color) { var nx=x/size; var ny=y/size; for(i=0;i<4;i++) { for(j=0;j<4;j++) { if(block[i][j]=="*") { matrix[nx+j][ny+i]=color; } } } } function blockCollidesLeft(i,x,y) { if(x<0) return true; var b=getBlock(i); var nx=x/size; var ny=y/size; for(j=3;j>=0;j--) { for(i=0;i<4;i++) { //check if block hits the left wall if((nx+i<0)&&(b[j][i]=="*")) return true; // check if theres a block left if((matrix[nx+i][ny+j]!="Black")&&(b[j][i]=="*")) return true; } } return false; } function blockCollidesRight(i,x,y) { var b=getBlock(i); var nx=x/size; var ny=y/size; for(j=3;j>=0;j--) { for(i=0;i<4;i++) { //check if block hits the right wall if((nx+i>10)&&(b[j][i]=="*")) return true; // check if theres a block right if((matrix[nx+i][ny+j]!="Black")&&(b[j][i]=="*")) return true; } } return false; } function slideBlock(i) { var b=getBlock (i); var s = 0; while(!blockCollidesDown (i,blockx,blocky+s)) s+=size; blocky+=(s-size); } function moveBlockLeft(i) { if(!blockCollidesLeft (i,blockx-t,blocky)) blockx-=t; } function moveBlockRight(i) { if(!blockCollidesRight(i, blockx+t,blocky)) blockx+=t; } function translateBlock(dx,dy) { blockx += dx; blocky += dy; } function rotateBlockCW(i) { // no rotation effect for o block (index 0) // cycle through each block and assign next index if(i==1)// L block randomblock=2; else if(i==2) randomblock=3; else if(i==3) randomblock=4; else if(i==4) randomblock=1; // go back to first L block position else if(i==5) // z block randomblock=6; else if(i==6) randomblock=5; else if(i==7)// s block randomblock=8; else if(i==8) randomblock=7; else if(i==9) // i block randomblock=10; else if(i==10) randomblock=9; else if(i==11) // t block randomblock=12; else if(i==12) randomblock=13; else if(i==13) randomblock=14; else if(i==14) randomblock=11; else if(i==15) // J block randomblock=16; else if(i==16) randomblock=17; else if(i==17) randomblock=18; else if(i==18) randomblock=15; // check that we dont collide with anything before rotating if(blockCollidesDown(randomblock,blockx,blocky)||blockCollidesLeft(randomblock,blockx,blocky)||blockCollidesRight(randomblock,blockx,blocky)) randomblock=i; } function rotateBlockCCW(i) { // no rotation effect for o block (index 0) // cycle through each block and assign previous index if(i==1)// L block randomblock=4; // jump to last L block else if(i==2) randomblock=1; else if(i==3) randomblock=2; else if(i==4) randomblock=3; else if(i==5) // z block randomblock=6; else if(i==6) randomblock=5; else if(i==7) // s block randomblock=8; else if(i==8) randomblock=7; else if(i==9) // i block randomblock=10; else if(i==10) randomblock=9; else if(i==11) // t block randomblock=14; else if(i==12) randomblock=11; else if(i==13) randomblock=12; else if(i==14) randomblock=13; else if(i==15) // j block randomblock=18; else if(i==16) randomblock=15; else if(i==17) randomblock=16; else if(i==18) randomblock=17; if(blockCollidesDown(randomblock,blockx,blocky)||blockCollidesLeft(randomblock,blockx,blocky)||blockCollidesRight(randomblock,blockx,blocky)) randomblock=i; } function copyBlockToMatrix(block,x,y) { var b = getBlock(block); var c = getBlockColor(block); writeBlockData(b,x,y,c); } function blockCollidesDown(block,x,y) { var b=getBlock(block); var nx=x/size; var ny=y/size; for(j=3;j>=0;j--) { for(i=0;i<4;i++) { //check if block hits the bottom if((ny+j>20)&&(b[j][i]=="*")) return true; // check if theres a block underneath if((matrix[nx+i][ny+j]!="Black")&&(b[j][i]=="*")) return true; } } return false; } function deleteLine(l) { for(j=l;j>0;j--) { for(i=0;i<10;i++) { matrix[i][j]=matrix[i][j-1]; } } } function clearLines() { var numlines=0; for(y=0;y<20;y++) { var count=0; for(x=0;x<10;x++) { if(matrix[x][y]!="Black") count++; } // if we have a complete line, delete it if(count==10) { numlines++; deleteLine(y); } } // update score if(numlines==4) score += 20*numlines; // give more pts for a tetris else score+=10*numlines; if(score >= 100 && score <200) { level=2; delay=685; } else if(score >= 200 && score < 300) { level=3; delay=670; } else if(score >= 300 && score < 400) { level=4; delay=655; } else if(score >= 400 && score < 500) { level=5; delay=640; } else if(score >= 500 && score < 600) { level=6; delay=625; } else if(score >= 600 && score < 700) { level=7; delay=610; } else if(score >= 700 && score < 800) { level=8; delay=595; } else if(score >= 800 && score < 900) { level=9; delay=580; } else if(score >= 900 && score < 1000) { level=10; delay=565; } else if(score >= 1000) { level=10; delay=565 } } function getBlock(i) { if(i==0) return oblock; else if(i==1) return lblock; else if(i==2) return lblockrot1; else if(i==3) return lblockrot2; else if(i==4) return lblockrot3; else if(i==5) return zblock; else if(i==6) return zblockrot1; else if(i==7) return sblock; else if(i==8) return sblockrot1; else if(i==9) return iblock; else if(i==10) return iblockrot1; else if(i==11) return tblock; else if(i==12) return tblockrot1; else if(i==13) return tblockrot2; else if(i==14) return tblockrot3; else if(i==15) return jblock; else if(i==16) return jblockrot1; else if(i==17) return jblockrot2; else if(i==18) return jblockrot3; } function getBlockColor(i) { if(i==0) return ocolor; else if(i==1) return lcolor; else if(i==2) return lcolor; else if(i==3) return lcolor; else if(i==4) return lcolor; else if(i==5) return zcolor; else if(i==6) return zcolor; else if(i==7) return scolor; else if(i==8) return scolor; else if(i==9) return icolor; else if(i==10) return icolor; else if(i==11) return tcolor; else if(i==12) return tcolor; else if(i==13) return tcolor; else if(i==14) return tcolor; else if(i==15) return jcolor; else if(i==16) return jcolor; else if(i==17) return jcolor; else if(i==18) return jcolor; } function loop() { ctx.clearRect(0,0,w,h); if(blockCollidesDown(randomblock,blockx,blocky+t)) { copyBlockToMatrix (randomblock,blockx,blocky); reset=true; } if(reset) { if(pause == false) { randomblock=randomlyChooseBlock(); blockx=Math.floor(minmaxRandom(0,6))*size; blocky=0; if(blockCollidesDown(randomblock,blockx,blocky)|| blockCollidesRight(randomblock,blockx,blocky)|| blockCollidesLeft(randomblock,blockx,blocky)) { drawGameOver(); pause=true; } reset=false; } else { drawBorder(); drawMatrix(); drawGameOver(); drawScore(); } } if(!pause) { clearLines(); drawScore(); drawLevel(); drawBorder(); draw(randomblock); drawMatrix(); blocky+=t; } } function resetGame() { initMatrix(); randomblock=randomlyChooseBlock(); blockx=Math.floor(minmaxRandom(0,6))*size; blocky=0; score=0; level=1; delay=700; reset=false; pause=false; } function draw(block) { if(block==0) drawBlock(blockx,blocky,oblock,ocolor); else if(block==1) drawBlock(blockx,blocky,lblock,lcolor); else if(block==2) drawBlock(blockx,blocky,lblockrot1,lcolor); else if(block==3) drawBlock(blockx,blocky,lblockrot2,lcolor); else if(block==4) drawBlock(blockx,blocky,lblockrot3,lcolor); else if(block==5) drawBlock(blockx,blocky,zblock,zcolor); else if(block==6) drawBlock(blockx,blocky,zblockrot1,zcolor); else if(block==7) drawBlock(blockx,blocky,sblock,scolor); else if(block==8) drawBlock(blockx,blocky,sblockrot1,scolor); else if(block==9) drawBlock(blockx,blocky,iblock,icolor); else if(block==10) drawBlock(blockx,blocky,iblockrot1,icolor); else if(block==11) drawBlock(blockx,blocky,tblock,tcolor); else if(block==12) drawBlock(blockx,blocky,tblockrot1,tcolor); else if(block==13) drawBlock(blockx,blocky,tblockrot2,tcolor); else if(block==14) drawBlock(blockx,blocky,tblockrot3,tcolor); else if(block==15) drawBlock(blockx,blocky,jblock,jcolor); else if(block==16) drawBlock(blockx,blocky,jblockrot1,jcolor); else if(block==17) drawBlock(blockx,blocky,jblockrot2,jcolor); else if(block==18) drawBlock(blockx,blocky,jblockrot3,jcolor); }

Tetris(re-design)