diff --git a/Games/Shape Shifter/README.md b/Games/Shape Shifter/README.md new file mode 100644 index 0000000000..6e1e759ff4 --- /dev/null +++ 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 new file mode 100644 index 0000000000..7a2c6576cb --- /dev/null +++ b/Games/Shape Shifter/index.html @@ -0,0 +1,17 @@ + + + + + + Shape Shifter + + + +
+
+
Score: 0
+ +
+ + + diff --git a/Games/Shape Shifter/script.js b/Games/Shape Shifter/script.js new file mode 100644 index 0000000000..e9795b62f3 --- /dev/null +++ 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 new file mode 100644 index 0000000000..33cb47a9e4 --- /dev/null +++ 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 index fd48417567..e56d0e7544 100644 --- 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 new file mode 100644 index 0000000000..98f4c5dd82 Binary files /dev/null and b/assets/images/shape shifter.png differ