diff --git a/README.md b/README.md index 0aacec62..976f6bd1 100644 --- a/README.md +++ b/README.md @@ -261,7 +261,8 @@ ________________________________________________________________________________ | 203 | [Duck_Hunt_Game](.SinglePlayer%20-%20Games/Duck_Hunt_Game) | | 204 | [Breakout_Game](.SinglePlayer%20-%20Games/BreakOut_Game) | | 205 | [Breakout_Game](.SinglePlayer%20-%20Games/Maze_Game) | -| 206 | [Breakout_Game](.SinglePlayer%20-%20Games/Bomber_Game) | +| 206 | [Bomber_Game](.SinglePlayer%20-%20Games/Bomber_Game) | +| 207 | [Shape_Clicker_Game](.SinglePlayer%20-%20Games/Shape_Clicker_Game) | diff --git a/SinglePlayer - Games/Banner - image/Shape_Clicker_Game.png b/SinglePlayer - Games/Banner - image/Shape_Clicker_Game.png new file mode 100644 index 00000000..283bda6d Binary files /dev/null and b/SinglePlayer - Games/Banner - image/Shape_Clicker_Game.png differ diff --git a/SinglePlayer - Games/Shape_Clicker_Game/README.md b/SinglePlayer - Games/Shape_Clicker_Game/README.md new file mode 100644 index 00000000..0ae3531d --- /dev/null +++ b/SinglePlayer - Games/Shape_Clicker_Game/README.md @@ -0,0 +1,52 @@ +# Shape Clicker Game + +## Overview + +The Shape Clicker Game is a simple and fun web-based game where players click on randomly appearing shapes to score points. The game runs for a fixed duration, and the player's objective is to click on as many shapes as possible within the time limit. + +## Features + +- Start the game by clicking the "Start Game" button. +- Randomly appearing shapes (circles or squares) within the game container. +- Each click on a shape increases the player's score. +- The game lasts for 30 seconds. +- The player's score is displayed and updated in real-time. +- At the end of the game, an alert displays the player's final score. + +## Technologies Used + +- HTML for structuring the webpage. +- CSS for styling the game elements. +- JavaScript for game logic and interactivity. + +## How to Play + +1. Open the game in a web browser. +2. Click the "Start Game" button to begin. +3. Click on the shapes that appear in the game container as quickly as possible to increase your score. +4. The game will automatically end after 30 seconds, and your final score will be displayed. + +## Setup Instructions + +1. Clone the repository to your local machine. +2. Open the `index.html` file in a web browser to start the game. + +## File Structure + +- `index.html`: The main HTML file that contains the structure of the game. +- `styles.css`: The CSS file for styling the game elements. +- `script.js`: The JavaScript file containing the game logic. + +## Customization + +You can customize the game by modifying the following: + +- The duration of the game by changing the `setTimeout` value in the `endGame` function. +- The interval at which shapes appear by adjusting the `setInterval` value in the `startGame` function. +- The size, color, and types of shapes by modifying the `createShape` and `getRandomColor` functions. + +## License + +This project is open-source and available under the MIT License. Feel free to fork, modify, and use it in your own projects. + +Enjoy playing the Shape Clicker Game! \ No newline at end of file diff --git a/SinglePlayer - Games/Shape_Clicker_Game/index.html b/SinglePlayer - Games/Shape_Clicker_Game/index.html new file mode 100644 index 00000000..50e1ac09 --- /dev/null +++ b/SinglePlayer - Games/Shape_Clicker_Game/index.html @@ -0,0 +1,17 @@ + + + + + + Shape Clicker Game + + + +

Shape Clicker Game

+
+ +
+

Score: 0

+ + + diff --git a/SinglePlayer - Games/Shape_Clicker_Game/script.js b/SinglePlayer - Games/Shape_Clicker_Game/script.js new file mode 100644 index 00000000..1a86f959 --- /dev/null +++ b/SinglePlayer - Games/Shape_Clicker_Game/script.js @@ -0,0 +1,59 @@ +let score = 0; +let gameInterval; + +document.getElementById('start-button').addEventListener('click', startGame); + +function startGame() { + score = 0; + document.getElementById('score').textContent = 'Score: ' + score; + document.getElementById('start-button').disabled = true; + + gameInterval = setInterval(createShape, 1000); + + setTimeout(endGame, 30000); +} + +function createShape() { + const gameContainer = document.getElementById('game-container'); + const shape = document.createElement('div'); + const size = Math.random() * 50 + 20; + const x = Math.random() * (gameContainer.offsetWidth - size); + const y = Math.random() * (gameContainer.offsetHeight - size); + const shapeType = Math.random() > 0.5 ? 'circle' : 'square'; + + shape.classList.add('shape', shapeType); + shape.style.width = `${size}px`; + shape.style.height = `${size}px`; + shape.style.left = `${x}px`; + shape.style.top = `${y}px`; + shape.style.backgroundColor = getRandomColor(); + + shape.addEventListener('click', () => { + score++; + document.getElementById('score').textContent = 'Score: ' + score; + shape.remove(); + }); + + gameContainer.appendChild(shape); + + setTimeout(() => { + if (shape.parentElement) { + shape.remove(); + } + }, 2000); +} + +function endGame() { + clearInterval(gameInterval); + document.getElementById('start-button').disabled = false; + alert('Game over! Your score is ' + score); +} + +function getRandomColor() { + const letters = '0123456789ABCDEF'; + let color = '#'; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +} diff --git a/SinglePlayer - Games/Shape_Clicker_Game/styles.css b/SinglePlayer - Games/Shape_Clicker_Game/styles.css new file mode 100644 index 00000000..5195a252 --- /dev/null +++ b/SinglePlayer - Games/Shape_Clicker_Game/styles.css @@ -0,0 +1,38 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #f0f0f0; + margin: 0; + padding: 20px; +} + +h1 { + font-size: 2em; + margin-bottom: 20px; +} + +#game-container { + position: relative; + width: 80vw; + height: 60vh; + margin: 0 auto; + border: 2px solid #333; + background-color: #fff; + overflow: hidden; +} + +.shape { + position: absolute; + cursor: pointer; +} + +#score { + font-size: 1.5em; + margin-top: 20px; +} + +#start-button { + padding: 10px 20px; + font-size: 1em; + cursor: pointer; +} diff --git a/additionalpage/game.html b/additionalpage/game.html index 5ed2183f..a01fb94c 100644 --- a/additionalpage/game.html +++ b/additionalpage/game.html @@ -7721,6 +7721,60 @@

Duck_Hunt_Game

+ +
+
+ + +
+ 45 + +
+
+
+ + +
+
+

Shape_Clicker_Game

+

Shape_Clicker_Game

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

20.06.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ + +