Group-A P’Faii JS minigame

✨ Tawan Thirawee

<html>

<head>
    <title>Breakout</title>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <link rel="stylesheet" href="../css/breakout.css">
</head>

<body>
    <style>
    @font-face {
    font-family: "PixelSplitter";
    src: url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.eot");
    src: url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.woff") format("woff"), url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.svg#PixelSplitter") format("svg");
}

* {
    padding: 0;
    margin: 0;
}

canvas {
    background-image: url("https://media.discordapp.net/attachments/798210216503672872/807651720050114610/qqq.jpg?width=752&height=564");
    background-size: cover;
    display: block;
    margin: 0 auto;
}

body {
    background-image: url("https://i.pinimg.com/originals/c9/46/27/c94627ca6c5147bc87157df09027ded3.gif");
    background-size: cover;
}

.swal-text {
    font-family: "PixelSplitter", sans-serif;
    font-size: 25px;
}

.swal-button {
    font-family: "PixelSplitter", sans-serif;
    color: #0009;
}
</style>
    <canvas id="board" width="960" , height="640"></canvas>
      <audio id="bgm" autoplay>
        <source src="https://cdn.discordapp.com/attachments/759442664357363753/807658394852655164/Free_music_Retro_arcade_game_No_copyright_80s.mp3" type="audio/mp3">
    </audio>
    <script>
var canvas = document.getElementById("board");
var ctx = canvas.getContext("2d"); //2D render context

//bgm
var audio = document.getElementById("bgm");
audio.volume = 0.1;

//color pool
const colorNormal = ["rgb(31, 194, 242)", "rgb(31, 134, 188)", "rgb(31, 149, 226)", "rgb(31, 93, 194)"]
const colorExtra = ["#77ad2d", "#007c00"]

//ball coordinate and radius
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 0;
var dy = 0;
var ballRadius = 10;
var acceleration = 0.05;
//pad
var padH = 10;
var padW = 100;
var padZ = (canvas.width - padW) / 2;
//pad control
var pressR = false;
var pressL = false;
//brick
var brickRowCount = 6;
var brickColCount = 8;
var brickW = 60;
var brickH = 30;
var brickPad = 10;
var brickOffsetTop = 40;
var brickOffsetLeft = (960 - (brickColCount * (brickW + brickPad)) + brickPad) / 2;
var brickN = 5;
//score
var score = 0;
var scoreToWin = 0;
//life
var lives = 3;

//draw score
function drawScore() {
    ctx.font = "bold 26px PixelSplitter";
    ctx.fillStyle = "rgb(253, 255, 46)";
    ctx.fillText("Score " + score, 30, 50);
}

//draw life
function drawLife() {
    ctx.font = "bold 26px PixelSplitter";
    ctx.fillStyle = "rgb(253, 255, 46)";
    ctx.fillText("Lives " + lives, canvas.width - 130, 50);
}

//mouse control

function mouseMoveHandler(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if (relativeX > 0 && relativeX < canvas.width) {
        padZ = relativeX - padW / 2;
    }
}

//pad control
document.addEventListener("keydown", keyDownHandler, false); // -start control
document.addEventListener("keyup", keyUpHandler, false); // -stop control

function keyDownHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
        pressR = true;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
        pressL = true;
    }
}

function keyUpHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
        pressR = false;
    } else if (e.key == "Left" || e.key == "ArrowLeft") {
        pressL = false;
    }
}

//ball accelaration
function accel() {
    if (dx > 0) {
        dx += acceleration;
    } else {
        dx -= acceleration;
    }
    if (dy > 0) {
        dy += acceleration;
    } else {
        dy -= acceleration;
    }
}

