forked from kunjgit/GameZone
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into Fidget-Spinner
- Loading branch information
Showing
8 changed files
with
259 additions
and
0 deletions.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
# **Game_Name** | ||
Dot Dash | ||
|
||
--- | ||
|
||
<br> | ||
|
||
## **Description 📃** | ||
"Dot Dash" is an exciting and fast-paced clicking game designed to test your reflexes and agility. In this game, dots appear randomly on the screen, and your goal is to click on as many dots as possible within one minute. As you score more points, the game becomes increasingly challenging with faster dot appearances. | ||
|
||
## **Functionalities 🎮** | ||
|
||
|
||
- Random Dot Generation: Dots appear at random positions within the game area. | ||
- Progressive Difficulty: The speed of dot appearances increases as the player’s score increases. | ||
- Score Tracking: The game keeps track of the player’s score, displayed in real-time. | ||
- Timer: A countdown timer that starts from 60 seconds, displayed on the screen. | ||
- Game Over Screen: Displays the final score and a countdown to restart the game after time runs out. | ||
- Responsive Design: Optimized for both desktop and mobile play. | ||
<br> | ||
|
||
## **How to play? 🕹️** | ||
|
||
-Start the Game: Click the "Start Game" button to begin. | ||
- Catch the Dots: Click on the dots that appear randomly on the screen to score points. | ||
- Watch the Timer: Keep an eye on the timer; you have 60 seconds to catch as many dots as possible. | ||
- Increase Your Score: Each dot clicked increases your score, and the dots will start appearing more quickly as your score increases. | ||
- Game Over: When the timer reaches zero, the game will display your final score and automatically reload after a few seconds for another round. | ||
|
||
## **Screenshots 📸** | ||
|
||
![image](https://github.com/aditya-bhaumik/GameZone/assets/92214013/fab5ab32-2043-41ab-b805-f76aa2fd68dc) | ||
![image](https://github.com/aditya-bhaumik/GameZone/assets/92214013/7f613e5c-8fc7-4515-8bc1-19d66b704be6) | ||
|
||
|
||
|
||
<br> |
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 @@ | ||
|
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,34 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Dot Dash</title> | ||
<link rel="stylesheet" href="styles.css"> | ||
</head> | ||
<body> | ||
<div class="game-container"> | ||
<div class="header"> | ||
<div class="score-board">Score: <span id="score">0</span></div> | ||
<div class="timer">Time Left: <span id="time">30</span>s</div> | ||
</div> | ||
<div class="game-area" id="gameArea"></div> | ||
<button class="start-button" id="startButton">Start Game</button> | ||
</div> | ||
<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,94 @@ | ||
let score = 0; | ||
let timeLeft = 30; // Game duration of 1 minute | ||
let gameInterval; | ||
let dotInterval; | ||
let dotSpeed = 1000; // Start with a moderate speed for dot spawn (in milliseconds) | ||
|
||
const scoreElement = document.getElementById('score'); | ||
const timeElement = document.getElementById('time'); | ||
const gameArea = document.getElementById('gameArea'); | ||
const startButton = document.getElementById('startButton'); | ||
const gameContainer = document.querySelector('.game-container'); | ||
|
||
startButton.addEventListener('click', startGame); | ||
|
||
function startGame() { | ||
score = 0; | ||
timeLeft = 30; // Reset timer to 1 minute | ||
dotSpeed = 1000; // Reset speed to moderate initial value | ||
scoreElement.textContent = score; | ||
timeElement.textContent = timeLeft; | ||
startButton.disabled = true; | ||
gameArea.innerHTML = ''; // Clear any dots before starting | ||
gameInterval = setInterval(updateTimer, 1000); | ||
spawnDot(); | ||
} | ||
|
||
function updateTimer() { | ||
timeLeft--; | ||
timeElement.textContent = timeLeft; | ||
if (timeLeft === 0) { | ||
clearInterval(gameInterval); | ||
clearTimeout(dotInterval); | ||
startButton.disabled = false; | ||
showGameOverMessage(); | ||
} | ||
} | ||
|
||
function spawnDot() { | ||
if (timeLeft <= 0) return; // Prevent spawning new dots if time is up | ||
|
||
const dot = document.createElement('div'); | ||
dot.classList.add('dot'); | ||
dot.style.top = `${Math.random() * 90}%`; | ||
dot.style.left = `${Math.random() * 90}%`; | ||
dot.addEventListener('click', () => { | ||
score++; | ||
scoreElement.textContent = score; | ||
dot.remove(); | ||
adjustDotSpeed(); | ||
spawnDot(); | ||
}); | ||
gameArea.appendChild(dot); | ||
|
||
dotInterval = setTimeout(() => { | ||
if (dot.parentNode && timeLeft > 0) { | ||
dot.remove(); | ||
spawnDot(); | ||
} | ||
}, dotSpeed); | ||
} | ||
|
||
function adjustDotSpeed() { | ||
// Increase the speed of dot spawning as the score increases | ||
if (score % 5 === 0 && dotSpeed > 500) { | ||
dotSpeed -= 100; // Increase speed by reducing interval time | ||
} | ||
} | ||
|
||
function showGameOverMessage() { | ||
gameArea.innerHTML = ''; // Clear any remaining dots | ||
const gameOverMessage = document.createElement('div'); | ||
gameOverMessage.classList.add('game-over-message'); | ||
gameOverMessage.innerHTML = ` | ||
<h2>Game Over!</h2> | ||
<p>You caught ${score} dots.</p> | ||
<p>Reloading in <span id="reload-timer">5</span> seconds...</p> | ||
`; | ||
gameContainer.appendChild(gameOverMessage); | ||
|
||
let reloadTimeLeft = 5; | ||
const reloadTimerElement = document.getElementById('reload-timer'); | ||
const reloadInterval = setInterval(() => { | ||
reloadTimeLeft--; | ||
reloadTimerElement.textContent = reloadTimeLeft; | ||
if (reloadTimeLeft === 0) { | ||
clearInterval(reloadInterval); | ||
location.reload(); | ||
} | ||
}, 1000); | ||
} | ||
|
||
|
||
|
||
|
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,88 @@ | ||
body { | ||
font-family: Arial, sans-serif; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
height: 100vh; | ||
margin: 0; | ||
background: linear-gradient(45deg, #00b4db, #0083b0); | ||
} | ||
|
||
.game-container { | ||
text-align: center; | ||
background: #ffffff; | ||
border-radius: 10px; | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | ||
overflow: hidden; | ||
width: 90%; | ||
max-width: 600px; | ||
position: relative; | ||
} | ||
|
||
.header { | ||
background: #0083b0; | ||
color: white; | ||
padding: 20px; | ||
display: flex; | ||
justify-content: space-between; | ||
} | ||
|
||
.score-board, .timer { | ||
font-size: 1.5em; | ||
} | ||
|
||
.game-area { | ||
position: relative; | ||
height: 400px; | ||
background: linear-gradient(135deg, #00c6ff, #0072ff); | ||
border-top: 1px solid #ddd; | ||
} | ||
|
||
.dot { | ||
width: 20px; | ||
height: 20px; | ||
background: #ff5722; | ||
border-radius: 50%; | ||
position: absolute; | ||
cursor: pointer; | ||
} | ||
|
||
.start-button { | ||
background: #00b4db; | ||
color: white; | ||
border: none; | ||
padding: 15px 30px; | ||
font-size: 1.2em; | ||
cursor: pointer; | ||
margin: 20px; | ||
border-radius: 5px; | ||
} | ||
|
||
.start-button:hover { | ||
background: #0083b0; | ||
} | ||
|
||
.game-over-message { | ||
position: absolute; | ||
top: 50%; | ||
left: 50%; | ||
transform: translate(-50%, -50%); | ||
background: rgba(0, 0, 0, 0.8); | ||
color: white; | ||
padding: 30px; | ||
border-radius: 10px; | ||
text-align: center; | ||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); | ||
} | ||
|
||
@media (max-width: 600px) { | ||
.header { | ||
flex-direction: column; | ||
align-items: center; | ||
} | ||
.game-area { | ||
height: 300px; | ||
} | ||
} | ||
|
||
|
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.