Skip to content

Commit 0b83af3

Browse files
leoncoolmoonleoncoolmoon
committed
random words definiation of words
1 parent 31c23ba commit 0b83af3

File tree

3 files changed

+145
-61
lines changed

3 files changed

+145
-61
lines changed

‎18-Hangman-Game/index.html

Lines changed: 64 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,71 @@
11
<!DOCTYPE html>
22
<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>Hangman</title>
83

9-
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
10-
<!-- Also uploaded the demo of this code in a gif : https://c.tenor.com/x8v1oNUOmg4AAAAd/tenor.gif-->
11-
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="user-scalable=no width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Hangman</title>
129

13-
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
14-
<!-- More html-css-js Games Calculators Games Cards Elements Projects on https://www.github.com/he-is-talha -->
15-
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
10+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
11+
<!-- Also uploaded the demo of this code in a gif : https://c.tenor.com/x8v1oNUOmg4AAAAd/tenor.gif-->
12+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
1613

17-
<link rel="icon" href="https://leoncoolmoon.github.io/icon.png" />
18-
</head>
19-
<body>
20-
<h1>Hangman</h1>
21-
<p>Find the hidden word - Press a letter</p>
22-
<div class="game-container">
23-
<svg height="250" width="200" class="figure-container">
24-
<!-- rod -->
25-
<line x1="60" y1="20" x2="140" y2="20" />
26-
<line x1="140" y1="20" x2="140" y2="50" />
27-
<line x1="60" y1="20" x2="60" y2="230" />
28-
<line x1="20" y1="230" x2="100" y2="230" />
29-
<!-- head -->
30-
<circle cx="140" cy="70" r="20" class="figure-part" />
31-
<!-- body -->
32-
<line x1="140" y1="90" x2="140" y2="150" class="figure-part" />
33-
<!-- arms -->
34-
<line x1="140" y1="120" x2="120" y2="100" class="figure-part" />
35-
<line x1="140" y1="120" x2="160" y2="100" class="figure-part" />
36-
<!-- legs -->
37-
<line x1="140" y1="150" x2="120" y2="180" class="figure-part" />
38-
<line x1="140" y1="150" x2="160" y2="180" class="figure-part" />
39-
</svg>
40-
<div class="wrong-letters-container">
41-
<div id="wrong-letters"></div>
42-
</div>
43-
<div class="word" id="word"></div>
44-
</div>
45-
<!-- Popup -->
46-
<div class="popup-container" id="popup-container">
47-
<div class="popup">
48-
<h2 id="final-message"></h2>
49-
<h3 id="final-message-reveal-word"></h3>
50-
<button id="play-button">Play Again</button>
51-
</div>
52-
</div>
53-
<!-- Notification -->
54-
<div class="notification-container" id="notification-container">
55-
<p>You have already entered this letter</p>
14+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
15+
<!-- More html-css-js Games Calculators Games Cards Elements Projects on https://www.github.com/he-is-talha -->
16+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
17+
18+
<link rel="icon" href="https://leoncoolmoon.github.io/icon.png" />
19+
</head>
20+
21+
<body>
22+
<h1>Hangman</h1>
23+
<p>Find the hidden word - Press a letter</p>
24+
<div class="game-container">
25+
<svg height="250" width="200" class="figure-container">
26+
<!-- rod -->
27+
<line x1="60" y1="20" x2="140" y2="20" />
28+
<line x1="140" y1="20" x2="140" y2="50" />
29+
<line x1="60" y1="20" x2="60" y2="230" />
30+
<line x1="20" y1="230" x2="100" y2="230" />
31+
<!-- head -->
32+
<circle cx="140" cy="70" r="20" class="figure-part" />
33+
<!-- body -->
34+
<line x1="140" y1="90" x2="140" y2="150" class="figure-part" />
35+
<!-- arms -->
36+
<line x1="140" y1="120" x2="120" y2="100" class="figure-part" />
37+
<line x1="140" y1="120" x2="160" y2="100" class="figure-part" />
38+
<!-- legs -->
39+
<line x1="140" y1="150" x2="120" y2="180" class="figure-part" />
40+
<line x1="140" y1="150" x2="160" y2="180" class="figure-part" />
41+
</svg>
42+
<div class="wrong-letters-container">
43+
<div id="wrong-letters"></div>
5644
</div>
57-
<div id = "virtual_keyboard">
45+
<div class="word" id="word"></div>
46+
</div>
47+
<!-- Popup -->
48+
<div class="popup-container" id="popup-container">
49+
<div class="popup">
50+
<h2 id="final-message"></h2>
51+
<h3 id="final-message-reveal-word"></h3>
52+
<button id="play-button">Play Again</button>
53+
<button id="def-button">Definition</button>
5854
</div>
59-
<script src="script.js"></script>
60-
</body>
61-
</html>
55+
</div>
56+
<!-- Notification -->
57+
<div class="notification-container" id="notification-container">
58+
<p>You have already entered this letter</p>
59+
</div>
60+
<div id="virtual_keyboard">
61+
</div>
62+
<div id="resultContainer" class="hidden">
63+
<button id="closeButton" style="position: absolute; top: 0px; right: 0px;">×</button>
64+
<div id="resultContent"></div>
65+
66+
67+
</div>
68+
<script src="script.js"></script>
69+
</body>
70+
71+
</html>

