//////// variables /////////// let canv, c, height, width, h, w, dpr, current, next, X, Y, setInt, start, again, gameStart, gameOver, scoreText; let board = []; let coords = [[0,0],[0,0],[0,0],[0,0]]; let then, now, first, change, fps, interval, counter, rAF; let left, right, rotate, drop, rotated, tempCoords, bot_reached, is_rotating, rand; let score, level, lines; let cout = (t)=>console.log(t); ///////////////////////////////////// class Piece{ constructor(){ this.rand = Math.floor( Math.random()*7 ); this.piece = Piece.pieces[this.rand]; this.color = Piece.colors[this.rand]; }; static getColor (ind){ return Piece.colors[ind]; } } Piece.T = [[0,0,0], [1,1,1], [0,1,0] ], Piece.L = [[2,0,0], [2,0,0], [2,2,0]], Piece.J = [[0,0,3], [0,0,3], [0,3,3]], Piece.S = [[0,0,0], [0,4,4], [4,4,0]], Piece.Z = [[0,0,0], [5,5,0], [0,5,5]], Piece.O = [[6,6], [6,6]], Piece.I = [[0,7,0,0], [0,7,0,0], [0,7,0,0], [0,7,0,0]]; Piece.pieces = [Piece.T, Piece.L, Piece.J, Piece.S, Piece.Z, Piece.O, Piece.I], Piece.colors = ["violet", "orange", "blue", "lime", "red", "yellow", "cyan"]; //////boolean functions////////////// const isOccupied =(m,x,y)=>{ // checks if a coordinate is in the current piece for(let z=0; z{ // checks if any part of the piece is still hidden above for(let x=0; x{ // checks if the next move(left, right, down) is valid for(let y=0; y 9 || c[y][1]+b > 19){ return true; } } return false; }; const isFilled =(row)=>{ for(let x=0; x{ if( (!isOutOfBounds(-1,0,coords)) && (!collision(coords,-1,0)) ){ X--; updateBoard(-1,0); clearBoard(); drawBoard(); drawScore(); drawText(); drawNext(); } }; const goRight =()=>{ if( (!isOutOfBounds(1,0,coords)) && (!collision(coords,1,0)) ){ X++; updateBoard(1,0); clearBoard(); drawBoard(); drawScore(); drawText(); drawNext(); } }; const goRotate =()=>{ rotated =rotateMatrix(current.piece); tempCoords = fillCoords(rotated); is_rotating = true; if( (!collision(tempCoords,0,0)) && !isOutOfBounds(0,0,tempCoords)){ window.cancelAnimationFrame(rAF); current.piece = JSON.parse( JSON.stringify( rotated )); updateBoard(0,0); is_rotating = false; clearBoard(); drawBoard(); drawScore(); drawText(); drawNext(); animate(); } is_rotating = false; }; const goDrop =()=>{ while(!collision(coords,0,1)){ Y++; if( isOutOfBounds(0,1,coords) ){ break; } updateBoard(0,1,false); } window.cancelAnimationFrame(rAF); clearBoard(); drawBoard(); drawScore(); drawText(); drawNext(); animate(); }; const goKeyboard = (e)=>{ e.preventDefault(); switch(e.which){ case 37: goLeft(); break; case 38: goRotate(); break; case 39: goRight(); break; case 40: goDrop(); break; } } const events =()=>{ left.addEventListener("click", goLeft); right.addEventListener("click", goRight); rotate.addEventListener("click", goRotate); drop.addEventListener("click", goDrop); start.addEventListener("click",(e)=>{ gameStart.style.top = "-455px"; drawNext(); drawText(); drawScore(); animate(); }); again.addEventListener("click",(e)=>{ if(gameOver.style.top == "0px"){ gameOver.style.top = "-455px"; resetStats(); drawBoard(); drawNext(); drawText(); drawScore(); animate(); }else{ gameOver.style.top = "0px"; } }); // keyboard event document.addEventListener("keydown", goKeyboard ); } ///////// end of event functions ///////// //////// draw functions //////////////// const roundRect =(x,y,w,h,r,col,fill)=>{ c.beginPath(); c.moveTo(x+r, y); c.lineTo(x+w-r, y); c.arc(x+w-r,y+r,r,Math.PI*1.5,0); c.lineTo(x+w, y+h-r); c.arc(x+w-r, y+h-r, r, 0,Math.PI*0.5); c.lineTo(x+r,y+h); c.arc(x+r,y+h-r,r, Math.PI*0.5, Math.PI); c.lineTo(x,y+r); c.arc(x+r,y+r,r,Math.PI, Math.PI*1.5); if(fill){ c.fillStyle = col; c.fill(); }else{ c.strokeStyle = "#454545"; c.stroke(); } c.closePath(); } const drawBoard = ()=>{ // draw the board in canvas for(let y=0; y{ // erase the previous frame c.beginPath(); c.clearRect(0,0,w,h); c.closePath(); c.beginPath(); c.rect(25,25,150,300); c.fillStyle = "white"; c.fill(); c.closePath(); } const drawText =()=>{ c.beginPath(); c.font = "12px Arial"; c.fillStyle = "blue"; c.fillText("TETRIS Clone by Jonathan Pizarra", 55, 15); c.closePath(); } const drawScore =()=>{ c.beginPath(); c.rect(190,20,110, 340); c.fillStyle = "#81f2fc"; c.fill(); c.closePath(); c.beginPath(); c.font = "15px Arial"; c.fillStyle = "#454545"; c.fillText("Score: ", 200,90); c.closePath(); c.beginPath(); c.font = "bold 15px Arial"; c.fillStyle = "#454545"; c.fillText(score, 200,110); c.closePath(); c.beginPath(); c.font = "15px Arial"; c.fillStyle = "#454545"; c.fillText("Level: ", 200,140); c.closePath(); c.beginPath(); c.font = "bold 15px Arial"; c.fillStyle = "#454545"; c.fillText(level, 200,160); c.closePath(); } const drawNext = ()=>{ c.beginPath(); c.font = "15px Arial"; c.fillStyle = "#454545"; c.fillText("Next: ", 200,190); c.closePath(); c.beginPath(); c.rect(200,200,75,75); c.strokeStyle = "black"; c.stroke(); c.fillStyle = "#cef"; c.fill(); c.closePath(); for(let y=0; y{ // checks if the next move will collide with other blocks before updating the board or if it already reached the bottom let mCopy ; if(is_rotating){ mCopy = JSON.parse(JSON.stringify(coords)); }else{ mCopy = m; } for(let y=0; y= 0 && c[1]+b <20 && board[c[1]+b][c[0]+a] != 0 && !isOccupied(mCopy,c[0]+a, c[1]+b) ){ return true; } } return false; }; const updateBoard = (a,b)=>{ // main function that updates the moving piece on the board based on params a & b. if(bot_reached ){ bot_reached = false; return; } // erase prev piece data for(let y=0; y= 0 && c[1] < 20) board[c[1]][c[0]] = 0; } if(is_rotating){// if the function is used in rotation event coords = JSON.parse( JSON.stringify(tempCoords) ); } // update the coordinates coords.map((elem)=> { elem[0] += a; elem[1] += b; }); // update the board for(let y=0; y= 0 && c[1] <20) board[c[1]][c[0]] = current.rand+1; } }; const down = ()=>{ // function that makes the piece go down in every interval. if( isOutOfBounds(0,1,coords) || collision(coords, 0,1) ){ current = next; next = new Piece(); // next.piece = Piece.pieces[6]; //test // randomize the initial rotated position of next piece rand = Math.floor(Math.random() * 4); for(let a=0; a 9){ coords.map((el)=>el[0]--); } //adjusting the initial Y position of the new piece so that the first block that will show up starts at 0 while(coords[3][1]+1 <0){ coords.map((el)=>el[1]++); } updateScore(); bot_reached = true; if(collision(coords,0,1) && isStillAbove(coords)){ // game over. :( window.cancelAnimationFrame(rAF); left.removeEventListener("click", goLeft); right.removeEventListener("click", goRight); rotate.removeEventListener("click", goRotate); drop.removeEventListener("click", goDrop); document.removeEventListener("keydown", goKeyboard); scoreText.innerHTML = "Score: " + score + "

