Révisions pour Random help game

DraxCodes a révisé ce gist 1706844968. Aller à la révision

3 files changed, 471 insertions

swg.css(fichier créé)

		@@ -0,0 +1,123 @@
1	+	body {
2	+	font-family: "Arial", sans-serif;
3	+	text-align: center;
4	+	padding: 50px;
5	+	background-color: #2c3e50;
6	+	color: #ecf0f1;
7	+	margin: 0;
8	+	}
9	+
10	+	#app {
11	+	max-width: 600px;
12	+	margin: 0 auto;
13	+	background-color: #34495e;
14	+	padding: 30px;
15	+	border-radius: 10px;
16	+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
17	+	}
18	+
19	+	header {
20	+	margin-bottom: 30px;
21	+	}
22	+
23	+	h1 {
24	+	color: #3498db;
25	+	font-size: 32px;
26	+	margin-bottom: 20px;
27	+	}
28	+
29	+	p {
30	+	color: #ecf0f1;
31	+	font-size: 18px;
32	+	margin-bottom: 30px;
33	+	}
34	+
35	+	main {
36	+	margin-bottom: 30px;
37	+	}
38	+
39	+	#word-container {
40	+	margin-bottom: 30px;
41	+	font-size: 36px;
42	+	font-weight: bold;
43	+	color: #2ecc71;
44	+	}
45	+
46	+	#word-input {
47	+	font-size: 18px;
48	+	padding: 15px;
49	+	margin-bottom: 30px;
50	+	border: 2px solid #3498db;
51	+	border-radius: 8px;
52	+	color: #3498db;
53	+	background-color: #fff;
54	+	}
55	+
56	+	#game-info {
57	+	display: flex;
58	+	flex-wrap: wrap;
59	+	justify-content: space-between;
60	+	margin-bottom: 30px;
61	+	}
62	+
63	+	#score,
64	+	#timer,
65	+	#remaining-clicks {
66	+	font-size: 18px;
67	+	margin-bottom: 20px;
68	+	color: #ecf0f1;
69	+	flex-basis: 100%;
70	+	}
71	+
72	+	#score-value,
73	+	#time-left,
74	+	#remaining-clicks-value {
75	+	font-weight: bold;
76	+	color: #e74c3c;
77	+	}
78	+
79	+	label {
80	+	display: block;
81	+	margin-bottom: 15px;
82	+	color: #3498db;
83	+	font-size: 18px;
84	+	}
85	+
86	+	#difficulty-select {
87	+	font-size: 18px;
88	+	padding: 15px;
89	+	margin-bottom: 30px;
90	+	border: 2px solid #3498db;
91	+	border-radius: 8px;
92	+	color: #3498db;
93	+	background-color: #fff;
94	+	}
95	+
96	+	button {
97	+	font-size: 18px;
98	+	padding: 15px;
99	+	cursor: pointer;
100	+	background-color: #3498db;
101	+	color: #fff;
102	+	border: none;
103	+	border-radius: 8px;
104	+	margin-right: 15px;
105	+	transition: background-color 0.3s ease;
106	+	}
107	+
108	+	button:disabled {
109	+	background-color: #bdc3c7;
110	+	cursor: not-allowed;
111	+	}
112	+
113	+	button:hover {
114	+	background-color: #2980b9;
115	+	}
116	+
117	+	#another-word-button {
118	+	margin-bottom: 30px;
119	+	}
120	+
121	+	#remaining-clicks-value {
122	+	margin-left: 5px;
123	+	}

