diff --git a/index.html b/index.html index 5a40a36..3b5edb1 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,23 @@ + +

+ +

+
+

+ + +
+

Press P to Pause

+

Press Spacebar to rotate Shape

+
+ diff --git a/js/controller.js b/js/controller.js index e36e181..fad5705 100644 --- a/js/controller.js +++ b/js/controller.js @@ -3,7 +3,9 @@ document.body.onkeydown = function( e ) { 37: 'left', 39: 'right', 40: 'down', - 38: 'rotate' + 38: 'rotate', + 32: 'rotate', + 80: 'pause' }; if ( typeof keys[ e.keyCode ] != 'undefined' ) { keyPress( keys[ e.keyCode ] ); diff --git a/js/render.js b/js/render.js index 379ebe1..8641c28 100644 --- a/js/render.js +++ b/js/render.js @@ -3,6 +3,13 @@ var ctx = canvas.getContext( '2d' ); var W = 300, H = 600; var BLOCK_W = W / COLS, BLOCK_H = H / ROWS; + +var score = 0; +var pause = false; +var button = document.getElementById( "newgame" ); +button.addEventListener( "click", newGame ); + + // draw a single square at (x, y) function drawBlock( x, y ) { ctx.fillRect( BLOCK_W * x, BLOCK_H * y, BLOCK_W - 1 , BLOCK_H - 1 ); diff --git a/js/tetris.js b/js/tetris.js index ff92b3c..08637bb 100644 --- a/js/tetris.js +++ b/js/tetris.js @@ -4,20 +4,34 @@ var lose; var interval; var current; // current moving shape var currentX, currentY; // position of current shape + var shapes = [ - [ 1, 1, 1, 1 ], - [ 1, 1, 1, 0, - 1 ], - [ 1, 1, 1, 0, - 0, 0, 1 ], - [ 1, 1, 0, 0, - 1, 1 ], - [ 1, 1, 0, 0, - 0, 1, 1 ], - [ 0, 1, 1, 0, - 1, 1 ], - [ 0, 1, 0, 0, - 1, 1, 1 ] + + [0,0,0,0, + 0,0,0,0, + 1,1,1,1], + + [0,0,0,0, + 1,1,1,0, + 1,0,0,0], + + [0,0,0,0, + 1,1,1,0, + 0,0,1,0], + + [0,0,0,0, + 0,1,1,0, + 0,1,1,0], + + [0,0,0,0, + 0,0,1,1, + 0,1,1,0], + + [0,0,0,0, + 0,1,0,0, + 1,1,1,0] + + ]; var colors = [ 'cyan', 'orange', 'blue', 'yellow', 'red', 'green', 'purple' @@ -59,19 +73,25 @@ function init() { // keep the element moving down, creating new shapes and clearing lines function tick() { - if ( valid( 0, 1 ) ) { - ++currentY; + + if(pause) { + return; } - // if the element settled - else { - freeze(); - clearLines(); - if (lose) { - newGame(); - return false; + + if (valid(0, 1)) { + ++currentY; } - newShape(); - } + // if the element settled + else { + freeze(); + clearLines(); + if (lose) { + newGame(); + return false; + } + newShape(); + } + } // stop shape at its position and fix it to board @@ -87,19 +107,19 @@ function freeze() { // returns rotates the rotated shape 'current' perpendicularly anticlockwise function rotate( current ) { - var newCurrent = []; - for ( var y = 0; y < 4; ++y ) { - newCurrent[ y ] = []; - for ( var x = 0; x < 4; ++x ) { - newCurrent[ y ][ x ] = current[ 3 - x ][ y ]; + var newCurrent = []; + for (var y = 0; y < 4; ++y) { + newCurrent[y] = []; + for (var x = 0; x < 4; ++x) { + newCurrent[y][x] = current[3 - x][y]; + } } - } - return newCurrent; } // check if any lines are filled and clear them function clearLines() { + for ( var y = ROWS - 1; y >= 0; --y ) { var rowFilled = true; for ( var x = 0; x < COLS; ++x ) { @@ -109,6 +129,9 @@ function clearLines() { } } if ( rowFilled ) { + + score = score + 1; + document.getElementById("score").innerHTML = "Score: " + score.toString(); document.getElementById( 'clearsound' ).play(); for ( var yy = y; yy > 0; --yy ) { for ( var x = 0; x < COLS; ++x ) { @@ -123,26 +146,29 @@ function clearLines() { function keyPress( key ) { switch ( key ) { case 'left': - if ( valid( -1 ) ) { + if ( valid( -1 ) && !pause ) { --currentX; } break; case 'right': - if ( valid( 1 ) ) { + if ( valid( 1 ) && !pause ) { ++currentX; } break; case 'down': - if ( valid( 0, 1 ) ) { + if ( valid( 0, 1 ) && !pause ) { ++currentY; } break; case 'rotate': var rotated = rotate( current ); - if ( valid( 0, 0, rotated ) ) { + if ( valid( 0, 0, rotated ) && !pause ) { current = rotated; } break; + case 'pause': + pause = !pause; + break; } } @@ -175,6 +201,8 @@ function valid( offsetX, offsetY, newCurrent ) { } function newGame() { + score = 0; + document.getElementById("score").innerHTML = "Score: " + score.toString(); clearInterval(interval); init(); newShape(); diff --git a/style.css b/style.css index 93fc33a..61cec0a 100644 --- a/style.css +++ b/style.css @@ -3,3 +3,19 @@ canvas { margin: auto; border: 1px solid black; } + +div{ + font-family: sans-serif; + font-size: 14px; + font-weight: bold; + text-align: center; +} + +Button { + display: block; + margin: auto; +} + + + +