Added score.

play.html

@@ -0,0 +1,32 @@
+<html>
+	<head>
+		<script src="jquery-1.7.1.js"></script>
+		<script src="utils.js"></script>
+		<script src="tetris-canvas.js"></script>
+		<script src="tetris.js"></script>
+		<script src="tetris-control.js"></script>
+		
+		<style>
+			#tetris-board {
+				background-color:black;
+				margin-left:auto;
+				margin-right:auto;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div><canvas id="tetris-board" height="720" width="480" /></div>
+		<div>
+			<p>Lines: <span id="lines">0</span></p>
+		</div>
+		<div>
+			<ul style>Controls:
+				<li>a,d - left/right</li>
+				<li>w - rotate</li>
+				<li>s - down</li>
+				<li>space - hard drop</li>
+			</ul>
+		</div>
+	</body>
+</html>

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);
 }

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();
 });

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();