breakout4.js

/*
=============================================================================================
 Name        :  breakout2.js
 Author      :  Cole Dapprich
 Version     :  1.0
 Course      :  CSCE 4250.001 - Topics in Game Development
 Description :  This javascript program, in collaboration with breakout.html, uses the HTML5
                canvas element, a 2-dimensional rendering context, keyboard and mouse
                listeners, and basic animation to create a simple 2D breakout game within a
                browser. Based on code provided by the Mozilla Developer Network (MDN).
                
                THIS VERSION DECREASES USER PERCEPTION OF EFFECTANCE BY HAVING THE CONTROLS
                RESPOND ONLY 75% OF THE TIME
                
 Copyright   :  © 2017 CDsoftworks ( AMDG ) - FREE AND OPEN SOURCE. No rights reserved.
=============================================================================================
*/

// global variables

var bricksArr = [];
var ballRadius = 7;
var paddleHeight = 7;
var paddleWidth = 60;
var halfPaddleWidth = 30;
var brickRowCount = 13;
var brickColumnCount = 5;
var brickWidth = 35;
var brickHeight = 20;
var brickSeparation = 1;
var brickOffsetTop = 30;
var brickOffsetLeft = 4;
var score = 0;
var numLives = 3;

// web-stored variables
var hiScore = sessionStorage.getItem('hiScore');
if(!hiScore) hiScore = 0;
var notFirstPlay = sessionStorage.getItem('notFirstPlay');

// keyboard listener
var rightPressed = false;
var leftPressed = false;

// object coordinates
var x;
var y;
var paddleX;

// ball velocity
var dx = 3;
var dy = -3;

function main()
{
    // welcome message
    if (!notFirstPlay)
        alert("Welcome to Breakout!\n\nPress the left and right arrow keys to move your paddle. Try to elimate all of the blocks without losing all your lives!");
    
    // get canvas and rendering context
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    
    // initialize global variables that require the use of canvas
    x = canvas.width / 2;
    y = canvas.height - 30;
    paddleX = (canvas.width-paddleWidth) / 2;
    
    // key and mouse listeners
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);
    //document.addEventListener("mousemove", mouseMoveHandler, false);
    
    initializeBricks();
    
    function tick() // called every frame
    {
        context.clearRect(0, 0, canvas.width, canvas.height); // reset game
        drawBricks(context);
        drawBall(context);
        drawPaddle(context);
        drawScore(context);
        drawLives(context);
        collisionDetection();
    
        if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) // wall hit
        {
            dx = -dx; // reflect
        }
        if(y + dy < ballRadius) // ceiling hit
        {
            dy = -dy; // reflect
        }
        else if(y + dy > canvas.height-ballRadius) // paddle collision detection
        {
            if(x > paddleX && x < paddleX + paddleWidth)  // paddle hit
            {
                dy = -dy; // reflect
            }
            
            else // death event (paddle miss)
            {
                numLives--;
                
                if(!numLives) // game over
                {
                    sessionStorage.setItem('notFirstPlay', true);
                    if(score > hiScore) sessionStorage.setItem('hiScore', score);
                    hiScore = sessionStorage.getItem('hiScore');
                    if(!hiScore) hiScore = 0;
                    alert("Game over. Click \"OK\" to play again...\n\nHigh Score: " + hiScore);
                    document.location.reload();
                }
                
                else // numLives > 0
                {
                    // reset game
                    x = canvas.width / 2;
                    y = canvas.height - 30;
                    dx = 3;
                    dy = -3;
                    paddleX = (canvas.width - paddleWidth) / 2;
                }
            }
        }
        
        if(rightPressed && paddleX < canvas.width - paddleWidth) // paddle move right
        {
            paddleX += 7;
        }
        
        else if(leftPressed && paddleX > 0) // paddle move left
        {
            paddleX -= 7;
        }
        
        x += dx;
        y += dy;
        requestAnimationFrame(tick, canvas);
    };
    
    tick();
}

function initializeBricks()
{
    for(var i = 0; i < brickColumnCount; i++)
    {
        bricksArr[i] = [];
        for(j = 0; j < brickRowCount; j++) 
        {
            bricksArr[i][j] = { x: 0, y: 0, status: 1 };
        }
    }
}

function collisionDetection()
{
    for(i = 0; i < brickColumnCount; i++)
    {
        for(j = 0; j < brickRowCount; j++) 
        {
            var b = bricksArr[i][j];
            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) // all bricks cleared
                    {
                        // victory event
                        alert("Congratulations, you win!");
                        document.location.reload();
                    }
                }
            }
        }
    }
}

function drawBall(context) 
{
    context.beginPath();
    context.arc(x, y, ballRadius, 0, Math.PI * 2);
    context.fillStyle = "#000000";
    context.fill();
    context.closePath();
}

function drawPaddle(context) 
{
    context.beginPath();
    context.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
    context.fillStyle = "#000000";
    context.fill();
    context.closePath();
}

function drawBricks(context) 
{
    for(var i = 0; i < brickColumnCount; i++)
    {
        for(var j = 0; j < brickRowCount; j++)
        {
            if(bricksArr[i][j].status == 1)
            {
                var brickX = (j * (brickWidth + brickSeparation)) + brickOffsetLeft;
                var brickY = (i * (brickHeight + brickSeparation)) + brickOffsetTop;
                bricksArr[i][j].x = brickX;
                bricksArr[i][j].y = brickY;
                context.beginPath();
                context.rect(brickX, brickY, brickWidth, brickHeight);
                context.fillStyle = "#000000";
                context.fill();
                context.closePath();
            }
        }
    }
}

function drawScore(context)
{
    context.font = "16px Courier Prime";
    context.fillStyle = "#000000";
    context.fillText("Score: " + score, 8, 20);
    context.fillText("High Score: " + hiScore, canvas.width / 2 - 65, 20);
}

function drawLives(context)
{
    context.font = "16px Courier Prime";
    context.fillStyle = "#000000";
    context.fillText("Lives: " + numLives, canvas.width - 85, 20);
}

function keyDownHandler(e)
{
    if(e.keyCode == 39) 
    {
        if(Math.random() < 0.75) rightPressed = true; // won't work 25% of the time
    }
    
    else if(e.keyCode == 37) 
    {
        if(Math.random() < 0.75) leftPressed = true; // won't work 25% of the time
    }
}

function keyUpHandler(e) 
{
    if(e.keyCode == 39) 
    {
        rightPressed = false;
    }
    
    else if(e.keyCode == 37) 
    {
        leftPressed = false;
    }
}

/* function mouseMoveHandler(e)
{
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > halfPaddleWidth && relativeX < (canvas.width - halfPaddleWidth)) // don't allow paddle past edges
    {
        paddleX = relativeX - halfPaddleWidth;
    }
} */