Membuat Game Brick Breaker dengan Javascript

 Kali ini Nubie akan membuat sebuah game yang sedang naik daun, Brick Breaker dengan menggunakan Javascript.

Apa itu Brick Breaker ?

Game brick breaker adalah game yang terdiri dari barisan kotak-kotak yang disebut sebagai Brick, Ball dan juga Paddle. Game ini menitik beratkan cara bermain bagaimana kamu mengatur bola tersebut untuk menghancurkan Brick yang tersusun dan mengarahkannya menggunakan Paddle.

Point kamu akan dihitung bila bola kamu mengenai Brick dan Brick yang kena akan hilang.

Game sederhana Brick Breaker dengan JS

Nah, bagi kamu yang ingin membuat game sederhana Brick Breaker ini kamu dapat menggunakan bahasa pemograman Javascript, loh. Kamu dapat menaruh game sederhana ini di website kamu tanpa membutuhkan ekseksui aplikasi lainnya. Untuk mengaksesnya pun kamu hanya membutuhkan Browser kesayangan kamu.

Nubie programmer akan memberikan contoh sederhana source code membuat Brick Breaker dengan Javascript. 

Contoh Brick Breaker dengan JS

 

Source Code Brick Breaker JS

<canvas height="500" id="myCanvas" width="700"></canvas>

<script type="application/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    var ballRadius = 5;

    var x = canvas.width / 2;
    var y = canvas.height - 30;

    var dx = 2;
    var dy = -2;

    var paddleHeight = 5;
    var paddleWidth = 75;
    var paddleX = (canvas.width - paddleWidth) / 2;

    var rightPressed = false;
    var leftPressed = false;

    var brickRowCount = 10;
    var brickColumnCount = 20;
    var brickWidth = 35;
    var brickHeight = 10;
    var brickPadding = 5;
    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.fillStyle = "#ffffff";
        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 = "#1eff00";
                    ctx.fill();
                    ctx.closePath();
                }
            }
        }
    }

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

    function drawLives() {
        ctx.font = "16px courier";
        ctx.fillStyle = "#fffff";
        ctx.fillText("Lives: " + lives, canvas.width - 80, 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>