Merge branch 'main' into animal_guessing

Games/Airhocky_game/README.md

@@ -0,0 +1,23 @@
+# **Game_Name** 
+
+Airhockey_game
+
+<br>
+
+## **Description 📃**
+- game involves simulating the movement and interactions of the puck and mallets on a table.
+
+## **functionalities 🎮**
+- this game is played by just moving your cursor or mouse around and score a goal. providing a challenging experience for the player against the computer-controlled opponent.
+<br>
+
+## **How to play? 🕹️**
+-Start the Game
+Score Goals
+Defend Your Goal
+<br>
+
+## **Screenshots 📸**
+
+<br>
+[image](GameZone\Games\Airhocky_game\airhockey_game.png)

Games/Airhocky_game/game.js

@@ -0,0 +1,155 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+const WIDTH = canvas.width;
+const HEIGHT = canvas.height;
+const PUCK_RADIUS = 15;
+const MALLET_RADIUS = 30;
+const FRICTION = 0.99;
+const GOAL_WIDTH = 200;
+const GOAL_HEIGHT = 40;
+const MAX_SPEED = 10;
+
+let puck = { x: WIDTH / 2, y: HEIGHT / 2, vx: 0, vy: 0 };
+let mallet1 = { x: WIDTH / 4, y: HEIGHT / 2 };
+let mallet2 = { x: 3 * WIDTH / 4, y: HEIGHT / 2 };
+let playerScore = 0;
+let computerScore = 0;
+
+canvas.addEventListener('mousemove', (event) => {
+    mallet1.x = event.offsetX;
+    mallet1.y = event.offsetY;
+    mallet1.x = Math.min(Math.max(mallet1.x, MALLET_RADIUS), WIDTH - MALLET_RADIUS);
+    mallet1.y = Math.min(Math.max(mallet1.y, MALLET_RADIUS), HEIGHT - MALLET_RADIUS);
+});
+
+function drawCircle(x, y, radius, color) {
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, Math.PI * 2);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawRectangle(x, y, width, height, color) {
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawLine(x1, y1, x2, y2, color) {
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 5;
+    ctx.stroke();
+    ctx.closePath();
+}
+
+function updatePuck() {
+    puck.x += puck.vx;
+    puck.y += puck.vy;
+    puck.vx *= FRICTION;
+    puck.vy *= FRICTION;
+
+    // Ensure speed does not exceed maximum
+    let speed = Math.sqrt(puck.vx * puck.vx + puck.vy * puck.vy);
+    if (speed > MAX_SPEED) {
+        puck.vx *= MAX_SPEED / speed;
+        puck.vy *= MAX_SPEED / speed;
+    }
+
+    // Ensure puck does not move out of the borders
+    if (puck.x < PUCK_RADIUS) {
+        puck.x = PUCK_RADIUS;
+        puck.vx = -puck.vx;
+    }
+    if (puck.x > WIDTH - PUCK_RADIUS) {
+        puck.x = WIDTH - PUCK_RADIUS;
+        puck.vx = -puck.vx;
+    }
+    if (puck.y < PUCK_RADIUS) {
+        puck.y = PUCK_RADIUS;
+        puck.vy = -puck.vy;
+    }
+    if (puck.y > HEIGHT - PUCK_RADIUS) {
+        puck.y = HEIGHT - PUCK_RADIUS;
+        puck.vy = -puck.vy;
+    }
+
+    if (puck.x <= PUCK_RADIUS && (puck.y > HEIGHT / 2 - GOAL_WIDTH / 2 && puck.y < HEIGHT / 2 + GOAL_WIDTH / 2)) {
+        computerScore++;
+        resetPuck();
+    }
+
+    if (puck.x >= WIDTH - PUCK_RADIUS && (puck.y > HEIGHT / 2 - GOAL_WIDTH / 2 && puck.y < HEIGHT / 2 + GOAL_WIDTH / 2)) {
+        playerScore++;
+        resetPuck();
+    }
+}
+
+function resetPuck() {
+    puck.x = WIDTH / 2;
+    puck.y = HEIGHT / 2;
+    puck.vx = 0;
+    puck.vy = 0;
+}
+
+function checkCollisionWithMallet(mallet) {
+    let dx = puck.x - mallet.x;
+    let dy = puck.y - mallet.y;
+    let distance = Math.sqrt(dx * dx + dy * dy);
+
+    if (distance < PUCK_RADIUS + MALLET_RADIUS) {
+        let angle = Math.atan2(dy, dx);
+        puck.vx = Math.cos(angle) * 5;
+        puck.vy = Math.sin(angle) * 5;
+
+        // Move puck out of collision
+        let overlap = PUCK_RADIUS + MALLET_RADIUS - distance;
+        puck.x += Math.cos(angle) * overlap;
+        puck.y += Math.sin(angle) * overlap;
+    }
+}
+
+function updateComputerMallet() {
+    let dx = puck.x - mallet2.x;
+    let dy = puck.y - mallet2.y;
+
+    // Simplified AI: Move towards the puck
+    mallet2.x += dx * 0.05;
+    mallet2.y += dy * 0.05;
+
+    // Restrict to the table
+    mallet2.x = Math.min(Math.max(mallet2.x, MALLET_RADIUS), WIDTH - MALLET_RADIUS);
+    mallet2.y = Math.min(Math.max(mallet2.y, MALLET_RADIUS), HEIGHT - MALLET_RADIUS);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    drawRectangle(0, HEIGHT / 2 - GOAL_WIDTH / 2, GOAL_HEIGHT, GOAL_WIDTH, '#00ff00');
+    drawRectangle(WIDTH - GOAL_HEIGHT, HEIGHT / 2 - GOAL_WIDTH / 2, GOAL_HEIGHT, GOAL_WIDTH, '#00ff00');
+    drawLine(WIDTH / 2, 0, WIDTH / 2, HEIGHT, '#ffffff');
+
+    drawCircle(puck.x, puck.y, PUCK_RADIUS, '#ff0000');
+    drawCircle(mallet1.x, mallet1.y, MALLET_RADIUS, '#00ff00');
+    drawCircle(mallet2.x, mallet2.y, MALLET_RADIUS, '#0000ff');
+
+    updatePuck();
+    checkCollisionWithMallet(mallet1);
+    checkCollisionWithMallet(mallet2);
+    updateComputerMallet();
+
+    ctx.font = "20px Arial";
+    ctx.fillStyle = "#ffffff";
+    ctx.fillText(`Player: ${playerScore}`, 20, 30);
+    ctx.fillText(`Computer: ${computerScore}`, WIDTH - 150, 30);
+
+    requestAnimationFrame(draw);
+}
+
+draw();

Games/Airhocky_game/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Air Hockey Game</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #1e1e1e;
+            color: #ffffff;
+            margin: 0;
+            font-family: Arial, sans-serif;
+        }
+        canvas {
+            background-color: #2c2c2c;
+            border: 5px solid #ffffff;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="gameCanvas" width="800" height="400"></canvas>
+    <script src="game.js"></script>
+</body>
+</html>
+

Games/Box_Merge/README.md

@@ -0,0 +1,30 @@
+# *Game_Name* 
+Box Merge
+
+---
+
+<br>
+
+## *Description 📃*
+Box Merge is an interactive game where players control a colored box to merge with matching-colored boxes, increasing in size and score while avoiding different-colored boxes that cause shrinking and score loss. 
+
+## *Functionalities 🎮*
+
+1. Click the "Start Game" button to begin.
+2. Control your colored box to merge with matching-colored boxes, increasing in size and score.
+3. Avoid different-colored boxes that cause your box to shrink and decrease your score.
+4. Monitor your score as you play.
+5. When your score reaches 100 points, you win the game, displaying a winning message and a button to restart the game.
+6. If your box's size becomes too small (number <= 0), you lose the game, displaying a losing message and a button to restart the game.
+
+1. Controls: Use the arrow keys (left, right, up, down) to move your colored box.
+2. Scoring: Each merge with a matching-colored box increases your score by 10 points. Each collision with a different-colored box decreases your score by 5 points.
+3. Difficulty: As you merge with matching-colored boxes, the game gets harder as you need to manage a larger box while avoiding shrinkage.
+4. Winning Condition: Reach a score of 100 points to win the game.
+5. Losing Condition: If your box's size becomes too small (number <= 0), you lose the game.
+6. Game Over: When you win or lose, a message is displayed with an option to restart the game.
+
+<br>
+
+## *Screenshots 📸*
+![Box_Merge](https://github.com/user-attachments/assets/c3f63b18-e996-42c4-b492-b7e8f51200ae)

Games/Box_Merge/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Box Merge Game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Box Merge</h1>
+  <div id="controls">
+    <label for="start-number">Start Number:</label>
+    <input type="number" id="start-number" value="0">
+    <button id="start-button">Start Game</button>
+  </div>
+  <div id="game-area">
+    <div id="player-box">0</div>
+  </div>
+  <div id="score">Score: 0</div>
+  <div id="message"></div>
+  <script src="script.js"></script>
+</body>
+</html>

Games/Box_Merge/script.js

@@ -0,0 +1,122 @@
+const gameArea = document.getElementById('game-area');
+const playerBox = document.getElementById('player-box');
+const scoreDisplay = document.getElementById('score');
+const messageDisplay = document.getElementById('message');
+let score = 0;
+let gameActive = false;
+
+const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
+let playerColor = '#0f0';
+playerBox.style.backgroundColor = playerColor;
+playerBox.style.boxShadow = `0 0 10px ${playerColor}`;
+
+const createBox = (number) => {
+  const box = document.createElement('div');
+  box.classList.add('box');
+  const color = colors[Math.floor(Math.random() * colors.length)];
+  box.style.backgroundColor = color;
+  box.style.boxShadow = `0 0 10px ${color}`;
+  box.style.left = `${Math.random() * (gameArea.offsetWidth - 30)}px`;
+  box.style.top = `${Math.random() * (gameArea.offsetHeight - 30)}px`;
+  box.textContent = number;
+  gameArea.appendChild(box);
+};
+
+const startGame = () => {
+  const startNumber = parseInt(document.getElementById('start-number').value);
+  gameActive = true;
+  score = 0;
+  scoreDisplay.textContent = `Score: ${score}`;
+  messageDisplay.textContent = '';
+  playerBox.style.width = '30px';
+  playerBox.style.height = '30px';
+  playerBox.style.left = '385px';
+  playerBox.style.top = '285px';
+  playerBox.textContent = startNumber;
+
+  const existingBoxes = document.querySelectorAll('.box');
+  existingBoxes.forEach(box => box.remove());
+
+  for (let i = 0; i < 10; i++) {
+    createBox(i + 1);
+  }
+};
+
+document.getElementById('start-button').addEventListener('click', startGame);
+
+const movePlayer = (direction) => {
+  if (!gameActive) return;
+
+  const step = 10;
+  const rect = playerBox.getBoundingClientRect();
+  const gameAreaRect = gameArea.getBoundingClientRect();
+  switch (direction) {
+    case 'up':
+      playerBox.style.top = `${Math.max(rect.top - step - gameAreaRect.top, 0)}px`;
+      break;
+    case 'down':
+      playerBox.style.top = `${Math.min(rect.top + step - gameAreaRect.top, gameArea.offsetHeight - rect.height)}px`;
+      break;
+    case 'left':
+      playerBox.style.left = `${Math.max(rect.left - step - gameAreaRect.left, 0)}px`;
+      break;
+    case 'right':
+      playerBox.style.left = `${Math.min(rect.left + step - gameAreaRect.left, gameArea.offsetWidth - rect.width)}px`;
+      break;
+  }
+  checkCollision();
+};
+
+const checkCollision = () => {
+    const playerRect = playerBox.getBoundingClientRect();
+    const boxes = document.querySelectorAll('.box');
+    boxes.forEach((box) => {
+      const boxRect = box.getBoundingClientRect();
+      if (
+        playerRect.left < boxRect.left + boxRect.width &&
+        playerRect.left + playerRect.width > boxRect.left &&
+        playerRect.top < boxRect.top + boxRect.height &&
+        playerRect.top + playerRect.height > boxRect.top
+      ) {
+        if (box.style.backgroundColor === playerColor) {
+          score += 10;
+          playerBox.style.width = `${playerRect.width + 10}px`;
+          playerBox.style.height = `${playerRect.height + 10}px`;
+          playerBox.textContent = parseInt(playerBox.textContent) + parseInt(box.textContent);
+        } else {
+          score -= 5;
+          playerBox.style.width = `${playerRect.width - 10}px`;
+          playerBox.style.height = `${playerRect.height - 10}px`;
+          playerBox.textContent = parseInt(playerBox.textContent) - parseInt(box.textContent);
+        }
+        scoreDisplay.textContent = `Score: ${score}`;
+        box.remove();
+        createBox(parseInt(box.textContent));
+
+        if (score >= 100) {
+          gameActive = false;
+          messageDisplay.textContent = 'You win!';
+        } else if (parseInt(playerBox.textContent) <= 0) {
+          gameActive = false;
+          messageDisplay.textContent = 'You lose!';
+        }
+      }
+    });
+  };
+
+document.addEventListener('keydown', (event) => {
+  switch (event.key) {
+    case 'ArrowUp':
+      movePlayer('up');
+      break;
+    case 'ArrowDown':
+      movePlayer('down');
+      break;
+    case 'ArrowLeft':
+      movePlayer('left');
+      break;
+    case 'ArrowRight':
+      movePlayer('right');
+      break;
+  }
+});