Skip to content

Commit

Permalink
Shape_Clicker_Game is added
Browse files Browse the repository at this point in the history
  • Loading branch information
pallasivasai committed Jul 31, 2024
1 parent d8e62ac commit c8d1563
Show file tree
Hide file tree
Showing 7 changed files with 222 additions and 1 deletion.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) |

</div>

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 52 additions & 0 deletions SinglePlayer - Games/Shape_Clicker_Game/README.md
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!
17 changes: 17 additions & 0 deletions SinglePlayer - Games/Shape_Clicker_Game/index.html
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>
59 changes: 59 additions & 0 deletions SinglePlayer - Games/Shape_Clicker_Game/script.js
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;
}
38 changes: 38 additions & 0 deletions SinglePlayer - Games/Shape_Clicker_Game/styles.css
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;
}
54 changes: 54 additions & 0 deletions additionalpage/game.html
Original file line number Diff line number Diff line change
Expand Up @@ -7721,6 +7721,60 @@ <h4 class = "text-white uppercase game-card-title">Duck_Hunt_Game</h4>



<!--Card start-->
<div class = "game-card">
<div class = "game-card-top img-fit-cover">
<video src="https://drive.google.com/file/d/186ggf8lok8YKq-2uFd0bwGAaAiplnxdU/view?usp=drive_link" link " type="video/mp4" muted loop class="clip" ></video>
<img src = "../SinglePlayer - Games/Banner - images/Shape_Clicker_Game.png" alt = "">
<div class = "ratings-count">
45
<img src = "../SinglePlayer - Games/Banner - images/Shape_Clicker_Game.png" alt = "" class = "ms-2">
</div>
</div>
<div class = "game-card-bottom">
<div class="share-icon text-2xl" onclick="copyLink(this)">
<i class="fas fa-share-alt"></i>
<input type="hidden"
value="https://gamesphere-multiplayer.github.io/GameSphere/SinglePlayer%20-%20Games/Shape_Clicker_Game/index.html" />
<!--If there are spaces in your naming of folder, put %20 in between, ex:
link%20to%20the%html%file%20for%your&game-->

<!--The share link will be active only when it is deployed over website-->
</div>

<div class = "flex flex-col sm:flex-row justify-between items-start flex-wrap">
<div class = "py-1">
<h4 class = "text-white uppercase game-card-title">Shape_Clicker_Game</h4>
<p class = "para-text">Shape_Clicker_Game</p>
</div>
<div class = "star-rating mt-2 sm:mt-0 py-1">
<img src = "../assets/icons/star-green.svg">
<img src = "../assets/icons/star-green.svg">
<img src = "../assets/icons/star-green.svg">
<img src = "../assets/icons/star-green.svg">
<img src = "../assets/icons/star-green-half.svg">
</div>
</div>
<div class = "block-wrap flex justify-between items-end">
<div class = "details-group">
<div class = "flex items-center">
<p class = "font-semibold">Release Date: &nbsp;</p>
<p>20.06.2023</p>
</div>
<div class = "flex items-center">
<p class = "font-semibold">Updated: &nbsp;</p>
<p>Action | Desktop</p>
</div>
</div>
<div class = "flex flex-col items-end justify-between">
<a target="_blank" href = "../SinglePlayer - Games/Shape_Clicker_Game/index.html" class = "btn-primary uppercase">Play Now</a>
</div>
</div>
</div>
</div>
<!--Card end-->





Expand Down

0 comments on commit c8d1563

Please sign in to comment.