J'aime 0
Fork 0

Dernière activité 1706844968

Helping a fella with his simple word game

DraxCodes's Avatar 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

Propulsé par Opengist ⋅ Load: 34ms⋅

Français