diff --git a/Games/Brick_Breaker/README.md b/Games/Brick_Breaker/README.md index 9058a3e049..43962e6d0d 100644 --- a/Games/Brick_Breaker/README.md +++ b/Games/Brick_Breaker/README.md @@ -5,29 +5,39 @@
## **Description 📃** -- This is a classic Brick Breaking Game made using HTML & CSS only that we all know and love! +- Brick Breaker Pro is a classic arcade-style game built with modern web technologies. Challenge your reflexes and strategy as you clear waves of bricks with increasing rewards ## **functionalities 🎮** -- Features of a classic Brick Breaking Game -- Shows Remaining number of bricks on the top +- Start Logic: The game remains paused until you are ready. Click "Start Game" to begin. + +- Dynamic Difficulty: Choose between Easy, Medium, and Hard modes to adjust ball speed and paddle size. + +- High Score Tracking: Your personal best is saved to your browser's local storage. + +- Real-time Stats: Track remaining bricks and current score dynamically at the top of the screen
## **How to play? 🕹ī¸** -- Simply moving the mouse moves the paddle with which u can bounce the ball and destroy the bricks. +- Mouse: Simply moving the mouse moves the paddle automatically. + +- Keyboard: Use the Left and Right Arrow Keys to control the paddle. + +- Goal: Bounce the ball to destroy all bricks without letting it fall below the paddle
## **Scores:** -- +1 for each brick broken till number of bricks is greater than or equal to 60. -- +2 for each brick broken till number of bricks is less than 60 and greater than or equal to 50. -- +5 for each brick broken if number of bricks is less than 50; +- +1 Point: Each brick broken while the remaining bricks are 60 or more. + +- +2 Points: Each brick broken while remaining bricks are less than 60 but 50 or more. + +- +5 Points: Each brick broken while remaining bricks are less than 50.; ## **Screenshots 📸**
- + -
## **Working video 📹** diff --git a/Games/Brick_Breaker/assets/img/brickBreaker.png b/Games/Brick_Breaker/assets/img/brickBreaker.png new file mode 100644 index 0000000000..62165a23e5 Binary files /dev/null and b/Games/Brick_Breaker/assets/img/brickBreaker.png differ diff --git a/Games/Brick_Breaker/index.html b/Games/Brick_Breaker/index.html index 7a8bfbed97..4e14dbf6c5 100644 --- a/Games/Brick_Breaker/index.html +++ b/Games/Brick_Breaker/index.html @@ -1,34 +1,352 @@ - - - - Brick Breaker - - + + + Brick Breaker Pro + + + - - - - -
-

Brick Breaker

-
-
- - -
- Bricks Remaining: 0 -
-
- Score: 0 -
- -
-
- -
- + + + + + + +
+

BRICK BREAKER

+
+ + + +
+
+ +
+
+ Current Score + 0 +
+
+ Bricks Left + 0 +
+
+ Best Score + 0 +
+
+ +
+ + + +
+

Ready?

+

Select difficulty and smash those bricks!