‎18-Hangman-Game/script.js

Lines changed: 51 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const wordElement = document.getElementById("word");
22
const wrongLettersElement = document.getElementById("wrong-letters");
33
const playAgainButton = document.getElementById("play-button");
4+
const definitionButton = document.getElementById("def-button");
45
const popup = document.getElementById("popup-container");
56
const notification = document.getElementById("notification-container");
67
const finalMessage = document.getElementById("final-message");
@@ -34,12 +35,15 @@ const words = [
3435
"node",
3536
];
3637
let selectedWord = words[Math.floor(Math.random() * words.length)];
37-
3838
let playable = true;
3939

4040
const correctLetters = [];
4141
const wrongLetters = [];
42-
42+
async function fetchRandomWord() {
43+
const response = await fetch('https://random-word-api.herokuapp.com/word');
44+
const randomWord = await response.json();
45+
return randomWord[0]; // 返回随机单词
46+
}
4347
function displayWord() {
4448
wordElement.innerHTML = `
4549
${selectedWord
@@ -113,16 +117,57 @@ window.addEventListener("keypress", (e) => {
113117
press (e.key.toLowerCase());
114118
});
115119

116-
playAgainButton.addEventListener("click", () => {
120+
playAgainButton.addEventListener("click", async () => {
117121
playable = true;
118122
correctLetters.splice(0);
119123
wrongLetters.splice(0);
120-
selectedWord = words[Math.floor(Math.random() * words.length)];
124+
//selectedWord = words[Math.floor(Math.random() * words.length)];
125+
selectedWord = await fetchRandomWord();
121126
displayWord();
122127
updateWrongLettersElement();
123128
popup.style.display = "none";
124129
});
130+
definitionButton.addEventListener("click", async () => {
131+
const word = selectedWord;
132+
if (!word) return;
133+
134+
const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
135+
const data = await response.json();
125136

137+
const resultContent = document.getElementById('resultContent');
138+
resultContent.innerHTML = formatResult(data);
139+
140+
document.getElementById('resultContainer').classList.remove('hidden');
141+
document.body.classList.remove('hidden-result');
142+
});
143+
function formatResult(data) {
144+
if (!data || data.length === 0 || data.title === 'No Definitions Found') return 'No results found.';
145+
146+
const wordData = data[0];
147+
let resultHTML = `<h2>${wordData.word}</h2>`;
148+
resultHTML += `<p><strong>Phonetic:</strong> ${wordData.phonetic || 'N/A'}</p>`;
149+
150+
if (wordData.origin) {
151+
resultHTML += `<p><strong>Origin:</strong> ${wordData.origin}</p>`;
152+
}
153+
154+
resultHTML += '<h3>Meanings:</h3>';
155+
wordData.meanings.forEach(meaning => {
156+
resultHTML += `<p><strong>${meaning.partOfSpeech}</strong></p>`;
157+
meaning.definitions.forEach(def => {
158+
resultHTML += `<p> - ${def.definition}</p>`;
159+
if (def.example) {
160+
resultHTML += `<p><em>Example:</em> ${def.example}</p>`;
161+
}
162+
});
163+
});
164+
165+
return resultHTML;
166+
}
167+
document.getElementById('closeButton').addEventListener('click', () => {
168+
document.getElementById('resultContainer').classList.add('hidden');
169+
document.body.classList.add('hidden-result');
170+
});
126171
// Init
127172
displayWord();
128173
function hasPhysicalKeyboard() {
@@ -145,8 +190,8 @@ function createVirtualKeyboard(divElement) {
145190
keyboard.style.justifyContent = 'center';
146191
keyboard.style.padding = '10px';
147192
keyboard.style.position = 'absolute';
148-
keyboard.style.top = '75%';
149-
keyboard.style.width = '100%';
193+
keyboard.style.top = '60vh';
194+
keyboard.style.width = '100vw';
150195
keyboard.style.left = '0';
151196
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
152197
letters.split('').forEach(letter => {

‎18-Hangman-Game/style.css

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ body {
1818
flex-direction: column;
1919
align-items: center;
2020
justify-content: center;
21-
height: 80vh;
21+
height: 60vh;
2222
overflow: hidden;
2323
margin: 0;
2424
}
@@ -99,6 +99,7 @@ h3 {
9999
display: none;
100100
align-items: center;
101101
justify-content: center;
102+
z-index: 500;
102103
}
103104

104105
.popup {
@@ -145,3 +146,31 @@ h3 {
145146
.notification-container p {
146147
margin: 0;
147148
}
149+
#resultContainer {
150+
position: fixed;
151+
top: 50px;
152+
left: 50%;
153+
transform: translateX(-50%);
154+
background-color: #224ca4;
155+
border: 1px solid #ccc;
156+
padding: 20px;
157+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
158+
max-width: 500px;
159+
width: 80%;
160+
z-index: 1000;
161+
162+
}
163+
164+
.hidden {
165+
display: none;
166+
}
167+
168+
#resultContent {
169+
text-align: left;
170+
max-height: 70vh;
171+
overflow-y: auto;
172+
}
173+
174+
body.hidden-result #resultContainer {
175+
display: none;
176+
}

0 commit comments

Comments
 (0)