Merge branch 'main' into add-profile

kunjgit · Jun 7, 2024 · e12029f · e12029f
2 parents 57e07b8 + f668d66
commit e12029f
Show file tree

Hide file tree

Showing 68 changed files with 3,669 additions and 301 deletions.
diff --git a/Games/Brick Buster/README.md b/Games/Brick Buster/README.md
@@ -0,0 +1,21 @@
+# Brick Buster
+
+## Description
+Brick Buster is a classic arcade game where players control a paddle at the bottom of the screen, bouncing a ball to destroy bricks at the top of the screen. The goal is to clear all the bricks by hitting them with the ball while preventing the ball from falling off the bottom of the screen.
+
+## Features
+- *Paddle Control*: Players control the paddle using the left and right arrow keys.
+- *Ball Physics*: The ball moves around the screen, bouncing off walls, the paddle, and bricks.
+- *Brick Destruction*: Bricks are destroyed when hit by the ball, and the player scores points.
+- *Level Completion*: The game progresses to the next level when all bricks are destroyed.
+- *Game Over*: The game ends if the ball falls off the bottom of the screen.
+- *Score Tracking*: Displays the player's score.
+- *Winning Condition*: The player wins if all bricks are destroyed.
+
+## How to Play
+1. Use the left and right arrow keys to move the paddle.
+2. Bounce the ball off the paddle to hit and destroy the bricks.
+3. Prevent the ball from falling off the bottom of the screen.
+4. Clear all the bricks to win the game.
+
+Enjoy playing Brick Buster!
diff --git a/Games/Brick Buster/index.html b/Games/Brick Buster/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Brick Buster</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="score" id="score">Score: 0</div>
+        <div class="game-area" id="game-area">
+            <div class="paddle" id="paddle"></div>
+            <div class="ball" id="ball"></div>
+            <div class="bricks" id="bricks"></div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Brick Buster/script.js b/Games/Brick Buster/script.js
@@ -0,0 +1,117 @@
+const paddle = document.getElementById('paddle');
+const ball = document.getElementById('ball');
+const bricksContainer = document.getElementById('bricks');
+const scoreElement = document.getElementById('score');
+
+const gameArea = document.getElementById('game-area');
+const gameAreaRect = gameArea.getBoundingClientRect();
+
+const paddleWidth = paddle.clientWidth;
+const paddleHeight = paddle.clientHeight;
+const ballSize = ball.clientWidth;
+
+let score = 0;
+let ballX = gameAreaRect.width / 2;
+let ballY = gameAreaRect.height / 2;
+let ballSpeedX = 3;
+let ballSpeedY = 3;
+let paddleX = (gameAreaRect.width - paddleWidth) / 2;
+
+const rows = 5;
+const cols = 10;
+const brickWidth = 80;
+const brickHeight = 20;
+const brickMargin = 10;
+
+let bricks = [];
+
+function createBricks() {
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+            const brick = document.createElement('div');
+            brick.classList.add('brick');
+            brick.style.left = `${col * (brickWidth + brickMargin)}px`;
+            brick.style.top = `${row * (brickHeight + brickMargin)}px`;
+            bricksContainer.appendChild(brick);
+            bricks.push(brick);
+        }
+    }
+}
+
+function movePaddle(event) {
+    const step = 20;
+    if (event.key === 'ArrowLeft' && paddleX > 0) {
+        paddleX -= step;
+    } else if (event.key === 'ArrowRight' && paddleX < gameAreaRect.width - paddleWidth) {
+        paddleX += step;
+    }
+
+    updatePaddlePosition();
+}
+
+function updatePaddlePosition() {
+    paddle.style.left = `${paddleX}px`;
+}
+
+function resetBall() {
+    ballX = gameAreaRect.width / 2;
+    ballY = gameAreaRect.height / 2;
+    ballSpeedX = 3;
+    ballSpeedY = -3;
+}
+
+function updateBall() {
+    ballX += ballSpeedX;
+    ballY += ballSpeedY;
+
+    if (ballX <= 0 || ballX >= gameAreaRect.width - ballSize) {
+        ballSpeedX = -ballSpeedX;
+    }
+
+    if (ballY <= 0) {
+        ballSpeedY = -ballSpeedY;
+    }
+
+    if (ballY >= gameAreaRect.height - ballSize) {
+        alert('Game Over');
+        resetBall();
+    }
+
+    const paddleRect = paddle.getBoundingClientRect();
+    const ballRect = ball.getBoundingClientRect();
+
+    if (ballRect.bottom >= paddleRect.top && ballRect.right >= paddleRect.left && ballRect.left <= paddleRect.right) {
+        ballSpeedY = -ballSpeedY;
+    }
+
+    bricks.forEach((brick, index) => {
+        const brickRect = brick.getBoundingClientRect();
+        if (ballRect.right >= brickRect.left && ballRect.left <= brickRect.right && ballRect.bottom >= brickRect.top && ballRect.top <= brickRect.bottom) {
+            ballSpeedY = -ballSpeedY;
+            bricksContainer.removeChild(brick);
+            bricks.splice(index, 1);
+            score++;
+            scoreElement.textContent = `Score: ${score}`;
+        }
+    });
+
+    ball.style.left = `${ballX}px`;
+    ball.style.top = `${ballY}px`;
+
+    if (bricks.length === 0) {
+        alert('You Win!');
+        resetBall();
+        createBricks();
+    }
+}
+
+function gameLoop() {
+    updateBall();
+    requestAnimationFrame(gameLoop);
+}
+
+document.addEventListener('keydown', movePaddle);
+
+createBricks();
+resetBall();
+gameLoop();
diff --git a/Games/Brick Buster/style.css b/Games/Brick Buster/style.css
@@ -0,0 +1,68 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(45deg, #ff0000, #ff8000);
+    font-family: Arial, sans-serif;
+}
+
+.container {
+    position: relative;
+    width: 800px;
+    height: 600px;
+    border: 2px solid #fff;
+    background: #000;
+    overflow: hidden;
+}
+
+.score {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    font-size: 1.5rem;
+    color: #fff;
+}
+
+.game-area {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.paddle {
+    position: absolute;
+    bottom: 30px;
+    width: 100px;
+    height: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+}
+
+.ball {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    background-color: #fff;
+    border-radius: 50%;
+}
+
+.bricks {
+    position: relative;
+    width: 100%;
+    height: 200px;
+}
+
+.brick {
+    position: absolute;
+    width: 80px;
+    height: 20px;
+    background-color: #ff8000;
+    border-radius: 5px;
+}
diff --git a/Games/Cartoon_Character_Guessing_Game/README.md b/Games/Cartoon_Character_Guessing_Game/README.md
@@ -0,0 +1,29 @@
+# **Cartoon character guessing game** 
+
+---
+
+<br>
+
+## **Description 📃**
+Cartoon character guessing game is a simple game where players have to find the character who is display in image.
+
+<br>
+
+## **How to play? 🕹️**
+Players can start playing by click on the start button in the home page. For each image there will be four choices. Players have to select one from them. The response will be shown as soon as reacted to the question. Players will have 10s for answer each question.
+
+<br>
+
+## **Screenshots 📸**
+
+<br><img src="./images/image_01.png" alt="Image Description">
+<br>
+<img src="./images/image_02.png" alt="Image Description">
+<br>
+<img src="./images/image_03.png" alt="Image Description">
+
+
+
+
+
+<br>
diff --git a/Games/Cartoon_Character_Guessing_Game/game.html b/Games/Cartoon_Character_Guessing_Game/game.html
@@ -0,0 +1,17 @@
+`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Tailwind CSS CDN -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
+    <title>Cartoon Character Guessing Game</title>
+</head>
+<body class="h-screen bg-blue-500 w-full flex items-center flex-col p-2">
+    <div class="question-wrapper bg-blue-600 p-3 text-center w-full hide">
+
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Games/Cartoon_Character_Guessing_Game/images/image_01.png b/Games/Cartoon_Character_Guessing_Game/images/image_01.png
diff --git a/Games/Cartoon_Character_Guessing_Game/images/image_02.png b/Games/Cartoon_Character_Guessing_Game/images/image_02.png
diff --git a/Games/Cartoon_Character_Guessing_Game/images/image_03.png b/Games/Cartoon_Character_Guessing_Game/images/image_03.png
diff --git a/Games/Cartoon_Character_Guessing_Game/index.html b/Games/Cartoon_Character_Guessing_Game/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Tailwind CSS CDN -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
+    <title>Cartoon Character Guessing Game</title>
+</head>
+<body class="h-screen bg-blue-500 w-full flex items-center flex-col p-2">
+    <div class="start bg-blue-600 p-3 text-center w-full">
+        <h1 class="text-gray-200 text-xl mb-4">Cartoon Character Guessing Game</h1>
+        <a href="./game.html"><button 
+            class="bg-blue-700 font-bold px-6 py-2 rounded hover:bg-blue-600 text-white focus:ring-2 focus:ring-blue-300 border-2 border-white"
+        >Start Game</button></a>
+    </div>
+</body>
+</html>