Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a Brick Breaker Extension #17

Merged
merged 1 commit into from
Jun 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions Brick Breaker/breakout.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
body {
text-align: center;
}

#board {
background-color: black;
border-top: 5px solid skyblue;
border-left: 5px solid skyblue;
border-right: 5px solid skyblue;
}
231 changes: 231 additions & 0 deletions Brick Breaker/breakout.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,231 @@
//board
let board;
let boardWidth = 500;
let boardHeight = 500;
let context;

//players
let playerWidth = 80; //500 for testing, 80 normal
let playerHeight = 10;
let playerVelocityX = 10; //move 10 pixels each time

let player = {
x : boardWidth/2 - playerWidth/2,
y : boardHeight - playerHeight - 5,
width: playerWidth,
height: playerHeight,
velocityX : playerVelocityX
}

//ball
let ballWidth = 10;
let ballHeight = 10;
let ballVelocityX = 3; //15 for testing, 3 normal
let ballVelocityY = 2; //10 for testing, 2 normal

let ball = {
x : boardWidth/2,
y : boardHeight/2,
width: ballWidth,
height: ballHeight,
velocityX : ballVelocityX,
velocityY : ballVelocityY
}

//blocks
let blockArray = [];
let blockWidth = 50;
let blockHeight = 10;
let blockColumns = 8;
let blockRows = 3; //add more as game goes on
let blockMaxRows = 10; //limit how many rows
let blockCount = 0;

//starting block corners top left
let blockX = 15;
let blockY = 45;

let score = 0;
let gameOver = false;

window.onload = function() {
board = document.getElementById("board");
board.height = boardHeight;
board.width = boardWidth;
context = board.getContext("2d"); //used for drawing on the board

//draw initial player
context.fillStyle="skyblue";
context.fillRect(player.x, player.y, player.width, player.height);

requestAnimationFrame(update);
document.addEventListener("keydown", movePlayer);

//create blocks
createBlocks();
}

function update() {
requestAnimationFrame(update);
//stop drawing
if (gameOver) {
return;
}
context.clearRect(0, 0, board.width, board.height);

// player
context.fillStyle = "lightgreen";
context.fillRect(player.x, player.y, player.width, player.height);

// ball
context.fillStyle = "white";
ball.x += ball.velocityX;
ball.y += ball.velocityY;
context.fillRect(ball.x, ball.y, ball.width, ball.height);

//bounce the ball off player paddle
if (topCollision(ball, player) || bottomCollision(ball, player)) {
ball.velocityY *= -1; // flip y direction up or down
}
else if (leftCollision(ball, player) || rightCollision(ball, player)) {
ball.velocityX *= -1; // flip x direction left or right
}

if (ball.y <= 0) {
// if ball touches top of canvas
ball.velocityY *= -1; //reverse direction
}
else if (ball.x <= 0 || (ball.x + ball.width >= boardWidth)) {
// if ball touches left or right of canvas
ball.velocityX *= -1; //reverse direction
}
else if (ball.y + ball.height >= boardHeight) {
// if ball touches bottom of canvas
context.font = "20px sans-serif";
context.fillText("Game Over: Press 'Space' to Restart", 80, 400);
gameOver = true;
}

//blocks
context.fillStyle = "skyblue";
for (let i = 0; i < blockArray.length; i++) {
let block = blockArray[i];
if (!block.break) {
if (topCollision(ball, block) || bottomCollision(ball, block)) {
block.break = true; // block is broken
ball.velocityY *= -1; // flip y direction up or down
score += 100;
blockCount -= 1;
}
else if (leftCollision(ball, block) || rightCollision(ball, block)) {
block.break = true; // block is broken
ball.velocityX *= -1; // flip x direction left or right
score += 100;
blockCount -= 1;
}
context.fillRect(block.x, block.y, block.width, block.height);
}
}

//next level
if (blockCount == 0) {
score += 100*blockRows*blockColumns; //bonus points :)
blockRows = Math.min(blockRows + 1, blockMaxRows);
createBlocks();
}

//score
context.font = "20px sans-serif";
context.fillText(score, 10, 25);
}

function outOfBounds(xPosition) {
return (xPosition < 0 || xPosition + playerWidth > boardWidth);
}

function movePlayer(e) {
if (gameOver) {
if (e.code == "Space") {
resetGame();
console.log("RESET");
}
return;
}
if (e.code == "ArrowLeft") {
// player.x -= player.velocityX;
let nextplayerX = player.x - player.velocityX;
if (!outOfBounds(nextplayerX)) {
player.x = nextplayerX;
}
}
else if (e.code == "ArrowRight") {
let nextplayerX = player.x + player.velocityX;
if (!outOfBounds(nextplayerX)) {
player.x = nextplayerX;
}
// player.x += player.velocityX;
}
}

function detectCollision(a, b) {
return a.x < b.x + b.width && //a's top left corner doesn't reach b's top right corner
a.x + a.width > b.x && //a's top right corner passes b's top left corner
a.y < b.y + b.height && //a's top left corner doesn't reach b's bottom left corner
a.y + a.height > b.y; //a's bottom left corner passes b's top left corner
}

function topCollision(ball, block) { //a is above b (ball is above block)
return detectCollision(ball, block) && (ball.y + ball.height) >= block.y;
}

function bottomCollision(ball, block) { //a is above b (ball is below block)
return detectCollision(ball, block) && (block.y + block.height) >= ball.y;
}

function leftCollision(ball, block) { //a is left of b (ball is left of block)
return detectCollision(ball, block) && (ball.x + ball.width) >= block.x;
}

function rightCollision(ball, block) { //a is right of b (ball is right of block)
return detectCollision(ball, block) && (block.x + block.width) >= ball.x;
}

function createBlocks() {
blockArray = []; //clear blockArray
for (let c = 0; c < blockColumns; c++) {
for (let r = 0; r < blockRows; r++) {
let block = {
x : blockX + c*blockWidth + c*10, //c*10 space 10 pixels apart columns
y : blockY + r*blockHeight + r*10, //r*10 space 10 pixels apart rows
width : blockWidth,
height : blockHeight,
break : false
}
blockArray.push(block);
}
}
blockCount = blockArray.length;
}

function resetGame() {
gameOver = false;
player = {
x : boardWidth/2 - playerWidth/2,
y : boardHeight - playerHeight - 5,
width: playerWidth,
height: playerHeight,
velocityX : playerVelocityX
}
ball = {
x : boardWidth/2,
y : boardHeight/2,
width: ballWidth,
height: ballHeight,
velocityX : ballVelocityX,
velocityY : ballVelocityY
}
blockArray = [];
blockRows = 3;
score = 0;
createBlocks();
}
14 changes: 14 additions & 0 deletions Brick Breaker/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<title>Breakout</title>
<link rel="stylesheet" href="breakout.css">
<script src="breakout.js"></script>
</head>

<body>
<canvas id="board"></canvas>
</body>
</html>
11 changes: 11 additions & 0 deletions Brick Breaker/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"manifest_version": 3,
"name": "Brick Breaker",
"version": "1.0",
"description": "A Brick Breaker as a Chrome extension.",
"action": {
"default_popup": "index.html"
},
"permissions": []
}

Loading