Merge pull request #4907 from vivekvardhan2810/main

[New game]: Pixel Smash

Games/Pixel_Smash/README.md

@@ -0,0 +1,27 @@
+# *Game_Name* 
+Pixel Smash
+
+---
+
+<br>
+
+## *Description 📃*
+Pixel Smash is a thrilling arcade game where players use a paddle to bounce a ball and break through colorful pixelated blocks. With each level, the game becomes more challenging, requiring quick reflexes and strategic thinking. Its blend of retro aesthetics and modern gameplay keeps players engaged, making it perfect for both short bursts and extended play sessions.
+
+## *Functionalities 🎮*
+
+1. Click the "Start Game" button to begin.
+2. Control the paddle to bounce the ball and smash through blocks.
+3. Monitor the score and remaining lives.
+4. When all lives are lost, the game ends, showing your final score and a button to restart the game.
+
+1. Controls: Use the left and right arrow keys to move the paddle.
+2. Scoring: Each block smashed increases your score by 10 points.
+3. Difficulty: As levels progress, the ball speed increases and block patterns become more challenging.
+4. Timer: Players start with 3 lives. Losing the ball deducts a life.
+5. Game Over: When all lives are lost, the final score is displayed with an option to play again.
+
+<br>
+
+## *Screenshots 📸*
+![Screenshot 2024-07-19 181334](https://github.com/user-attachments/assets/8ad91c4c-73fc-4195-b79f-12f5453fbd6f)

Games/Pixel_Smash/game.js

@@ -0,0 +1,115 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+canvas.width = 800;
+canvas.height = 600;
+
+const paddleHeight = 20;
+const paddleWidth = 100;
+let paddleX = (canvas.width - paddleWidth) / 2;
+
+const ballRadius = 10;
+let x = canvas.width / 2;
+let y = canvas.height - 30;
+let dx = 2;
+let dy = -2;
+
+const brickRowCount = 5;
+const brickColumnCount = 8;
+const brickWidth = 75;
+const brickHeight = 20;
+const brickPadding = 10;
+const brickOffsetTop = 30;
+const brickOffsetLeft = 30;
+
+const bricks = [];
+for (let c = 0; c < brickColumnCount; c++) {
+    bricks[c] = [];
+    for (let r = 0; r < brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}
+
+document.addEventListener("mousemove", mouseMoveHandler);
+
+function mouseMoveHandler(e) {
+    const relativeX = e.clientX - canvas.offsetLeft;
+    if (relativeX > 0 && relativeX < canvas.width) {
+        paddleX = relativeX - paddleWidth / 2;
+    }
+}
+
+function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
+    ctx.fillStyle = "#0f0";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0f0";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawBricks() {
+    for (let c = 0; c < brickColumnCount; c++) {
+        for (let r = 0; r < brickRowCount; r++) {
+            if (bricks[c][r].status == 1) {
+                const brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
+                const brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#0f0";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}
+
+function collisionDetection() {
+    for (let c = 0; c < brickColumnCount; c++) {
+        for (let r = 0; r < brickRowCount; r++) {
+            const b = bricks[c][r];
+            if (b.status == 1) {
+                if (x > b.x && x < b.x + b.width && y > b.y && y < b.y + b.height) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBricks();
+    drawBall();
+    drawPaddle();
+    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 {
+            document.location.reload();
+        }
+    }
+
+    x += dx;
+    y += dy;
+    requestAnimationFrame(draw);
+}
+
+draw();

Games/Pixel_Smash/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pixel Smash</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="game-container">
+        <canvas id="gameCanvas"></canvas>
+    </div>
+    <script src="game.js"></script>
+</body>
+</html>

Games/Pixel_Smash/styles.css

@@ -0,0 +1,22 @@
+body {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: #000;
+    font-family: 'Press Start 2P', cursive;
+}
+
+.game-container {
+    position: relative;
+    width: 800px;
+    height: 600px;
+    border: 2px solid #0f0;
+    box-shadow: 0 0 20px #0f0;
+}
+
+canvas {
+    display: block;
+    background: #111;
+}