Classes and stuff.

index.html

@@ -1,7 +1,16 @@
 <html>
 	<head>
 		<script src="jquery-1.7.1.js"></script>
+		<script src="tetris-canvas.js"></script>
 		<script src="tetris.js"></script>
+		
+		<style>
+			#tetris-board {
+				background-color:black;
+				margin-left:auto;
+				margin-right:auto;
+			}
+		</style>
 	</head>
 
 	<body>

tetris-canvas.js

@@ -0,0 +1,45 @@
+function TetrisCanvas(id) {
+	/********************/
+	/* Global variables */
+	/********************/
+
+	/* Pixel-dependant: */
+	this.pxWidth = -1;
+	this.pxHeight = -1;
+	this.pxRectSize = -1;
+	this.pxSeparatorSize = 2;
+	this.context = null;
+
+	/* Segment-dependant: */
+	this.sWidth = 10;
+	this.sHeight = 15;
+
+	/**************/
+	/* Functions: */
+	/**************/
+	this.drawRectangle = function(x, y, color) {
+		var topLeftCornerX = x*(this.pxSeparatorSize+this.pxRectSize);
+		var topLeftCornerY = this.pxHeight - (y + 1) * (this.pxSeparatorSize + this.pxRectSize) + this.pxSeparatorSize;
+
+		this.context.beginPath();
+		this.context.rect(topLeftCornerX, topLeftCornerY, this.pxRectSize, this.pxRectSize);
+		this.context.fillStyle = color;
+		this.context.fill();
+
+	}
+
+
+	/***************/
+	/* Constructor */
+	/***************/
+	this.TetrisCanvas = function(id) {
+		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");
+	}
+	
+	this.TetrisCanvas(id);
+}

tetris.js

@@ -1,44 +1,8 @@
-/********************/
-/* Global variables */
-/********************/
-
-/* Pixel-dependant: */
-var pxWidth = 168;
-var pxHeight = 253;
-var pxSeparatorSize = 2;
-var pxRectSize = 15;
-var context = null;
-
-/* Segment-dependant: */
-var sWidth = 10;
-var sHeight = 15;
-var segments = 0; 
-
-/**************/
-/* Functions: */
-/**************/
-function drawRectangle(x, y, color) {
-	var topLeftCornerX = x*(pxSeparatorSize+pxRectSize);
-	var topLeftCornerY = pxHeight - y*(pxSeparatorSize+pxRectSize);
-
-	context.beginPath();
-	context.rect(topLeftCornerX, topLeftCornerY, pxRectSize, pxRectSize);
-	context.fillStyle = color;
-	context.fill();
-
-}
-
-
-/**********/
-/* "Main" */
-/**********/
-
 $(document).ready(function() {
-	var canvas = document.getElementById("tetris-board");
-	context = canvas.getContext("2d");
-
-	drawRectangle(0,0,"blue");
-	drawRectangle(1,1,"red");
-	drawRectangle(2,2,"red");
-	drawRectangle(3,1,"red");
-});
+	var canvas = new TetrisCanvas("tetris-board");
+	
+	canvas.drawRectangle(0,0,"blue");
+	canvas.drawRectangle(1,1,"red");
+	canvas.drawRectangle(2,2,"red");
+	canvas.drawRectangle(3,1,"red");
+});