script.js

const GameStates = Object.freeze({
    RUNNING: "RUNNING",
    PAUSED: "PAUSED",
    GAME_OVER: "GAME_OVER"
    //   NOT_STARTED: "NOT_STARTED"
});

const spells = [
    {
        name: "Ball Speed Boost",
        apply: () => {
            ballSpeed -= 80;
            console.log("Ball Speed boosted to", ballSpeed);
        },
        reverse: () => {
            ballSpeed += 80;
            console.log("Ball Speed back to", ballSpeed);
        },
        duration: 5000
    },
    {
        name: "ball size decreased",
        apply: () => {
            ballRadius -= 10;
            console.log("ball size decreased to", ballRadius);
        },
        reverse: () => {
            ballRadius += 10;
            console.log("ball size increased to", ballRadius);
        },
        duration: 5000
    },
    {
        name: "Extra Trial",
        apply: () => {
            Trials += 1;
            document.getElementById("score").innerHTML = heartImgSrc.repeat(Trials);
            console.log("Extra trial added. Total trials:", Trials);
        },
        reverse: () => {
          return;
        },
        duration: 5000
    },
    {
        name:"increase paddle speed",
        apply: () => {
           movingSpeed += 20;
            console.log("Paddle speed increased");
        }
        ,
        reverse: () => {
            movingSpeed -= 20;
            console.log("Paddle speed back to normal");
        },
        duration: 5000
    }
    ,
    {
        name:"decrease ball speed",
        apply: () => {
           ballSpeed += 80;
            console.log("Ball speed decreased");
        }
        ,
        reverse: () => {
            ballSpeed -= 80;
            console.log("Ball speed back to normal");
        },
        duration: 5000
    }
    ,

    // TODO: add more spells as previous
    // spells like increase the size of paddle but take care that collision is still correct
    // increase ball size
    // decrease paddle size
    
    
];

const canvas = document.getElementById('cv');
const ctx = canvas.getContext('2d');
const statebtn = document.getElementById('gameStatebtn');
const timer = document.getElementById('timer');
const heartImgSrc = '<img src="./assets/img/heart.png" class="heart-icon">';
// Set canvas dimensions
canvas.width = 800;
canvas.height = 600;
let ballRadius = 30;
let xBall=35;
let yBall=35;
let xpaddle = (canvas.width - 100) / 2;
let xdiraction = 1;
let ydiraction = 1;
let Trials = 3 ;
let gameState = GameStates.PAUSED;
let gameTime = 0;
let ballSpeed = 100;
let spellTimerId = null;
var spellX = 0;
let spellY = 0;
let spell = false;
let movingSpeed = 20;
let highScore = localStorage.getItem('brickBreakerHighScore') || 0;
function setUp()
{
    if(gameState != GameStates.RUNNING) return;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();
    if(spell) drawSpell();
    timer.innerText = getTimerValue();
// --- NEW: DRAW HIGH SCORE ---
    ctx.font = "20px Arial";
    ctx.fillStyle = "black";
     // Shows "High Score: 15s" at the top left
    ctx.fillText("High Score: " + (highScore / 1000).toFixed(0) + "s", 20, 30); 

    if(!spell && Math.random() > 0.95){
        startSpell();
    }
}

function getTimerValue() {
    let time = gameTime / 1000;
    let mins = Math.floor(time / 60);
    let secs = Math.floor(time % 60);

    if (secs < 10) secs = "0" + secs;

    return `${mins}:${secs}`;
}


function drawBall()
{
    ctx.beginPath();
    ctx.arc(xBall, yBall, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = "red";
    ctx.fill();
}

function drawPaddle()
{
    ctx.beginPath();
    ctx.rect(xpaddle, canvas.height -20 , 100, 10);
    ctx.fillStyle = "blue";
    ctx.fill();
}

function moveLeft()
{
    if(gameState != GameStates.RUNNING) return;
    if( xpaddle <=0)
    {
        xpaddle =0;
        return;
    }
    xpaddle -=movingSpeed;
    setUp();
}

function moveRight()
{
    if(gameState != GameStates.RUNNING) return;
    if( xpaddle >= canvas.width-100 )
    {
        return;
    }
    xpaddle +=movingSpeed;
    setUp();
}

function bounce(x,y)
{
    if(CollisionWithPaddle(x,y)||y-ballRadius<=0)
    {
       ydiraction = -ydiraction; 
    }
    else if(y+ballRadius>=canvas.height)
        {
            Trials -=1;
            document.getElementById("score").innerHTML = heartImgSrc.repeat(Trials);
            if(Trials==0)
            {
                if (gameTime > highScore) {
                    highScore = gameTime;
                    localStorage.setItem('brickBreakerHighScore', highScore);
                    alert("New Record! " + (highScore/1000).toFixed(0) + "s");
            }
            // Game Over
            document.getElementById("score").innerHTML = "<b>GAME OVER</b>";
            clearInterval(ballTimerId);
           alert("Game Over Your Best Score is: " + (highScore/1000).toFixed(0) + "s");
            }
            else
            {
            // Reset Ball Position
            xBall=35;
            yBall=35;
            xdiraction = 1;
            ydiraction = 1;
            }

        }
    
    else if(x-ballRadius<=0 ||x+ballRadius>=canvas.width)
    {
        xdiraction = -xdiraction;
    }
    
}

function CollisionWithPaddle(x,y)
{
    if(x>xpaddle && x<xpaddle+100 && y+30 >= canvas.height -20)
    {
        return true;
    }
    return false;
}

function toggleGameState(){
    if(gameState == GameStates.RUNNING){
        gameState = GameStates.PAUSED;
        clearInterval(ballTimerId);
        clearInterval(spellTimerId)
        gameStatebtn.textContent = "Resume";
    }
    else if(gameState == GameStates.PAUSED){
        gameState = GameStates.RUNNING;
        startBall();
        startSpell();
        gameStatebtn.textContent = "Pause";
    }
}

function startBall(){
    ballTimerId =  setInterval( function(){ 
        if( xBall >= canvas.width || yBall >= canvas.height)
        {
            xBall=0;
            yBall=0;
        }
        xBall +=10*xdiraction;
        yBall +=10*ydiraction;
        setUp();
        bounce(xBall,yBall);
        gameTime += ballSpeed;
            
    }, ballSpeed);
}

function startSpell(){
    if(!spell){
        spellX = getRandomNumberBetween(30, canvas.width - 30);
    }

    spell = true;
    spellTimerId =  setInterval( function(){ 
        if(spellY == canvas.height){
            stopSpell();
            return;
        }

        spellY += 10;
        if(CollisionWithPaddle(spellX, spellY)){
            console.log("spell catched")
            castSpell(getRandomNumberBetween(0, spells.length));
            stopSpell();
        }
    }, 100);
}

function stopSpell(){
    clearInterval(spellTimerId);
    spellY = 0;
    spell = false;
}

function castSpell(index) {
    const spell = spells[index];
    
    if (!spell) return;

    spell.apply();

    setTimeout(() => {
        spell.reverse();
    }, spell.duration);
}

function drawSpell()
{
    ctx.beginPath();
    ctx.arc(spellX, spellY, 20, 0, Math.PI * 2);
    ctx.fillStyle = "green";
    ctx.fill();
}

function getRandomNumberBetween(a, b) {
    return Math.floor(Math.random() * b) + a;
}  

setUp();