-
Notifications
You must be signed in to change notification settings - Fork 164
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d8e62ac
commit c8d1563
Showing
7 changed files
with
222 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 Clicker Game</title> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| </head> | ||
| <body> | ||
| <h1>Shape Clicker Game</h1> | ||
| <div id="game-container"> | ||
| <button id="start-button">Start Game</button> | ||
| </div> | ||
| <p id="score">Score: 0</p> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters