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.

Sign up for GitHub

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

breakout #1

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

breakout #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
88 changes: 44 additions & 44 deletions breakout-game/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
const rulesBtn = document.getElementById('rules-btn');
const closeBtn = document.getElementById('close-btn');
const rules = document.getElementById('rules');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const rulesBtn = document.getElementById("rules-btn");
const closeBtn = document.getElementById("close-btn");
const rules = document.getElementById("rules");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let score = 0;

Expand All @@ -18,7 +18,7 @@ const ball = {
speed: 4,
dx: 4,
dy: -4,
visible: true
visible: true,
};

// Create paddle props
Expand All @@ -29,7 +29,7 @@ const paddle = {
h: 10,
speed: 8,
dx: 0,
visible: true
visible: true,
};

// Create brick props
Expand All @@ -39,7 +39,7 @@ const brickInfo = {
padding: 10,
offsetX: 45,
offsetY: 60,
visible: true
visible: true,
};

// Create bricks
Expand All @@ -57,7 +57,7 @@ for (let i = 0; i < brickRowCount; i++) {
function drawBall() {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2);
ctx.fillStyle = ball.visible ? '#0095dd' : 'transparent';
ctx.fillStyle = ball.visible ? "#0095dd" : "transparent";
ctx.fill();
ctx.closePath();
}
Expand All @@ -66,24 +66,24 @@ function drawBall() {
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddle.x, paddle.y, paddle.w, paddle.h);
ctx.fillStyle = paddle.visible ? '#0095dd' : 'transparent';
ctx.fillStyle = paddle.visible ? "#0095dd" : "transparent";
ctx.fill();
ctx.closePath();
}

// Draw score on canvas
function drawScore() {
ctx.font = '20px Arial';
ctx.font = "20px Arial";
ctx.fillText(`Score: ${score}`, canvas.width - 100, 30);
}

// Draw bricks on canvas
function drawBricks() {
bricks.forEach(column => {
column.forEach(brick => {
bricks.forEach((column) => {
column.forEach((brick) => {
ctx.beginPath();
ctx.rect(brick.x, brick.y, brick.w, brick.h);
ctx.fillStyle = brick.visible ? '#0095dd' : 'transparent';
ctx.fillStyle = brick.visible ? "#0095dd" : "transparent";
ctx.fill();
ctx.closePath();
});
Expand All @@ -101,7 +101,7 @@ function movePaddle() {

if (paddle.x < 0) {
paddle.x = 0;
}
}
}

// Move ball on canvas
Expand Down Expand Up @@ -131,8 +131,8 @@ function moveBall() {
}

// Brick collision
bricks.forEach(column => {
column.forEach(brick => {
bricks.forEach((column) => {
column.forEach((brick) => {
if (brick.visible) {
if (
ball.x - ball.size > brick.x && // left brick side check
Expand Down Expand Up @@ -161,28 +161,27 @@ function increaseScore() {
score++;

if (score % (brickRowCount * brickColumnCount) === 0) {

ball.visible = false;
paddle.visible = false;

//After 0.5 sec restart the game
setTimeout(function () {
showAllBricks();
score = 0;
paddle.x = canvas.width / 2 - 40;
paddle.y = canvas.height - 20;
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.visible = true;
paddle.visible = true;
},delay)
ball.visible = false;
paddle.visible = false;

//After 0.5 sec restart the game
setTimeout(function () {
showAllBricks();
score = 0;
paddle.x = canvas.width / 2 - 40;
paddle.y = canvas.height - 20;
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.visible = true;
paddle.visible = true;
}, delay);
}
}

// Make all bricks appear
function showAllBricks() {
bricks.forEach(column => {
column.forEach(brick => (brick.visible = true));
bricks.forEach((column) => {
column.forEach((brick) => (brick.visible = true));
});
}

Expand Down Expand Up @@ -212,29 +211,30 @@ update();

// Keydown event
function keyDown(e) {
if (e.key === 'Right' || e.key === 'ArrowRight') {
if (e.key === "Right" || e.key === "ArrowRight") {
paddle.dx = paddle.speed;
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
} else if (e.key === "Left" || e.key === "ArrowLeft") {
paddle.dx = -paddle.speed;
}
}

// Keyup event
function keyUp(e) {
if (
e.key === 'Right' ||
e.key === 'ArrowRight' ||
e.key === 'Left' ||
e.key === 'ArrowLeft'
e.key === "Right" ||
e.key === "ArrowRight" ||
e.key === "Left" ||
e.key === "ArrowLeft"
) {
paddle.dx = 0;
}
}

// Keyboard event handlers
document.addEventListener('keydown', keyDown);
document.addEventListener('keyup', keyUp);
document.addEventListener("keydown", keyDown);
document.addEventListener("keyup", keyUp);

// Rules and close event handlers
rulesBtn.addEventListener('click', () => rules.classList.add('show'));
closeBtn.addEventListener('click', () => rules.classList.remove('show'));
rulesBtn.addEventListener("click", () => rules.classList.add("show"));
closeBtn.addEventListener("click", () => rules.classList.remove("show"));
//start