swg.html(fichier créé)

		@@ -0,0 +1,50 @@
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	+	<link rel="stylesheet" href="style.css" />
7	+	<title>QuickSort Word Scramble</title>
8	+	</head>
9	+	<body>
10	+	<div id="app">
11	+	<header>
12	+	<h1>Simple word game</h1>
13	+	<p>Rearrange the words to correct form , before time runs out</p>
14	+	</header>
15	+	<main>
16	+	<div id="word-container"></div>
17	+	<input
18	+	type="text"
19	+	id="word-input"
20	+	placeholder="Enter rearranged word"
21	+	/>
22	+	</main>
23	+	<!-- INFO -->
24	+	<div id="game-info">
25	+	<div id="score">Score: <span id="score-value">0</span></div>
26	+	<div id="timer">Time Left: <span id="time-left">60</span> seconds</div>
27	+	<div id="remaining-clicks">
28	+	Another word: <span id="remaining-clicks-value">2</span>
29	+	</div>
30	+	</div>
31	+	<!-- DIFICULTIES -->
32	+	<div>
33	+	<label for="difficulty-select">Select Difficulty:</label>
34	+	<select id="difficulty-select" onchange="changeDifficulty()">
35	+	<option value="easy">Easy</option>
36	+	<option value="medium">Medium</option>
37	+	<option value="hard">Hard</option>
38	+	</select>
39	+	</div>
40	+	<!-- BUTTONS -->
41	+	<button onclick="startGame()">Start New Game</button>
42	+	<button id="another-word-button" onclick="newWord('another-word-button')">
43	+	Another word
44	+	</button>
45	+	<button onclick="sortWord()">Submit Answer</button>
46	+	</div>
47	+
48	+	<script src="script.js"></script>
49	+	</body>
50	+	</html>

swg.js(fichier créé)

		@@ -0,0 +1,298 @@
