diff --git a/play.html b/play.html
new file mode 100755
index 0000000..f4195c5
--- /dev/null
+++ b/play.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Controls:
+ - a,d - left/right
+ - w - rotate
+ - s - down
+ - space - hard drop
+
+
+
+
diff --git a/tetris-canvas.js b/tetris-canvas.js
index 3af3c9e..20b2ad7 100644
--- a/tetris-canvas.js
+++ b/tetris-canvas.js
@@ -1,4 +1,4 @@
-function TetrisCanvas(id, width, height) {
+function TetrisCanvas(id, width, height, linesId) {
/***********/
/* Colors: */
/***********/
@@ -28,6 +28,9 @@ function TetrisCanvas(id, width, height) {
this.sWidth = width;
this.sHeight = height;
+ /* Score box: */
+ this.linesElement = 0;
+
/**************/
/* Functions: */
/**************/
@@ -51,17 +54,27 @@ function TetrisCanvas(id, width, height) {
}
}
+ this.updateLines = function(newLines) {
+ if (this.linesElement != 0) {
+ this.linesElement.html(newLines);
+ }
+ }
+
/***************/
/* Constructor */
/***************/
- this.TetrisCanvas = function(id) {
+ this.TetrisCanvas = function(id, linesId) {
var canvas = document.getElementById(id);
this.pxHeight = $("#"+id).height();
this.pxWidth = $("#"+id).width();
this.pxRectSize = (this.pxWidth - (this.pxSeparatorSize * this.sWidth)) / (this.sWidth);
this.context = canvas.getContext("2d");
+
+ if (linesId) {
+ this.linesElement = $("#"+linesId);
+ }
}
- this.TetrisCanvas(id);
+ this.TetrisCanvas(id, linesId);
}
diff --git a/tetris-control.js b/tetris-control.js
index 8693be3..e9d5a76 100644
--- a/tetris-control.js
+++ b/tetris-control.js
@@ -62,6 +62,6 @@ function onKeyUp(e) {
$(document).ready(function() {
initControls();
- game = new TetrisGame("tetris-board");
+ game = new TetrisGame("tetris-board", "lines");
game.startGame();
});
diff --git a/tetris.js b/tetris.js
index d2d72bf..a349109 100644
--- a/tetris.js
+++ b/tetris.js
@@ -1,4 +1,4 @@
-function TetrisGame(id) {
+function TetrisGame(id, linesId) {
/*********/
/* Enum: */
/*********/
@@ -28,10 +28,11 @@ function TetrisGame(id) {
/* Variables: */
/**************/
this.gameIsOver = false;
+ this.linesCleared = 0;
this.width = 10;
this.height = 15;
- this.canvas = new TetrisCanvas(id, this.width, this.height);
+ this.canvas = new TetrisCanvas(id, this.width, this.height, linesId);
this.board = createArray(this.width, this.height);
this.currentBrickId = 0;
@@ -253,6 +254,10 @@ function TetrisGame(id) {
for (var i = 0; i < filledLines.length; i++) {
this.removeLine(filledLines[i]-i);
}
+
+ this.linesCleared += filledLines.length;
+ this.canvas.updateLines(this.linesCleared);
+
this.drawUnlock();
this.redraw();