Javascript Brick Breaker | Brick Breaker Javascript Code







Javascript Brick Breaker | Brick Breaker Javascript Code

Welcome🎉 to Code With Random blog. In this blog, we learn how we create the Javascript Brick Breaker. We use HTML, Css, and javascript for this Javascript Brick Breaker. I hope you enjoy our blog so let’s start with a basic HTML structure for the Javascript Brick Breaker.

HTML Code 

 <!DOCTYPE html>  
<html>
<head>
<meta charset="utf-8">
<title>game on canvas </title>
</head>
<body>
<canvas id="myCanvas" width="730" height="520"></canvas>
</body>
</html>

There is all the HTML code for the Javascript Brick Breaker. Now, you can see an output with CSS, then we write javascript for the Javascript Brick Breaker.

output

Javascript Brick Breaker | Brick Breaker Javascript Code
Blank Output With Canvas Tag

CSS code

  <style>  
* {
padding: 0;
margin: 0;
}
canvas {
background: #eee;
display: block;
margin: 0 auto;
}
</style>

Css Updated output

Javascript Brick Breaker | Brick Breaker Javascript Code

Javascript code 

     //rectangle  
// ctx.beginPath();
// ctx.rect(20,40,50,50);
// ctx.fillStyle = "grey";
// ctx.fill();
// ctx.closePath();
//circle
// ctx.beginPath();
// ctx.arc(240,160,20,0,Math.PI*2,false);
// ctx.strokeStyle = "#FF0000";
// ctx.stroke();
// ctx.closePath();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;
var ballRadius = 10;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width - paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 3;
var brickColumnCount = 8;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
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 };
}
}
var score = 0;
var lives = 3;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
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, CONGRATS");
document.location.reload();
}
}
}
}
}
}
function drawScore() {
ctx.font = '16px Arial';
ctx.fillStyle = '#0095DD';
ctx.fillText("Score:" + score, 8, 20);
}
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 drawLives() {
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
}
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, 10, 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 draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawBall();
drawPaddle();
drawScore();
drawLives();
collisionDetection();
x += dx;
y += dy;
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) { dy = -dy; }
else {
lives--;
if (!lives) {
alert("GAME OVER");
document.location.reload();
// 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 += 7;
if (paddleX + paddleWidth > canvas.width) {
paddleX = canvas.width - paddleWidth;
}
}
else if (leftPressed) {
paddleX -= 7;
if (paddleX < 0) {
paddleX = 0;
}
}
requestAnimationFrame(draw);
}
draw();

Final output

Javascript Brick Breaker | Brick Breaker Javascript Code

Javascript Brick Breaker | Brick Breaker Javascript Code
Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Javascript Brick Breaker. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Javascript Brick Breaker using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Share on:

Leave a Comment