+ +
+
+ + - + \ No newline at end of file diff --git a/Games/Brick_Breaker/script.js b/Games/Brick_Breaker/script.js index 54001cefab..3ec75af872 100644 --- a/Games/Brick_Breaker/script.js +++ b/Games/Brick_Breaker/script.js @@ -1,7 +1,8 @@ -/**********Global Var***********/ + +/********** Global Vars ***********/ var canvas, canvasContext; -// Bricks +// Bricks (rows/cols constant so Bricks Remaining stays 70 and your score math stays intact) const BRICK_W = 80; const BRICK_H = 20; const BRICK_GAP = 2; @@ -26,17 +27,34 @@ const PADDLE_DIST_FROM_EDGE = 60; var mouseX = 0; var mouseY = 0; -/**********General GamePlay***********/ +// UI +let startBtn; +/********** General GamePlay ***********/ window.onload = function () { canvas = document.getElementById("gameCanvas"); canvasContext = canvas.getContext("2d"); + + // UI refs + startBtn = document.getElementById('startBtn'); + + // 30 FPS game loop (always running) var framesPerSecond = 30; setInterval(updateAll, 1000 / framesPerSecond); canvas.addEventListener("mousemove", updateMousePos); + + // Initial board brickReset(); ballRest(); + + // Start: reset board and ball + if (startBtn) { + startBtn.addEventListener('click', () => { + brickReset(); + ballRest(); + }); + } }; function updateAll() { @@ -53,34 +71,35 @@ function brickReset() { brickCount = 0; initializeBrickColors(); - var i; - for (var i = 0; i < 3 * BRICK_COLS; i++) { + // top 3 rows empty + let i = 0; + for (; i < 3 * BRICK_COLS; i++) { brickGrid[i] = false; } + // fill remainder for (; i < BRICK_COLS * BRICK_ROWS; i++) { - if (Math.random() < 0.5) { - brickGrid[i] = true; - } else { - brickGrid[i] = false; - } brickGrid[i] = true; brickCount++; } + + // update UI + updateScore(brickCount); // should show 70 + scoredisplay(false); // keep your original scoring behavior } function ballMove() { - // ballMovement ballX += ballSpeedX; ballY += ballSpeedY; - // ballY + + // bottom edge -> reset board if (ballY > canvas.height) { - // ballSpeedY = -ballSpeedY; ballRest(); brickReset(); - } else if (ballY < 0 && ballSpeedY > 0.0) { + } else if (ballY < 0 && ballSpeedY < 0) { ballSpeedY = -ballSpeedY; } - // ballx + + // sides if (ballX > canvas.width && ballSpeedX > 0.0) { ballSpeedX = -ballSpeedX; } else if (ballX < 0 && ballSpeedX < 0.0) { @@ -101,6 +120,7 @@ function ballBrickColl() { var ballBrickCol = Math.floor(ballX / BRICK_W); var ballBrickRow = Math.floor(ballY / BRICK_H); var brickIndexUnderBall = rowColToArrayIndex(ballBrickCol, ballBrickRow); + if ( ballBrickCol >= 0 && ballBrickCol < BRICK_COLS && @@ -138,77 +158,60 @@ function ballBrickColl() { } } } + if (brickCount === 0) { + // board cleared -> rebuild same layout and continue playing brickReset(); - updateScore(0); - scoredisplay(false); // Reset the score to zero if no bricks are remaining + ballRest(); } else { - updateScore(brickCount); // Update the score with the remaining brick count - scoredisplay(true); // Increment the score if a brick is hit - } - - // colorText(ballBrickCol+","+ballBrickRow+": "+brickIndexUnderBall, mouseX, mouseY, 'white'); - - if(brickCount=== 70){ - scoredisplay(0); + updateScore(brickCount); + scoredisplay(true); } } function updateScore(score) { var scoreElement = document.getElementById("score"); - scoreElement.textContent = "Bricks Remaining: " + score; - + if (scoreElement) scoreElement.textContent = "Bricks Remaining: " + score; } -var s = 0; // Declare the variable outside the function to store the score -var y=0; +// ===== Original scoring logic kept intact ===== +var s = 0; +var y = 0; function scoredisplay(hit) { if (hit) { - s=70-brickCount; - if(s>20){ - y=s-20; - s=s+y*4; + s = 70 - brickCount; + if (s > 20) { + y = s - 20; + s = s + y * 4; } - else if(s>10){ - y=s-10; - s=s+y; + else if (s > 10) { + y = s - 10; + s = s + y; } - - - } else if(brickCount==70){ - s = 0; // Reset the score to zero if no bricks are hit + } else if (brickCount == 70) { + s = 0; } - - - // Update the content of the HTML element with id "s" to display the score var scoredisplayElement = document.getElementById("s"); - scoredisplayElement.textContent = "Score: " + s; + if (scoredisplayElement) scoredisplayElement.textContent = "Score: " + s; } - - - function paddleMove() { - // paddle var paddleTopEdgeY = canvas.height - PADDLE_DIST_FROM_EDGE; var paddleBottomEdgeY = paddleTopEdgeY + PADDLE_THICKNESS; var paddleLeftEdgeX = paddleX; var paddleRightEdgeX = paddleX + PADDLE_WIDTH; + if ( ballY > paddleTopEdgeY && // top of paddle ballY < paddleBottomEdgeY && // bottom of paddle - ballX > paddleLeftEdgeX && // left half of paddle - ballX < paddleRightEdgeX // right half of paddle + ballX > paddleLeftEdgeX && // left half + ballX < paddleRightEdgeX // right half ) { ballSpeedY = -ballSpeedY; var paddleCenterX = paddleX + PADDLE_WIDTH / 2; var ballDistFromCenterX = ballX - paddleCenterX; ballSpeedX = ballDistFromCenterX * 0.35; - - if (brickCount == 0) { - brickReset(); - } } } @@ -226,21 +229,12 @@ function updateMousePos(evt) { mouseY = evt.clientY - rect.top - root.scrollTop; paddleX = mouseX - PADDLE_WIDTH / 2; - - // cheat to test ball in any position - // ballX = mouseX; - // ballY = mouseY; - // ballSpeedY = 4; - // ballSpeedY = -4; } -/**********GamePlay Draw functions***********/ +/********** Draw ***********/ function playArea() { - // gameCanvas colorRect(0, 0, canvas.width, canvas.height, "#222"); - // ball colorCircle(); - // paddle colorRect( paddleX, canvas.height - PADDLE_DIST_FROM_EDGE, @@ -248,7 +242,6 @@ function playArea() { PADDLE_THICKNESS, "#61dafb" ); - drawbricks(); } @@ -268,31 +261,25 @@ function rowColToArrayIndex(col, row) { var brickColors = []; -// Function to initialize the brick colors +// Initialize brick colors function initializeBrickColors() { brickColors = []; for (var i = 0; i < BRICK_ROWS * BRICK_COLS; i++) { - // Add a random color to the array brickColors.push(getRandomColor()); } } -// Function to get a random color +// Random color function getRandomColor() { - var colors = ["#f86257", "#5bb9a9", " #7d5ba6", "#0b5394", "#ec9b00"]; + var colors = ["#f86257", "#5bb9a9", "#7d5ba6", "#0b5394", "#ec9b00"]; return colors[Math.floor(Math.random() * colors.length)]; } -// Call the function to initialize brick colors once during initialization -initializeBrickColors(); - function drawbricks() { for (var eachRow = 0; eachRow < BRICK_ROWS; eachRow++) { for (var eachCol = 0; eachCol < BRICK_COLS; eachCol++) { var arrayIndex = rowColToArrayIndex(eachCol, eachRow); if (brickGrid[arrayIndex]) { - // Choose a random color from an array of colors - colorRect( BRICK_W * eachCol, BRICK_H * eachRow, @@ -300,19 +287,15 @@ function drawbricks() { BRICK_H - BRICK_GAP, brickColors[arrayIndex] ); - } // if brick - } // each brick - } // each brickrow -} // drawbricks + } + } + } +} function colorCircle() { var gradient = canvasContext.createRadialGradient( - ballX, - ballY, - 0, - ballX, - ballY, - 10 + ballX, ballY, 0, + ballX, ballY, 10 ); gradient.addColorStop(0, "#61dafb"); gradient.addColorStop(0.5, "#888"); diff --git a/Games/Brick_Breaker/styles.css b/Games/Brick_Breaker/styles.css index 7cbb899ef7..de965d8e05 100644 --- a/Games/Brick_Breaker/styles.css +++ b/Games/Brick_Breaker/styles.css @@ -1,3 +1,4 @@ + body { margin: 20px; padding: 0; @@ -5,7 +6,6 @@ body { flex-direction: column; align-items: center; justify-content: center; - /* background-color: #282c34; */ background: linear-gradient(#282c34, rgb(4, 4, 17)); color: white; font-family: 'Arial', sans-serif; @@ -14,7 +14,8 @@ body { #header-container { text-align: center; margin: 20px; - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', + 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } #header-container h1 { @@ -22,42 +23,41 @@ body { color: #61dafb; margin: 0; } -.status{ + +.status { display: flex; flex-direction: row; justify-content: space-between; - width: 800px;; + width: 800px; margin-bottom: 20px; } -#score-container #score-display { +/* Style both panels */ +#score-container, +#score-display { font-size: 30px; - margin: 0px; + margin: 0; margin-bottom: 10px; - } -#score-display{ - color:rgb(233, 243, 160); +#score-display { + color: rgb(233, 243, 160); } -.status span{ +.status span { font-size: 20px; - border: 1px solid rgb(103, 101, 101) !important; - padding: 10px; + border: 1px solid rgb(103, 101, 101) !important; + padding: 10px; } -/* #canvas-container { - display: flex; - justify-content: center; - align-items: center; -} */ - #canvas-container { +#canvas-container { display: flex; justify-content: center; - align-items: flex-start !important; /* Align bricks to the top */ + align-items: flex-start !important; /* align bricks to top */ height: calc(100vh - 100px); - top:0; + top: 0; + width: 800px; + max-width: 100%; } #gameCanvas { @@ -68,8 +68,45 @@ body { .home-icon { font-size: 1.5em; position: absolute; - /* top: 20px; */ + top: 20px; left: 20px; color: #61dafb; text-decoration: none; } + +/* ==== Controls (Start only) ==== */ +.controls { + display: flex; + align-items: center; + gap: 12px; + margin: 12px 0 16px; + width: 800px; + max-width: 100%; +} + +.btn { + background: #37b8e5; + border: none; + color: #0e1a22; + padding: 8px 16px; + font-weight: 600; + border-radius: 6px; + cursor: pointer; +} + +.btn:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +@media (max-width: 860px) { + .controls, + .status, + #canvas-container { + width: 100%; + } + #gameCanvas { + max-width: 100%; + height: auto; /* preserve aspect ratio via width scaling */ + } +} diff --git a/Games/Planet_Defense/index.html b/Games/Planet_Defense/index.html index 9fd77a9977..e1fac3d768 100644 --- a/Games/Planet_Defense/index.html +++ b/Games/Planet_Defense/index.html @@ -1,12 +1,566 @@ + + - - + + + Planet Defense: Space Guardian + + + - -
- - + + + +
+ + +
+ + + + +
+ + + + + +
+

GALAXY GUARD

+

Defend the core from incoming alien armadas and asteroids.

+ + +
+

Select Planet

+
+ + + +
+
+ + +
+

Threat Level

+
+ + + +
+
+ + + +
+ AIM + [P] PAUSE + BEST: 0 +
+
+ + + +
+ + + + + \ No newline at end of file