BRICK BREAKER GAME USING JAVASCRIPT

BRICK BREAKER USING JAVASCRIPT SOURCE CODE

Demo👀

How Do You Make A Brick Breaker Game Using JavaScript!

1st Step:-

First you open your HTML Editor like - Notepad++,Subline Text,Brackets, etc.

Then start program use Html, Css, Javascript.

2nd Step:-

Copy the CSS code and then Paste your HTML Editor into <head> here </head> section.

CSS Code :-

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

3rd Step:-

Copy the html code and then Paste your HTML Editor into <body> here </body> section.

HTML Code :-

 
<canvas id="myCanvas" width="480" height="320"></canvas>

4th Step:-

Copy the JavaScript code and then Paste your HTML editor into the upper </body>.

Javascript Code:-

 
<script>
    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 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 bricksHit = 0;
    var bricksHitPerLive = 0;
    var lives = 3;

    function drawBall() {
        ctx.beginPath();
        ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
        ctx.fillStyle = setRandomColor();
        ctx.fill();
        ctx.closePath();
    }

    function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = "#41eae6";
        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 = "#fbff47";
                    ctx.fill();
                    ctx.closePath();
                }
            }
        }
    }

    function drawScore() {
        ctx.font = "16px Arial";
        ctx.fillStyle = "#ffffff";
        ctx.fillText("Score: " + score, 8, 20)
    }

    function drawLives() {
        ctx.font = "16px Arial";
        ctx.fillStyle = "#f81903";
        ctx.fillText("Lives: " + lives, canvas.width - 65, 20)
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        drawBricks();
        drawPaddle();
        drawBall();
        drawScore();
        drawLives();
        collisionDetection();

        if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
            dx = -dx;
        }
        if (y + dy < ballRadius + ballRadius) {
            dy = -dy;
        } else if (y + dy > canvas.height - ballRadius) {
            if (x > paddleX && x < paddleX + paddleWidth && y + dy > canvas.height - paddleHeight * 2) {
                dy = -dy - 0.2;
            } else {
                lives--;
                bricksHitPerLive = 0;
                if (!lives) {
                    alert("GAME OVER");
                    document.location.reload();
                } else {
                    x = canvas.width / 2;
                    y = canvas.height - 30;
                    dx = 2;
                    dy = -2;
                    paddleX = (canvas.width - paddleWidth) / 2;
                }
            }
        }
        x += dx;
        y += dy;

        if (rightPressed) {
            paddleX += 5;
            if (paddleX + paddleWidth > canvas.width) {
                paddleX = canvas.width - paddleWidth;
            }
        } else if (leftPressed) {
            paddleX -= 5;
            if (paddleX < 0) {
                paddleX = 0;
            }
        }
        requestAnimationFrame(draw);
    }

    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    document.addEventListener("mousemove", mouseMoveHandler, 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 mouseMoveHandler(e) {
        var relativeX = e.clientX - canvas.offsetLeft;
        if (relativeX > 0 && relativeX < canvas.width) {
            paddleX = relativeX - paddleWidth / 2;
        }
    }

    draw();

    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;
                        bricksHit++;
                        bricksHitPerLive++;
                        score += bricksHitPerLive;
                        if (bricksHit == brickRowCount * brickColumnCount) {
                            alert("YOU WIN, CONGRATULATIONS!\nYOU SCORED " + score + " POINTS.");
                            document.location.reload();
                        }
                    }
                }
            }
        }
    }

    function setRandomColor() {
        var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
        return randomColor;
    }


</script>

How To Download This Project

The first step you click on the ''Download Project'' button you will see a new popup, then click on again the ''Download'' button. Now your project will be downloaded.

1Add

BRICK BREAKER GAME USING JAVASCRIPT | SOURCE CODE

Demo👀

How Do You Make A Brick Breaker Game Using JavaScript!

How To Download This Project

Project source Code

Related Project

Post a Comment

0 Comments

Followers

Followers

Popular Posts

SIMPLE NOTE APP USING JAVASCRIPT | BEGINNER

TO-DO LIST USING JAVASCRIPT | BEGINNER

[Best Of] Javascript vs Java Language Difference Between

1Add

BRICK BREAKER GAME USING JAVASCRIPT | SOURCE CODE

Demo👀

How Do You Make A Brick Breaker Game Using JavaScript!

How To Download This Project

Project source Code

Brick Breaker Game Source Code

Related Project

You may like these posts

Post a Comment

0 Comments

Followers

Followers

Social Plugin

Popular Posts

SIMPLE NOTE APP USING JAVASCRIPT | BEGINNER

TO-DO LIST USING JAVASCRIPT | BEGINNER

[Best Of] Javascript vs Java Language Difference Between