Level: " + level + "

Lines: " + lines; gameOver.style.top = "0px"; } }else{ Y++;// go down } }; const createBoard = ()=>{ //resets and fills the board board = []; for(let x=0; x<20; x++){ board.push([0,0,0,0,0,0,0,0,0,0]); } }; const fillCoords = (c)=>{ // reset and fill coordinates array let coords = []; for(let y=0; y{ // rotates a tetromino let n = JSON.parse(JSON.stringify(m)); for(let y=0; y{ let filledRows = []; for(let y=0; y0){ // stop the animation for a while so that the board won't change state while removing rows window.cancelAnimationFrame(rAF); // for(let z=filledRows.length-1; z>=0; z--){ board.splice(filledRows[z],1); lines++; if(lines % 10 === 0){ level++; } } filledRows.forEach((el)=>{ board.unshift( [0,0,0,0,0,0,0,0,0,0] ); }); animate();//resume animation } } const resetStats =()=>{ then = Date.now(); first = then; fps = 30; counter = 0; interval = 1000/fps; score = 0; level = 1; lines = 0; bot_reached = false; is_rotating = false; current = new Piece(); next = new Piece(); rand = Math.floor(Math.random() * 4); for(let a=0; ael[1]++); } events(); createBoard(); } const animate = ()=>{ rAF = window.requestAnimationFrame(animate); now = Date.now(); change = now - then; if(change > interval){ then = now - (change % interval); counter++; if(counter % 10 === 0){ score++; drawScore(); drawNext(); } if(counter >= fps/level){ counter = 0; down(); updateBoard(0,1); clearBoard(); drawText(); drawBoard(); drawScore(); drawNext(); } } } const init = ()=>{ canv = document.getElementById("canv"); left = document.getElementById("left"); right = document.getElementById("right"); rotate = document.getElementById("rotate"); drop = document.getElementById("drop"); start = document.getElementById("start"); again = document.getElementById("again"); gameStart = document.getElementById("gameStart"); gameOver = document.getElementById("gameOver"); scoreText = document.getElementById("score"); events(); c = canv.getContext("2d"); dpr = window.devicePixelRatio; dpr = 3; // setting a default value height = 350; width = 300; h = height * dpr; w = width * dpr; canv.height = h; canv.width = w; c.scale(dpr, dpr); resetStats(); drawBoard(); drawText(); } ////// end of update functions ///////// ////////. test functions const printBoard = ()=>{ let l = ""; for(x of board){ for(y of x) l+=y; console.log(l); l=""; } } const printPiece = (p)=>{ console.log("printing...") let l = ""; for(let y=0; y{ c.forEach((el)=>console.log(el)) } ///////////////////////////////// /**///////////////////////// /**/window.onload = init;/// /**/////////////////////////

Tetris 2019