Merge branch 'main' into main

kunjgit · Aug 10, 2024 · 3e5ee64 · 3e5ee64
2 parents cab1d10 + 260979e
commit 3e5ee64
Show file tree

Hide file tree

Showing 153 changed files with 8,017 additions and 3 deletions.
diff --git a/Games/Ball-And-Paddle-Game/README.md b/Games/Ball-And-Paddle-Game/README.md
@@ -0,0 +1,20 @@
+# Ball and Paddle Game
+
+This is a simple implementation of a Ball and Paddle game using HTML, CSS, and JavaScript. The game is a classic arcade-style game where the player controls a paddle to keep the ball in play.
+
+## Features
+- A visual representation of the ball, paddle, and game area.
+- Interactive paddle control using keyboard inputs.
+- Basic game logic for ball movement, collision detection, and scoring.
+- Simple and intuitive UI with real-time score updates.
+
+## Usage
+- The game interface will appear, and you can start playing by using the arrow keys to control the paddle.
+- Keep the ball in play by bouncing it off the paddle to score points.
+- The game ends when the ball misses the paddle and falls out of play.
+
+## Gameplay
+- The game starts with the ball moving in a random direction.
+- Use the left and right arrow keys to move the paddle and keep the ball in play.
+- The ball bounces off the walls and the paddle; if it misses the paddle, the game is over.
+- The objective is to score as many points as possible by keeping the ball in play.
diff --git a/Games/Ball-And-Paddle-Game/index.html b/Games/Ball-And-Paddle-Game/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ball and Paddle Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1 class="game-heading">Ball and Paddle Game</h1>
+    <div class="game-container">
+        <canvas id="gameCanvas" width="800" height="600"></canvas>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Ball-And-Paddle-Game/script.js b/Games/Ball-And-Paddle-Game/script.js
@@ -0,0 +1,100 @@
+const canvas = document.getElementById("gameCanvas");
+const ctx = canvas.getContext("2d");
+
+let x = canvas.width / 2;
+let y = canvas.height - 30;
+let dx = 2;
+let dy = -2;
+const ballRadius = 10;
+const paddleHeight = 10;
+const paddleWidth = 75;
+let paddleX = (canvas.width - paddleWidth) / 2;
+let rightPressed = false;
+let leftPressed = false;
+let score = 0;
+let gameOver = false;
+
+document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);
+
+function keyDownHandler(e) {
+    if (e.key === "Right" || e.key === "ArrowRight") {
+        rightPressed = true;
+    } else if (e.key === "Left" || e.key === "ArrowLeft") {
+        leftPressed = true;
+    }
+}
+
+function keyUpHandler(e) {
+    if (e.key === "Right" || e.key === "ArrowRight") {
+        rightPressed = false;
+    } else if (e.key === "Left" || e.key === "ArrowLeft") {
+        leftPressed = false;
+    }
+}
+
+function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: " + score, canvas.width - 80, 20);
+}
+
+function drawGameOver() {
+    ctx.font = "24px Arial";
+    ctx.fillStyle = "#FF0000";
+    ctx.fillText("Game Over! Try Again", canvas.width / 2 - 100, canvas.height / 2);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    drawPaddle();
+    drawScore();
+
+    if (gameOver) {
+        drawGameOver();
+        return;
+    }
+
+    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;
+            score++;
+        } else {
+            gameOver = true;
+        }
+    }
+
+    if (rightPressed && paddleX < canvas.width - paddleWidth) {
+        paddleX += 7;
+    } else if (leftPressed && paddleX > 0) {
+        paddleX -= 7;
+    }
+
+    x += dx;
+    y += dy;
+}
+
+setInterval(draw, 10);
diff --git a/Games/Ball-And-Paddle-Game/style.css b/Games/Ball-And-Paddle-Game/style.css
@@ -0,0 +1,27 @@
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #000;
+}
+
+.game-heading {
+    color: yellow;
+    margin-bottom: 20px;
+}
+
+.game-container {
+    border: 5px solid #fff;
+    padding: 10px;
+    background-color: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+canvas {
+    background-color: #000;
+}
diff --git a/Games/Color-Blink-Challenge/README.md b/Games/Color-Blink-Challenge/README.md
@@ -0,0 +1,6 @@
+# About Game
+
+The Color Blink Challenge is a fun and interactive game where you need to count how many times a specific color appears within 30 seconds. The color to count is selected randomly at the start of each round. Test your focus and speed, and try to achieve the highest score possible!
+
+# Screenshot
+![alt text](image.png)
diff --git a/Games/Color-Blink-Challenge/bg.png b/Games/Color-Blink-Challenge/bg.png
diff --git a/Games/Color-Blink-Challenge/image.png b/Games/Color-Blink-Challenge/image.png
diff --git a/Games/Color-Blink-Challenge/index.html b/Games/Color-Blink-Challenge/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Color Blink Challenge</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="main-container">
+        <div class="column left-column">
+            <h2>About the Game</h2>
+            <p>
+                The Color Blink Challenge is a fun and interactive game where you need to count how many times a specific color appears within 30 seconds. The color to count is selected randomly at the start of each round. Test your focus and speed, and try to achieve the highest score possible!
+            </p>
+        </div>
+
+        <div class="game-container">
+            <div class="header">
+                <h1>Color Blink Challenge</h1>
+            </div>
+            <div id="circle" class="circle"></div>
+            <div class="controls">
+                <button id="startButton" class="btn">Start</button>
+                <button id="endButton" class="btn">Exit</button>
+            </div>
+            <div class="game-info">
+                <p>Count the <span id="targetColor"></span> color</p>
+                <input type="number" id="userInput" class="input-field" placeholder="Enter count" disabled>
+                <button id="submitButton" class="btn">Submit</button>
+                <div class="score-time">
+                    <p>Score: <span id="score">0</span></p>
+                    <p>Time Left: <span id="timer">30</span> seconds</p>
+                </div>
+            </div>
+        </div>
+
+        <div class="column right-column">
+            <h2>Colors in the Game</h2>
+            <ul>
+                <li>Red</li>
+                <li>Green</li>
+                <li>Blue</li>
+                <li>Yellow</li>
+                <li>Purple</li>
+            </ul>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Color-Blink-Challenge/script.js b/Games/Color-Blink-Challenge/script.js
@@ -0,0 +1,91 @@
+let colors = ['red', 'green', 'blue', 'yellow', 'purple'];
+let targetColor = '';
+let currentColorIndex = 0;
+let score = 0;
+let colorCount = 0;
+let interval, timerInterval;
+let timeLeft = 30;
+let gameActive = false;
+
+document.getElementById('startButton').addEventListener('click', startGame);
+document.getElementById('endButton').addEventListener('click', endGame);
+document.getElementById('submitButton').addEventListener('click', submitAnswer);
+
+function startGame() {
+    if (gameActive) return;
+    gameActive = true;
+
+    targetColor = colors[Math.floor(Math.random() * colors.length)];
+    document.getElementById('targetColor').textContent = targetColor;
+    colorCount = 0;
+    timeLeft = 30;
+    document.getElementById('timer').textContent = timeLeft;
+    document.getElementById('userInput').disabled = true;
+    document.getElementById('userInput').value = '';
+
+    changeColor();
+    interval = setInterval(changeColor, 1000);
+    timerInterval = setInterval(updateTimer, 1000);
+}
+
+function endGame() {
+    clearInterval(interval);
+    clearInterval(timerInterval);
+    resetGame(true); // Pass true to indicate the game is fully resetting
+    alert(`Game Over! Your final score is ${score}`);
+}
+
+function submitAnswer() {
+    if (!gameActive && timeLeft === 0) {
+        let userInput = parseInt(document.getElementById('userInput').value);
+
+        if (userInput === colorCount) {
+            score += 10;
+            alert('Correct! You earned 10 points.');
+        } else {
+            alert(`Wrong! The correct count was ${colorCount}.`);
+        }
+        document.getElementById('score').textContent = score;
+        resetGame();
+        startGame(); // Start the next round immediately
+    }
+}
+
+function resetGame(fullReset = false) {
+    colorCount = 0;
+    document.getElementById('userInput').value = '';
+    document.getElementById('targetColor').textContent = '';
+    document.getElementById('timer').textContent = '30';
+    document.getElementById('userInput').disabled = true;
+    gameActive = false;
+
+    if (fullReset) {
+        score = 0;
+        document.getElementById('score').textContent = score;
+    }
+
+    document.getElementById('circle').style.backgroundColor = 'transparent';
+}
+
+function changeColor() {
+    let circle = document.getElementById('circle');
+    currentColorIndex = (currentColorIndex + 1) % colors.length;
+    let currentColor = colors[currentColorIndex];
+    circle.style.backgroundColor = currentColor;
+
+    if (currentColor === targetColor) {
+        colorCount++;
+    }
+}
+
+function updateTimer() {
+    timeLeft--;
+    document.getElementById('timer').textContent = timeLeft;
+
+    if (timeLeft <= 0) {
+        clearInterval(interval);
+        clearInterval(timerInterval);
+        document.getElementById('userInput').disabled = false;
+        gameActive = false;
+    }
+}