Like 0
Fork 0

Last active 1706844968

Helping a fella with his simple word game

swg.css Raw
1body {
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
19header {
20 margin-bottom: 30px;
21}
22
23h1 {
24 color: #3498db;
25 font-size: 32px;
26 margin-bottom: 20px;
27}
28
29p {
30 color: #ecf0f1;
31 font-size: 18px;
32 margin-bottom: 30px;
33}
34
35main {
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
79label {
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
96button {
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
108button:disabled {
109 background-color: #bdc3c7;
110 cursor: not-allowed;
111}
112
113button: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}
124
swg.html Raw
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>
51
swg.js Raw
1let words = [];
2let currentPair = {};
3let score = 0;
4let timer;
5let isTimerRunning = false;
6let initialRemainingClicks = 2; // Store the initial remaining clicks
7let selectedDifficulty = "easy";
8let timeLimit = 60;
9
10/*---------------------------------------------- Submit Answer sortWord(); ----------------------------------------------------------*/
11
12function 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
37function 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
46function 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
59function 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
70function 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
82function generateWords(difficulty) {
83 return correctedWords(difficulty).map(({ word }) => ({
84 word,
85 scrambled: shuffleWord(word),
86 }));
87}
88
89/*---------------------------------------------- The List of Words ------------------------------------------------------------------*/
90function 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
157function changeDifficulty() {
158 selectedDifficulty = document.getElementById("difficulty-select").value;
159 startNewRound(selectedDifficulty);
160}
161
162document.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
171document
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
187document
188 .getElementById("submit-answer-button")
189 .addEventListener("click", function () {
190 sortWord();
191 });
192
193/* ------------------------------------------ Shuffle and Display words --------------------------------------------------------------*/
194
195function shuffleWord(word) {
196 return word
197 .split("")
198 .sort(() => Math.random() - 0.5)
199 .join("");
200}
201
202function 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
214function 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
228function resetScore() {
229 score = 0;
230 document.getElementById("score-value").textContent = score;
231}
232
233function 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
247function 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
260function 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
274function 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
295function updateTimerDisplay(timeLeft) {
296 const timeDisplay = document.getElementById("time-left");
297 timeDisplay.textContent = timeLeft;
298}
299

Powered by Opengist ⋅ Load: 45ms⋅

English