From 8118c1635173525b3889485ef7151deb30529d23 Mon Sep 17 00:00:00 2001 From: pastukh-dm Date: Wed, 16 Sep 2020 10:52:20 +0200 Subject: [PATCH] Initial commit --- README.md | 3 + index.html | 16 +++++ index.ts | 169 +++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 6 ++ style.css | 3 + 5 files changed, 197 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 index.ts create mode 100644 package.json create mode 100644 style.css 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