1	+	let words = [];
2	+	let currentPair = {};
3	+	let score = 0;
4	+	let timer;
5	+	let isTimerRunning = false;
6	+	let initialRemainingClicks = 2; // Store the initial remaining clicks
7	+	let selectedDifficulty = "easy";
8	+	let timeLimit = 60;
9	+
10	+	/---------------------------------------------- Submit Answer sortWord(); ----------------------------------------------------------/
11	+
12	+	function sortWord() {
13	+	const userInput = document
14	+	.getElementById("word-input")
15	+	.value.trim()
16	+	.toLowerCase();
17	+
18	+	const isCorrect = userInput === currentPair.word;
19	+
20	+	if (isCorrect) {
21	+	score += 10;
22	+	} else {
23	+	score -= 10;
24	+	}
25	+
26	+	document.getElementById("score-value").textContent = score;
27	+
28	+	if (currentPair.remainingClicks > 0) {
29	+	setTimeout(function () {
30	+	newWord("submit-answer");
31	+	}, 1000);
32	+	}
33	+	}
34	+
35	+	/---------------------------------------------- Generate Words ----------- ----------------------------------------------------------/
36	+
37	+	function generateWordAndScrambled() {
38	+	let newPair;
39	+	do {
40	+	newPair = words[Math.floor(Math.random() * words.length)];
41	+	} while (newPair.word === currentPair.word);
42	+
43	+	return { word: newPair.word, scrambled: newPair.scrambled };
44	+	}
45	+
46	+	function setDefaultGameUI() {
47	+	// set up the UI for a new game
48	+	// add timer UI functionality here
49	+	document.getElementById("time-left").textContent = getTimeLimit(selectedDifficulty);
50	+	document.getElementById("score-value").textContent = score;
51	+	document.getElementById("remaining-clicks-value").textContent =
52	+	currentPair.remainingClicks;
53	+	document.getElementById("another-word-button").disabled = false;
54	+	displayWord(currentPair.scrambled);
55	+	}
56	+
57	+	/---------------------------------------------- AnotherWord newWord(); ----------------------------------------------------------/
58	+
59	+	function newWord(source) {
60	+	if (currentPair.remainingClicks > 0) {
61	+	const { word, scrambled } = generateWordAndScrambled();
62	+	currentPair = { ...currentPair, word, scrambled };
63	+	if (source === "another-word-button") {
64	+	currentPair.remainingClicks--;
65	+	}
66	+	updateUI();
67	+	}
68	+	}
69	+
70	+	function updateUI() {
71	+	document.getElementById("remaining-clicks-value").textContent =
72	+	currentPair.remainingClicks; // update remaining clicks that the user can see
73	+	if (currentPair.remainingClicks === 0) {
74	+	document.getElementById("another-word-button").disabled = true; // if out of clicks disable the button
75	+	}
76	+	document.getElementById("word-input").value = "";
77	+	displayWord(currentPair.scrambled); // update displayed word
78	+	}
79	+
80	+	/---------------------------------------------- More Generated Words ----------------------------------------------------------------/
81	+
82	+	function generateWords(difficulty) {
83	+	return correctedWords(difficulty).map(({ word }) => ({
84	+	word,
85	+	scrambled: shuffleWord(word),
86	+	}));
87	+	}
88	+
89	+	/---------------------------------------------- The List of Words ------------------------------------------------------------------/
90	+	function correctedWords(difficulty) {
91	+	const wordLists = {
92	+	easy: [
93	+	{ word: "cat" },
94	+	{ word: "dog" },
95	+	{ word: "bat" },
96	+	{ word: "sun" },
97	+	{ word: "sky" },
98	+	{ word: "cup" },
99	+	{ word: "pen" },
100	+	{ word: "hat" },
101	+	{ word: "run" },
102	+	{ word: "box" },
103	+	{ word: "red" },
104	+	{ word: "lip" },
105	+	{ word: "top" },
106	+	{ word: "hop" },
107	+	{ word: "fly" },
108	+	{ word: "cry" },
109	+	{ word: "joy" },
110	+	{ word: "zip" },
111	+	{ word: "mix" },
112	+	{ word: "fun" },
113	+	],
114	+	medium: [
115	+	{ word: "apple" },
116	+	{ word: "happy" },
117	+	{ word: "table" },
118	+	{ word: "house" },
119	+	{ word: "mouse" },
120	+	{ word: "plant" },
121	+	{ word: "water" },
122	+	{ word: "night" },
123	+	{ word: "music" },
124	+	{ word: "dance" },
125	+	{ word: "grape" },
126	+	{ word: "smile" },
127	+	{ word: "bread" },
128	+	{ word: "dream" },
129	+	{ word: "cloud" },
130	+	{ word: "light" },
131	+	{ word: "tiger" },
132	+	{ word: "robot" },
133	+	{ word: "piano" },
134	+	{ word: "flame" },
135	+	{ word: "guitar" },
136	+	{ word: "planet" },
137	+	{ word: "forest" },
138	+	],
139	+	hard: [
140	+	{ word: "algorithm" },
141	+	{ word: "programming" },
142	+	{ word: "developer" },
143	+	{ word: "javascript" },
144	+	],
145	+	};
146	+	const selectedWordList = wordLists[difficulty] \|\| wordLists.easy;
147	+
148	+	// Now, we shuffle and return the words based on the selected difficulty
149	+	return selectedWordList.map(({ word }) => ({
150	+	word,
151	+	scrambled: shuffleWord(word),
152	+	}));
153	+	}
154	+
155	+	/---------------------------------------- Event Listeners DIFFICULTIES-----------------------------------------/
156	+
157	+	function changeDifficulty() {
158	+	selectedDifficulty = document.getElementById("difficulty-select").value;
159	+	startNewRound(selectedDifficulty);
160	+	}
161	+
162	+	document.getElementById("start-button").addEventListener("click", function () {
163	+	if (!isTimerRunning) {
164	+	const selectedDifficulty =
165	+	document.getElementById("difficulty-select").value;
166	+	startGame(selectedDifficulty);
167	+	isTimerRunning = true;
168	+	}
169	+	});
170	+
171	+	document
172	+	.getElementById("another-word-button")
173	+	.addEventListener("click", function () {
174	+	if (currentPair.remainingClicks > 0) {
175	+	const { word, scrambled } = generateWordAndScrambled();
176	+	currentPair = {
177	+	word,
178	+	scrambled,
179	+	remainingClicks: currentPair.remainingClicks - 1,
180	+	};
181	+	updateUI();
182	+	} else {
183	+	startNewRound();
184	+	}
185	+	});
186	+
187	+	document
188	+	.getElementById("submit-answer-button")
189	+	.addEventListener("click", function () {
190	+	sortWord();
191	+	});
192	+
193	+	/* ------------------------------------------ Shuffle and Display words --------------------------------------------------------------*/
194	+
195	+	function shuffleWord(word) {
196	+	return word
197	+	.split("")
198	+	.sort(() => Math.random() - 0.5)
199	+	.join("");
200	+	}
201	+
202	+	function displayWord(word) {
203	+	const wordContainer = document.getElementById("word-container");
204	+	wordContainer.innerHTML = "";
205	+	for (let letter of word) {
206	+	const letterSpan = document.createElement("span");
207	+	letterSpan.textContent = letter;
208	+	wordContainer.appendChild(letterSpan);
209	+	}
210	+	}
211	+
212	+	/----------------------------------------- startGame() , timer , reset score , new round ---------------------------------------------/
213	+
214	+	function startGame(difficulty) {
215	+	words = generateWords(difficulty);
216	+	const { word, scrambled } = generateWordAndScrambled();
217	+	currentPair = { word, scrambled, remainingClicks: initialRemainingClicks };
218	+
219	+	timeLimit = getTimeLimit(selectedDifficulty);
220	+
221	+	// Reset the timer
222	+	clearInterval(timer);
223	+	countdownTimer(timeLimit);
224	+
225	+	setDefaultGameUI();
226	+	}
227	+
228	+	function resetScore() {
229	+	score = 0;
230	+	document.getElementById("score-value").textContent = score;
231	+	}
232	+
233	+	function startNewRound(difficulty) {
234	+	currentPair = {};
235	+	words = generateWords(difficulty);
236	+	const { word, scrambled } = generateWordAndScrambled();
237	+	currentPair = {
238	+	word,
239	+	scrambled,
240	+	remainingClicks: getRemainingClicks(difficulty),
241	+	};
242	+	setDefaultGameUI();
243	+	}
244	+
245	+	/--------------------------------------- DIFFICULTY SETTINGS ------------------------------------------------------------------------/
246	+
247	+	function getTimeLimit(difficulty) {
248	+	switch (difficulty) {
249	+	case "easy":
250	+	return 60;
251	+	case "medium":
252	+	return 45;
253	+	case "hard":
254	+	return 30;
255	+	default:
256	+	return 60;
257	+	}
258	+	}
259	+
260	+	function getRemainingClicks(difficulty) {
261	+	switch (difficulty) {
262	+	case "easy":
263	+	case "medium":
264	+	return 2;
265	+	case "hard":
266	+	return 3;
267	+	default:
268	+	return 2;
269	+	}
270	+	}
271	+
272	+	/--------------------------------------------------- TIMER -------------------------------------------------------------------------/
273	+
274	+	function countdownTimer(timeLimit) {
275	+	timeleft = 60;
276	+	timeLeft = timeLimit;
277	+	updateTimerDisplay();
278	+
279	+	timer = setInterval(() => {
280	+	timeLeft--;
281	+
282	+	if (timeLeft < 0) {
283	+	timeLeft = 0;
284	+	}
285	+
286	+	updateTimerDisplay(timeLeft);
287	+
288	+	if (timeLeft === 0) {
289	+	clearInterval(timer);
290	+	isTimerRunning = false;
291	+	}
292	+	}, 1000);
293	+	}
294	+
295	+	function updateTimerDisplay(timeLeft) {
296	+	const timeDisplay = document.getElementById("time-left");
297	+	timeDisplay.textContent = timeLeft;
298	+	}

Plus récent Plus ancien