CODE FOR BRICK BREAKER

•

Follow Following Unfollow

<html>
<canvas id ="GameCanvas" width = "800" height ="600">
<script>
var canvas;
var CanvasContext;
var ballX = 50;
var ballSpeedX = 10;
var ballY =50;
var ballSpeedY=5;
var paddle1X =250;
var paddleHeight = 40;
const PADDLE_WIDTH=100;
const PADDLE_Y = 540;
const BRICK_W = 80;
const BRICK_H = 20;
const BRICK_GAP = 2;
const BRICK_COL = 10;
const BRICK_ROW = 14;
var brickGrid = new Array(BRICK_COL * BRICK_ROW);

function calculateMousePos(evt){
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
var mouseX = evt.clientX-rect.left-root.scrollLeft;
var mouseY = evt.clientY-rect.top-root.scrollTop;
return{x: mouseX, y:mouseY};
}

window.onload = function(){
canvas = document.getElementById('GameCanvas');
CanvasContext = canvas.getContext('2d');
var framesPerSecond = 50;
setInterval(callBoth, 1000/framesPerSecond);

resetBricks();
canvas.addEventListener('mousemove', function(evt){
var mousePos = calculateMousePos(evt);
paddle1X = mousePos.x - (PADDLE_WIDTH/2);
});

}
function callBoth(){
moveEverything();
drawEverything();
}

function moveEverything(){
ballX = ballX + ballSpeedX;
ballY = ballY + ballSpeedY;
if (ballY<0) {ballSpeedY = -ballSpeedY;}
//paddle bounce
if(ballY==PADDLE_Y){
if(ballX>paddle1X&&ballX<paddle1X+PADDLE_WIDTH){
ballSpeedY=-ballSpeedY;
ballSpeedX=(-ballSpeedX +(-(paddle1X+(PADDLE_WIDTH/2))+ballX))
}
}else if (ballY>canvas.height) {
ballReset();
}

if (ballX<0) {ballSpeedX = -ballSpeedX;}
if(ballX>canvas.width){ballSpeedX =-ballSpeedX;}

removeBrickAtPixelCoord(ballX, ballY);
}
function ballReset(){
ballX = canvas.width/2;
ballY = canvas.height/2;
ballSpeedX = 5;
ballSpeedY = 5;
}

function drawBricks(){
for(var eachCol=0; eachCol<BRICK_COL; eachCol++){
for(var eachRow = 0; eachRow< BRICK_ROW; eachRow++){
if (isBrickAtTileCoord(eachCol,eachRow)){
var brickLeftEdgeX = eachCol * BRICK_W;
var brickTopEdgeY = eachRow * BRICK_H;
colorRect(brickLeftEdgeX, brickTopEdgeY, BRICK_W - BRICK_GAP, BRICK_H - BRICK_GAP, 'brown');
}
}
}
}

function resetBricks(){
for(var i=0; i<BRICK_COL*BRICK_ROW; i++) {
brickGrid[i] = 1;
}
}

function brickTileToIndex(tileCol,tileRow) {
return(tileCol + BRICK_COL*tileRow);
}

function isBrickAtTileCoord(brickTileCol,brickTileRow) {
var brickIndex = brickTileToIndex(brickTileCol, brickTileRow);
return (brickGrid[brickIndex] == 1);
}

function removeBrickAtPixelCoord(pixelX,pixelY){
var tileCol = pixelX / BRICK_W;
var tileRow = pixelY / BRICK_H;

   tileCol = Math.floor(tileCol);
    tileRow = Math.floor(tileRow);

   if(tileCol < 0 ||tileCol>=BRICK_COL||
tileRow< 0 ||tileRow>=BRICK_ROW){
return false;
}
   var brickIndex = brickTileToIndex(tileCol,tileRow);

if (brickGrid[brickIndex]== 1){

var prevBallX = ballX - ballSpeedX;
var prevBallY = ballY - ballSpeedY;
var prevTileCol = Math.floor(prevBallX/BRICK_W);
var prevTileRow = Math.floor(prevBallY/BRICK_H);
var bothTestFailed = true;

if(prevTileCol != tileCol){
var adjacentBrickIndex = brickTileToIndex(prevTileCol,tileRow);
if(brickGrid[adjacentBrickIndex] != 1) {
ballSpeedX *= -1;
bothTestsFailed = false;
}
}
if(prevTileRow != tileRow){
var adjacentBrickIndex = brickTileToIndex(tileCol, prevTileRow);
if(brickGrid[adjacentBrickIndex] != 1){
ballSpeedY *= -1;
bothTestsFailed = false;
}
}
if(bothTestsFailed) {
ballSpeedX *= -1;
ballSpeedY *= -1;
}
brickGrid[brickIndex]=0;
}
}

function drawEverything(){

//black canvas
colorRect(0, 0, canvas.width, canvas.height, 'black');

//left paddle
colorRect(paddle1X, PADDLE_Y, PADDLE_WIDTH,10, 'red');

// the ball
colorCircle(ballX,ballY,10,'blue');

function colorCircle(centerX,centerY,radius,drawColor){
CanvasContext.fillStyle=drawColor;
CanvasContext.beginPath();
CanvasContext.arc
(centerX, centerY,radius, 0,Math.PI*2, true);
CanvasContext.fill();
}
//the bricks
drawBricks();
}
function colorRect(bottomX, topY, width, height, drawColor){
CanvasContext.fillStyle=drawColor;
CanvasContext.fillRect(bottomX, topY, width, height);
}
</script>
</html>

CODE FOR BRICK BREAKER

Published: May 16th 2016

Follow Following Unfollow