diff --git a/README.md b/README.md
new file mode 100644
index 0000000..06ea719
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+# 2d-breakout-game
+
+[Edit on StackBlitz ⚡️](https://stackblitz.com/edit/2d-breakout-game)
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d64fd3a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+ Gamedev Canvas Workshop
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.ts b/index.ts
new file mode 100644
index 0000000..0c38cc1
--- /dev/null
+++ b/index.ts
@@ -0,0 +1,169 @@
+var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");
+var ballRadius = 10;
+var x = canvas.width / 2;
+var y = canvas.height - 30;
+var dx = 2;
+var dy = -2;
+var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width - paddleWidth) / 2;
+var rightPressed = false;
+var leftPressed = false;
+var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffsetTop = 30;
+var brickOffsetLeft = 30;
+var score = 0;
+var lives = 3;
+
+var bricks = [];
+for (var c = 0; c < brickColumnCount; c++) {
+ bricks[c] = [];
+ for (var r = 0; r < brickRowCount; r++) {
+ bricks[c][r] = { x: 0, y: 0, status: 1 };
+ }
+}
+
+document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);
+document.addEventListener("mousemove", mouseMoveHandler, false);
+
+function mouseMoveHandler(e) {
+ var relativeX = e.clientX - canvas.offsetLeft;
+ if (relativeX > 0 && relativeX < canvas.width) {
+ paddleX = relativeX - paddleWidth / 2;
+ }
+}
+
+function keyDownHandler(e) {
+ if (e.key == "Right" || e.key == "ArrowRight") {
+ rightPressed = true;
+ } else if (e.key == "Left" || e.key == "ArrowLeft") {
+ leftPressed = true;
+ }
+}
+
+function keyUpHandler(e) {
+ if (e.key == "Right" || e.key == "ArrowRight") {
+ rightPressed = false;
+ } else if (e.key == "Left" || e.key == "ArrowLeft") {
+ leftPressed = false;
+ }
+}
+function collisionDetection() {
+ for (var c = 0; c < brickColumnCount; c++) {
+ for (var r = 0; r < brickRowCount; r++) {
+ var b = bricks[c][r];
+ if (b.status == 1) {
+ if (
+ x > b.x &&
+ x < b.x + brickWidth &&
+ y > b.y &&
+ y < b.y + brickHeight
+ ) {
+ dy = -dy;
+ b.status = 0;
+ score++;
+ if (score == brickRowCount * brickColumnCount) {
+ alert("YOU WIN, CONGRATULATIONS!");
+ document.location.reload();
+ // clearInterval(interval);
+ }
+ }
+ }
+ }
+ }
+}
+function drawScore() {
+ ctx.font = "16px Arial";
+ ctx.fillStyle = "#0095dd";
+ ctx.fillText("Score: " + score, 8, 20);
+}
+function drawLives() {
+ ctx.font = "16px Arial";
+ ctx.fillStyle = "#0095DD";
+ ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
+}
+function drawBall() {
+ ctx.beginPath();
+ ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
+ ctx.fillStyle = "#0095DD";
+ ctx.fill();
+ ctx.closePath();
+}
+function drawPaddle() {
+ ctx.beginPath();
+ ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
+ ctx.fillStyle = "#0095DD";
+ ctx.fill();
+ ctx.closePath();
+}
+function drawBricks() {
+ for (var c = 0; c < brickColumnCount; c++) {
+ for (var r = 0; r < brickRowCount; r++) {
+ if (bricks[c][r].status == 1) {
+ var brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
+ var brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
+ bricks[c][r].x = brickX;
+ bricks[c][r].y = brickY;
+ ctx.beginPath();
+ ctx.rect(brickX, brickY, brickWidth, brickHeight);
+ ctx.fillStyle = "#0095DD";
+ ctx.fill();
+ ctx.closePath();
+ }
+ }
+ }
+}
+
+function draw() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ drawBricks();
+ drawBall();
+ drawPaddle();
+ collisionDetection();
+ drawScore();
+ drawLives();
+
+ if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
+ dx = -dx;
+ }
+ if (y + dy < ballRadius) {
+ dy = -dy;
+ } else if (y + dy > canvas.height - ballRadius) {
+ if (x > paddleX && x < paddleX + paddleWidth) {
+ if ((y = y - paddleHeight)) {
+ dy = -dy;
+ }
+ } else {
+ lives--;
+ if (!lives) {
+ // alert("GAME OVER");
+ document.location.reload();
+ // clearInterval(interval); // Needed for Chrome to end game
+ } else {
+ x = canvas.width / 2;
+ y = canvas.height - 30;
+ dx = 2;
+ dy = -2;
+ paddleX = (canvas.width - paddleWidth) / 2;
+ }
+ }
+ }
+
+ if (rightPressed && paddleX < canvas.width - paddleWidth) {
+ paddleX += 7;
+ } else if (leftPressed && paddleX > 0) {
+ paddleX -= 7;
+ }
+
+ x += dx;
+ y += dy;
+ requestAnimationFrame(draw);
+}
+
+draw();
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..2ac53e9
--- /dev/null
+++ b/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "typescript",
+ "version": "0.0.0",
+ "private": true,
+ "dependencies": {}
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..38317a7
--- /dev/null
+++ b/style.css
@@ -0,0 +1,3 @@
+h1, h2 {
+ font-family: Lato;
+}
\ No newline at end of file