Jump to content

Brick Breaker Boredom


fiveworlds

Recommended Posts

Sometimes when I am bored I write games like this one. But I can't figure out how to add magnet and gun powerups.

<style>

#contain{position:fixed;top:10;left:10;width:700;border:2px solid black;background-color:rgba(255, 255, 255, 0.5);}
#alert{background-color:white;border:1px solid black;width:500px;padding:10px;margin:100px;border-radius:10px;opacity:1;}
#close{padding:2%;text-align:center;margin-left:45%;}
#alertheading{text-align:center;}
#alertmessage{text-align:center;}
canvas { position:fixed;top:10;left:10;background: #eee; border:3px solid black;}

</style>

<canvas oncontextmenu="return false;" id="myCanvas" width="700" height="520"></canvas>

<script>
 function custom_alert(head, txt) {
 var d = document;
var container = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
container.id = "contain";
container.style.height = "520px";
var alertbox = container.appendChild(d.createElement("div"));
 alertbox.id = "alert";
 if (d.all && !window.opera)
 alertbox.style.top = document.documentElement.scrollTop + "px";
 alertbox.style.left = (d.documentElement.scrollWidth - alertbox.offsetWidth) / 2 + "px";
 alertbox.style.visiblity = "visible";
var h1 = alertbox.appendChild(d.createElement("h1"));
 h1.appendChild(d.createTextNode(head));
 h1.id = "alertheading";
var msg = alertbox.appendChild(d.createElement("p"));
 msg.innerHTML = txt;
 msg.id= "alertmessage"
var btn = alertbox.appendChild(d.createElement("button"));
 btn.id = "close";
 btn.appendChild(d.createTextNode('ok'));
 btn.focus();
 btn.onclick = function() {
 container.parentNode.removeChild(container);
 document.location.reload();
 };
 alertbox.style.display = "block";
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var greencount =0;
var colorcount =0;
var minutes=0;
var d = new Date();
var n = d.getTime()/1000;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 3;
var dy = -3;
var grey= Math.floor((Math.random() * 10) + 1); ;
var blue= Math.floor((Math.random() * 10) + 1); ;
var purple = Math.floor((Math.random() * 10) + 1); ;
var green = Math.floor((Math.random() * 20) + 10); ;
var black = Math.floor((Math.random() * 20) + 10); ;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 1;
var brickColumnCount = 9;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickRowCount = canvas.width/90;
var brickRowCount = Math.floor(brickRowCount);
var brickOffsetTop = 80;
var brickOffsetLeft = 40;
var score = 0;
var lives = 3;
var count=1;
var bricks = [];

for(c=0; c<brickColumnCount; c++) {
    bricks[c] = [];
    for(r=0; r<brickRowCount; r++) {
        bricks[c][r] = { x: 0, y: 0, status: 1 };
    }
    
}
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
var greycolor= getRandomColor();
var bluecolor= getRandomColor();
var purplecolor = getRandomColor();
var greencolor = getRandomColor();
var blackcolor = getRandomColor();
var bordercolor =getRandomColor();
var greybordercolor= getRandomColor();
var bluebordercolor= getRandomColor();
var purplebordercolor = getRandomColor();
var greenbordercolor = getRandomColor();
var blackbordercolor = getRandomColor();
var bordercolor =getRandomColor();
var greycentrecolor= getRandomColor();
var bluecentrecolor= getRandomColor();
var purplecentrecolor = getRandomColor();
var greencentrecolor = getRandomColor();
var blackcentrecolor = getRandomColor();
var centrecolor =getRandomColor();
var paddlebordercolor =getRandomColor();
var paddlecolor =getRandomColor();
for(greencount=0; greencount<brickColumnCount*brickRowCount; greencount++){
if(greencount%green==0 && greencount %black!=0){count=count+1;}
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("mousemove", mouseMoveHandler, false);

function keyDownHandler(e,dx,dy) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}
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 > 0 && relativeX < canvas.width) {
        paddleX = relativeX - paddleWidth/2;
    }
}
function collisionDetection() {
    for(c=0; c<brickColumnCount; c++) {
        for(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) {
            if((c+r)%green!=0){ b.status = 0;score++;}
            if((c+r)%black==0){b.status = 0; lives++;score++;}
                    dy = -dy;
            
            if(score == (brickRowCount*brickColumnCount)-count) {
                        custom_alert('You Won',"Congratulations");
                     }
                }
            }
        }
    }
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "orange";
    ctx.fill();
    ctx.closePath();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = paddlebordercolor;
    ctx.fill();
    ctx.closePath();
        ctx.beginPath();
    ctx.rect(paddleX+2, canvas.height-paddleHeight+2, paddleWidth-4, paddleHeight-2);
    ctx.fillStyle = paddlecolor;
    ctx.fill();
    ctx.closePath();
}
function drawBricks() {
    for(c=0; c<brickColumnCount; c++) {
        for(r=0; r<brickRowCount; r++) {
            if(bricks[c][r].status == 1) {
                var brickX = (r*(brickWidth+brickPadding))+brickOffsetLeft;
                var brickY = (c*(brickHeight+brickPadding))+brickOffsetTop;
                bricks[c][r].x = brickX;
                bricks[c][r].y = brickY;
                ctx.beginPath();
                ctx.rect(brickX, brickY, brickWidth, brickHeight);
        
                ctx.fillStyle = bordercolor;
        if((c+r)%grey==0){ctx.fillStyle=greybordercolor;}
        if((c+r)%blue==0){ctx.fillStyle=bluebordercolor;}
        if((c+r)%purple==0){ctx.fillStyle=purplebordercolor;}
        if((c+r)%green==0){ctx.fillStyle=greenbordercolor;greencount=greencount+2;}
        if((c+r)%black==0){ctx.fillStyle=blackbordercolor;}
                ctx.fill();
                ctx.closePath();
        
        ctx.beginPath();
                ctx.rect(brickX+2, brickY+2, brickWidth-4, brickHeight-4);
                ctx.fillStyle = "red";
        if((c+r)%grey==0){ctx.fillStyle=greycolor;}
        if((c+r)%blue==0){ctx.fillStyle=bluecolor;}
        if((c+r)%purple==0){ctx.fillStyle=purplecolor;}
        if((c+r)%green==0){ctx.fillStyle=greencolor;greencount=greencount+2;}
        if((c+r)%black==0){ctx.fillStyle=blackcolor;}
                ctx.fill();
                ctx.closePath();
        

        ctx.beginPath();
                ctx.rect(brickX+6, brickY+6, brickWidth-12, brickHeight-12);
                ctx.fillStyle = centrecolor;
        if((c+r)%grey==0){ctx.fillStyle=greycentrecolor;}
        if((c+r)%blue==0){ctx.fillStyle=bluecentrecolor;}
        if((c+r)%purple==0){ctx.fillStyle=purplecentrecolor;}
        if((c+r)%green==0){ctx.fillStyle=greencentrecolor;greencount=greencount+2;}
        if((c+r)%black==0){ctx.fillStyle=blackcentrecolor;}
                ctx.fill();
                ctx.closePath();


        
            }
        }
    }
    ctx.beginPath();
    ctx.rect(0, 0, canvas.width, 55);
    ctx.fillStyle = "black";
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.rect(0, 0, canvas.width, 50);
    ctx.fillStyle = "#000066";
    ctx.fill();
    ctx.closePath();
}
function drawScore() {
    ctx.font = "16px Times New Roman";
    ctx.fillStyle = "white";
    ctx.fillText("Score: "+score, 8, 20);
}
function drawLives() {
    ctx.font = "16px Times New Roman";
    ctx.fillStyle = "white";
    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
}
function drawTime() {
    ctx.font = "16px Times New Roman";
    ctx.fillStyle = "white";
    var d = new Date();
    var time = Math.floor((d.getTime()/1000)-n)
    if(time>60){var d=new Date();n=d.getTime()/1000;minutes=minutes+1;}
    if(minutes>0){
    ctx.fillText("Elapsed Time: "+minutes+" minutes, "+time +" seconds", 8, 40);
    }
    if(minutes<1){
    ctx.fillText("Elapsed Time: "+time+" seconds" , 8, 40);
    }
}
function drawLogo(){
    ctx.font = "16px Times New Roman";
    ctx.fillStyle = "white";
    ctx.fillText("Brick Breaker" , canvas.width/2-60, 20);
}
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBricks();
    drawBall();
    drawPaddle();
    drawScore();
    drawLives();
    drawTime();
    drawLogo();
    collisionDetection();
    
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy < ballRadius) {
        dy = -dy;
    }
    else if(y + dy > canvas.height-ballRadius) {
        if(x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
        }
        else {
            lives--;
            if(!lives) {
                custom_alert('Game Over',"Your Score is: "+score);
                
            }
            else {
                x = canvas.width/2;
                y = canvas.height-30;
                dx = 3;
                dy = -3;
                paddleX = (canvas.width-paddleWidth)/2;
            }
        }
    }
    
    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7;
    }
    
    x += dx;
    y += dy;
    requestAnimationFrame(draw);
}

draw();


</script>
Link to comment
Share on other sites

Shouldn't ball move also in different angles than 45 ?

 

To add magnet, you need a way to stop moving ball, so there should be variable telling that magnet is active, and another variable that ball is currently sticking to player.

If both are true, ball position is relative to player, and moves together.

When user pressed LMB, set velocity vector, clear sticky flag, and ball is starting moving on its own.

In procedure of detecting whether player reflected ball, normally changing velocity vector, add check whether magnet boolean is true, and if so, stick ball to player (sticky flag true, null velocity vector).

Edited by Sensei
Link to comment
Share on other sites

Shouldn't ball move also in different angles than 45 ?

 

Yeah I didn't even notice that one thanks. Easily solved though

function collisionDetection() {
    for(c=0; c<brickColumnCount; c++) {
        for(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) {
            if((c+r)%green!=0){ b.status = 0;score++;}
            if((c+r)%black==0){b.status = 0; lives++;score++;}
                    dy = -dy;
                    dx = Math.random() * 3;
            if(score == (brickRowCount*brickColumnCount)-count) {
                        custom_alert('You Won',"Congratulations");
                     }
                }
            }
        }
    }
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.