//collide detection
function collisionDetector() {
    for (var col = 0; col < brickColCount; col++) {
        for (var row = 0; row < brickRowCount; row++) {
            var b = bricks[col][row];
            if (b.hitt != 0) {
                if (x + ballRadius > b.x && x - ballRadius < b.x + brickW && y + ballRadius > b.y && y - ballRadius < b.y + brickH) {
                    switch (Math.min(Math.abs((y - ballRadius) - (b.y + brickH)), Math.abs((x + ballRadius) - b.x),
                        Math.abs(b.y - (y + ballRadius)), Math.abs((x - ballRadius) - (b.x + brickW)))) {
                        case Math.abs((y - ballRadius) - (b.y + brickH)):
                            dy = -dy;
                            break;
                        case Math.abs((x + ballRadius) - b.x):
                            dx = -dx;
                            break;
                        case Math.abs(b.y - (y + ballRadius)):
                            dy = -dy;
                            break;
                        case Math.abs((x - ballRadius) - (b.x + brickW)):
                            dx = -dx;
                            break;
                    }
                    b.hitt--;
                    score++;
                    accel();
                    if (b.chance) {
                        lives++;
                    }
                    if (score == scoreToWin) {
                        dx = 0;
                        dy = 0;
                        swal("You Win!!").then(function() {
                            score = 0;
                            scoreToWin = 0;
                            lives = 3;
                            x = canvas.width / 2;
                            y = canvas.height - 30;
                            dx = 3;
                            dy = -3;
                            brickGen();
                        });
                    }
                }
            }
        }
    }
}

//draw ball
function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = "rgb(253, 255, 46)";
    ctx.fill();
    ctx.closePath();
}

//draw pad
function drawPad() {
    ctx.beginPath();
    ctx.rect(padZ, canvas.height - padH, padW, padH);
    ctx.fillStyle = "rgb(71, 100, 141)";
    ctx.fill();
    ctx.closePath();
}

//generate brick
var bricks = [];

//draw brick
function drawBricks() {
    for (var col = 0; col < brickColCount; col++) {
        for (var row = 0; row < brickRowCount; row++) {
            if (bricks[col][row].hitt != 0) {
                var brickX = (col * (brickW + brickPad)) + brickOffsetLeft;
                var brickY = (row * (brickH + brickPad)) + brickOffsetTop;
                bricks[col][row].x = brickX;
                bricks[col][row].y = brickY;
                ctx.beginPath();
                ctx.rect(brickX, brickY, brickW, brickH);
                ctx.fillStyle = colorNormal[bricks[col][row].hitt - 1];
                if (bricks[col][row].chance) {
                    ctx.fillStyle = colorExtra[bricks[col][row].hitt - 1];
                }
                ctx.fill();
                if (bricks[col][row].chance != 0) {
                    ctx.fillStyle = "rgb(253, 255, 46)";
                    ctx.font = "16px PixelSplitter";
                    ctx.fillText("life", brickX + 10, brickY + brickH / 2 + 7);
                }
                //ctx.fillStyle = "black";
                //ctx.fillText(bricks[col][row].hitt, brickX + brickW / 2 - 4, brickY + brickH / 2 + 6);
                ctx.closePath();
            }
        }
    }
}

//draw
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBricks();
    drawBall();
    drawPad();
    drawScore();
    drawLife();
    collisionDetector();
    if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
        accel();
    }
    if (y + dy < ballRadius) {
        dy = -dy;
        accel();
    } else if (y + dy > canvas.height - ballRadius) {
        if (x > padZ && x - ballRadius < padZ + padW && y + ballRadius > padH) {
            dy = -dy;
            accel();
        } else {
            //life
            lives--;
            if (!(lives)) {
                dx = 0;
                dy = 0;
                swal("Game Over").then(function() {
                    score = 0;
                    scoreToWin = 0;
                    lives = 3;
                    x = canvas.width / 2;
                    y = canvas.height - 30;
                    dx = 3;
                    dy = -3;
                    brickGen();
                });
            } else {
                x = canvas.width / 2;
                y = canvas.height - 30;
                dx = 3;
                dy = -3;
                padZ = (canvas.width - padW) / 2;
            }
        }
    }
    //pad
    if (pressR) {
        padZ += 4;
        if (padZ + padW > canvas.width) {
            padZ = canvas.width - padW;
        }
    } else if (pressL) {
        padZ -= 4;
        if (padZ < 0) {
            padZ = 0;
        }
    }
    //ball movement
    x += dx;
    y += dy;
    requestAnimationFrame(draw);
}

draw();
swal("Game Start").then(function() {
    dx = 3;
    dy = -3;
    document.addEventListener("mousemove", mouseMoveHandler, false);
});
</script>
</body>

</html>