kunjgit · 1911aditi · Jul 15, 2024 · Jul 15, 2024 · Jul 15, 2024
diff --git a/Games/Shape Shifter/README.md b/Games/Shape Shifter/README.md
@@ -0,0 +1,49 @@
+# Shape Shifter Game
+
+Shape Shifter is an innovative and interactive game where players must click on a randomly appearing shape within a limited time frame. The shape changes in size, color, and position to increase the challenge.
+
+## Game Features
+
+- Randomly appearing shapes with varying sizes and colors
+- Scoreboard to track your progress
+- Simple and intuitive user interface
+- Responsive design
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## How to Play
+
+1. Open the `index.html` file in your web browser.
+2. Click the "Start Game" button to begin.
+3. Click on the shape as quickly as possible to score points.
+4. The shape will move to a new random position every second.
+5. The game continues until you stop it or refresh the page.
+
+## Installation
+
+To run the game locally, follow these steps:
+
+1. Clone the repository:
+    ```bash
+    git clone https://github.com/your-username/shape-shifter-game.git
+    ```
+2. Navigate to the project directory:
+    ```bash
+    cd shape-shifter-game
+    ```
+3. Open `index.html` in your web browser:
+    ```bash
+    open index.html
+    ```
+
+## Project Structure
+
+```plaintext
+shape-shifter-game/
+├── index.html
+├── styles.css
+└── script.js
diff --git a/Games/Shape Shifter/index.html b/Games/Shape Shifter/index.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">
+    <title>Shape Shifter</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="game-container">
+        <div id="target-shape" class="shape"></div>
+        <div id="score-board">Score: 0</div>
+        <button id="start-button">Start Game</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Shape Shifter/script.js b/Games/Shape Shifter/script.js
@@ -0,0 +1,60 @@
+// script.js
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    const targetShape = document.getElementById('target-shape');
+    const scoreBoard = document.getElementById('score-board');
+    const startButton = document.getElementById('start-button');
+    let score = 0;
+    let gameInterval;
+
+    function getRandomPosition() {
+        const containerRect = document.body.getBoundingClientRect();
+        const x = Math.floor(Math.random() * (containerRect.width - 50));
+        const y = Math.floor(Math.random() * (containerRect.height - 50));
+        return { x, y };
+    }
+
+    function getRandomColor() {
+        const letters = '0123456789ABCDEF';
+        let color = '#';
+        for (let i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
+    }
+
+    function getRandomSize() {
+        return Math.floor(Math.random() * 50) + 30;
+    }
+
+    function moveShape() {
+        const { x, y } = getRandomPosition();
+        const color = getRandomColor();
+        const size = getRandomSize();
+        targetShape.style.left = `${x}px`;
+        targetShape.style.top = `${y}px`;
+        targetShape.style.backgroundColor = color;
+        targetShape.style.width = `${size}px`;
+        targetShape.style.height = `${size}px`;
+    }
+
+    function startGame() {
+        score = 0;
+        scoreBoard.innerText = `Score: ${score}`;
+        targetShape.style.display = 'block';
+        gameInterval = setInterval(moveShape, 1000);
+    }
+
+    function stopGame() {
+        clearInterval(gameInterval);
+        targetShape.style.display = 'none';
+    }
+
+    targetShape.addEventListener('click', () => {
+        score++;
+        scoreBoard.innerText = `Score: ${score}`;
+        moveShape();
+    });
+
+    startButton.addEventListener('click', startGame);
+});
diff --git a/Games/Shape Shifter/styles.css b/Games/Shape Shifter/styles.css
@@ -0,0 +1,34 @@
+/* styles.css */
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+    margin: 0;
+}
+
+.game-container {
+    text-align: center;
+}
+
+.shape {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    border-radius: 50%;
+    background-color: red;
+    cursor: pointer;
+}
+
+#score-board {
+    font-size: 24px;
+    margin-top: 20px;
+}
+
+#start-button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+}
diff --git a/README.md b/README.md
@@ -360,6 +360,7 @@ This repository also provides one such platforms where contributers come over an
 | [Dodge_the_Blocks](https://github.com/kunjgit/GameZone/tree/main/Games/Dodge_the_Blocks)                     |
 
 | [Memory_Flip](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Flip)               |
+| [Shape_Shifter](https://github.com/kunjgit/GameZone/tree/main/Games/Shape_Shifter)               |
 
 |[Town-Rise](https://github.com/kunjgit/GameZone/tree/main/Games/Town_Rise_Game)|
 | [IKnowYou-Mind-Reading-Game](https://github.com/kunjgit/GameZone/tree/main/Games/IKnowYou-Mind-Reading-Game) |

diff --git a/assets/images/shape shifter.png b/assets/images/shape shifter.png