Skip to content

Commit b599e33

Browse files
msrihanreddy5-codemsrihanreddy5-code
authored
Add files via upload
1 parent c3c7fe6 commit b599e33

File tree

1 file changed

+311
-0
lines changed

1 file changed

+311
-0
lines changed

‎Guess number javascriot.txt‎

Lines changed: 311 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,311 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Advanced Number Guessing Game</title>
7+
<link rel="stylesheet" href="gam.css">
8+
</head>
9+
<body>
10+
11+
<div class="background"></div>
12+
13+
<div class="container">
14+
15+
<h1> Advanced Number Guessing Game</h1>
16+
17+
<div class="theme-highlight">
18+
<label class="theme-switch">
19+
<input type="checkbox" id="themeToggle">
20+
<span class="slider"></span>
21+
</label>
22+
</div>
23+
24+
<p class="modeText">Light Mode (Click glowing icon!)</p>
25+
26+
<h3>Select Difficulty</h3>
27+
<select id="difficulty">
28+
<option value="50">Easy (1–50)</option>
29+
<option value="100" selected>Medium (1–100)</option>
30+
<option value="500">Hard (1–500)</option>
31+
<option value="custom">Custom</option>
32+
</select>
33+
34+
<input type="number" id="customRange" class="hidden" placeholder="Enter max number">
35+
36+
<button id="startBtn">Start Game</button>
37+
38+
<div id="gameArea" class="hidden">
39+
<p id="timer"> Time: 0s</p>
40+
<p id="score">Score: 0</p>
41+
42+
<input type="number" id="guessInput" placeholder="Enter your guess">
43+
<button id="guessBtn">Guess</button>
44+
45+
<p id="result"></p>
46+
47+
<button id="restartBtn" class="hidden restart-btn">Restart Game</button>
48+
</div>
49+
50+
</div>
51+
52+
<script src="number.js"></script>
53+
</body>
54+
</html>
55+
56+
let secretNumber, attempts, maxNumber;
57+
let timer = 0, timeInterval, score = 0;
58+
59+
const clickSound = new Audio("https://cdn.pixabay.com/download/audio/2022/03/15/audio_7e5187dfd6.mp3?filename=ui-click-1-81117.mp3");
60+
const wrongSound = new Audio("https://cdn.pixabay.com/download/audio/2022/03/15/audio_99477ad533.mp3?filename=error-126627.mp3");
61+
const correctSound = new Audio("https://cdn.pixabay.com/download/audio/2022/03/15/audio_5a954a4300.mp3?filename=success-1-6297.mp3");
62+
63+
const gameArea = document.getElementById("gameArea");
64+
const customRange = document.getElementById("customRange");
65+
const difficultySelect = document.getElementById("difficulty");
66+
const result = document.getElementById("result");
67+
const scoreDisplay = document.getElementById("score");
68+
const timerDisplay = document.getElementById("timer");
69+
70+
difficultySelect.addEventListener("change", () => {
71+
customRange.classList.toggle("hidden", difficultySelect.value !== "custom");
72+
});
73+
74+
75+
document.getElementById("startBtn").addEventListener("click", () => {
76+
clickSound.play();
77+
78+
if (difficultySelect.value === "custom") {
79+
maxNumber = Number(customRange.value) || 100;
80+
} else {
81+
maxNumber = Number(difficultySelect.value);
82+
}
83+
84+
secretNumber = Math.floor(Math.random() * maxNumber) + 1;
85+
attempts = 0;
86+
timer = 0;
87+
88+
gameArea.classList.remove("hidden");
89+
result.innerHTML = "";
90+
document.getElementById("guessInput").value = "";
91+
92+
startTimer();
93+
});
94+
95+
function startTimer() {
96+
clearInterval(timeInterval);
97+
timeInterval = setInterval(() => {
98+
timer++;
99+
timerDisplay.innerHTML = ` Time: ${timer}s`;
100+
}, 1000);
101+
}
102+
103+
document.getElementById("guessBtn").addEventListener("click", () => {
104+
clickSound.play();
105+
106+
let guess = Number(document.getElementById("guessInput").value);
107+
attempts++;
108+
109+
if (!guess) {
110+
result.innerHTML = "⚠ Enter a number!";
111+
wrongSound.play();
112+
return;
113+
}
114+
115+
if (guess > secretNumber) {
116+
result.innerHTML = "📉 Too high!";
117+
wrongSound.play();
118+
} else if (guess < secretNumber) {
119+
result.innerHTML = "📈 Too low!";
120+
wrongSound.play();
121+
} else {
122+
correctSound.play();
123+
result.innerHTML = ` Correct! Attempts: ${attempts}, Time: ${timer}s`;
124+
125+
score += Math.max(50 - attempts - Math.floor(timer / 2), 5);
126+
scoreDisplay.innerHTML = `⭐ Score: ${score}`;
127+
128+
clearInterval(timeInterval);
129+
document.getElementById("restartBtn").classList.remove("hidden");
130+
}
131+
});
132+
133+
document.getElementById("restartBtn").addEventListener("click", () => {
134+
clickSound.play();
135+
location.reload();
136+
});
137+
138+
document.getElementById("themeToggle").addEventListener("change", () => {
139+
document.body.classList.toggle("dark-mode");
140+
document.querySelector(".modeText").textContent =
141+
document.body.classList.contains("dark-mode") ? "Dark Mode" : "Light Mode";
142+
});
143+
144+
document.getElementById("themeToggle").addEventListener("click", () => {
145+
const highlight = document.querySelector(".theme-highlight");
146+
if (highlight) highlight.style.display = "none";
147+
});
148+
149+
* {
150+
margin: 0;
151+
padding: 0;
152+
box-sizing: border-box;
153+
font-family: Poppins, Arial;
154+
}
155+
156+
:root {
157+
--bg: #f0f4ff;
158+
--text: #222;
159+
--card: #ffffffcc;
160+
--primary: #007bff;
161+
--hover: #0056b3;
162+
}
163+
164+
.dark-mode {
165+
--bg: #0c0c0c;
166+
--text: #fff;
167+
--card: #1a1a1acc;
168+
--primary: #00aaff;
169+
--hover: #0080cc;
170+
}
171+
172+
.background {
173+
position: fixed;
174+
width: 100%;
175+
height: 100%;
176+
background: linear-gradient(135deg, #6dd5fa, #2980b9);
177+
background-size: 400% 400%;
178+
animation: animateBG 12s infinite alternate;
179+
z-index: -1;
180+
}
181+
182+
@keyframes animateBG {
183+
0% { background-position: 0% 50%; }
184+
100% { background-position: 100% 50%; }
185+
}
186+
187+
body {
188+
background: var(--bg);
189+
color: var(--text);
190+
height: 100vh;
191+
display: flex;
192+
justify-content: center;
193+
align-items: center;
194+
}
195+
196+
.container {
197+
background: var(--card);
198+
padding: 30px;
199+
width: 400px;
200+
border-radius: 20px;
201+
backdrop-filter: blur(8px);
202+
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
203+
text-align: center;
204+
animation: fadeIn 0.8s ease;
205+
}
206+
207+
@keyframes fadeIn {
208+
from { opacity: 0; transform: scale(0.8); }
209+
to { opacity: 1; transform: scale(1); }
210+
}
211+
212+
input, select {
213+
padding: 12px;
214+
width: 85%;
215+
margin-top: 10px;
216+
border-radius: 8px;
217+
border: 1px solid #aaa;
218+
font-size: 16px;
219+
}
220+
221+
button {
222+
width: 90%;
223+
padding: 12px;
224+
margin-top: 15px;
225+
font-size: 18px;
226+
border: none;
227+
background: var(--primary);
228+
color: white;
229+
border-radius: 10px;
230+
cursor: pointer;
231+
transition: 0.2s;
232+
}
233+
234+
button:hover {
235+
background: var(--hover);
236+
transform: scale(1.05);
237+
}
238+
239+
#result {
240+
margin-top: 20px;
241+
font-size: 20px;
242+
font-weight: bold;
243+
}
244+
245+
#timer, #score {
246+
font-size: 18px;
247+
margin-bottom: 10px;
248+
font-weight: bold;
249+
}
250+
251+
.restart-btn {
252+
background: #ff5252;
253+
}
254+
255+
.restart-btn:hover {
256+
background: #e00000;
257+
}
258+
259+
.theme-switch input {
260+
display: none;
261+
}
262+
263+
.slider {
264+
width: 50px;
265+
height: 24px;
266+
background: #ccc;
267+
display: inline-block;
268+
border-radius: 50px;
269+
position: relative;
270+
cursor: pointer;
271+
}
272+
273+
.slider:before {
274+
content: "";
275+
width: 20px;
276+
height: 20px;
277+
background: white;
278+
border-radius: 50%;
279+
position: absolute;
280+
top: 2px;
281+
left: 2px;
282+
transition: .3s;
283+
}
284+
285+
input:checked + .slider {
286+
background: #66bb6a;
287+
}
288+
289+
input:checked + .slider:before {
290+
transform: translateX(26px);
291+
}
292+
293+
.theme-highlight {
294+
position: absolute;
295+
top: 15px;
296+
right: 15px;
297+
padding: 10px;
298+
border-radius: 50%;
299+
background: rgba(255, 255, 0, 0.25);
300+
animation: glow 1.5s infinite;
301+
}
302+
303+
@keyframes glow {
304+
0% { box-shadow: 0 0 5px yellow; }
305+
50% { box-shadow: 0 0 20px yellow; }
306+
100% { box-shadow: 0 0 5px yellow; }
307+
}
308+
309+
.hidden {
310+
display: none;
311+
}

0 commit comments

Comments
 (0)