-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtesthangman.html
146 lines (125 loc) · 5.52 KB
/
testhangman.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!doctype html>
<html>
<head>
<title>Hangman!</title>
<style>
#alphabet { margin: auto;
padding: 20px; }
#word { margin: auto;
font: 400em serif bold;
padding: 20px;
}
#info { padding: 20px;
font-color: red;
background-color: yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready( function() {
// this is the secret word!
word = "b u m b l e b e e";
blank = "- - - - - - - - -";
$("#word").text(blank);
// this is the list of letters that have been tried
triedLetters = "";
// this is the number of tries left
tries = 10;
$("#guesses").text("Guesses left: "+tries);
// boolean (true / false variable) to track if game has been won or lost
gameWon = false;
gameLost = false;
// when a user clicks on a letter... this is where everything happens!
$(".letter").click( function() {
// check if the game has been won or lost
if (gameWon != true && gameLost != true) {
// erase the info box
$("#info").text("");
// use text to get the letter that was clicked on
letter = $(this).text();
console.log("clicked on ", letter);
// make a line through the letter
$(this).css("text-decoration", "line-through");
// if the letter has already been clicked on,
// let the user know it's already been tried
if (triedLetters.includes(letter)) {
$("#info").text("Letter "+letter+" already tried.");
// if the letter isn't in the word, reduce
// the number of tries and check if they lost
} else if (! word.includes(letter)) {
// reduce the number of remaining tries by 1
tries = tries - 1;
$("#guesses").text("Mistakes left: "+tries);
// are they out of tries? then they lost!
if (tries < 1) {
gameLost = true;
$("#info").text("Sorry, you're out of guesses. YOU LOSE!");
}
// otherwise, put a line through it and
// add it to the found letters
// and check if the player won or lost
} else {
// replace the blanks in the blanks variable
// with the letter that was clicked on
// replace the blanks with letter in blank
// and replace the letters with blanks in word
while (word.includes(letter)) {
index = word.indexOf(letter);
console.log("index of word is ",index);
word = word.substring(0, index) + " " + word.substring((index + 1));
blank = blank.substring(0,index) + letter + blank.substring((index + 1));
$("#word").text(blank);
console.log("word is ", word);
console.log("blank is ", blank);
}
// check if the player has won the game
if (! blank.includes("-")) {
gameWon = true;
$("#info").text("You WON! Great job!");
}
}
// add the letter to letters already tried
triedLetters = triedLetters + letter;
console.log("triedLetters is ", triedLetters);
console.log("word is ", word);
}
});
//
});
</script>
</head>
<body>
<h1>Let's play Hangman!</h1>
<div id="guesses"></div>
<div id="info"></div>
<div id="word"></div>
<div id="alphabet"><p>Click to make a guess!</p>
<span class="letter" id="a">a</span>
<span class="letter" id="b">b</span>
<span class="letter" id="c">c</span>
<span class="letter" id="d">d</span>
<span class="letter" id="e">e</span>
<span class="letter" id="f">f</span>
<span class="letter" id="g">g</span>
<span class="letter" id="h">h</span>
<span class="letter" id="i">i</span>
<span class="letter" id="j">j</span>
<span class="letter" id="k">k</span>
<span class="letter" id="l">l</span>
<span class="letter" id="m">m</span>
<span class="letter" id="n">n</span>
<span class="letter" id="o">o</span>
<span class="letter" id="p">p</span>
<span class="letter" id="q">q</span>
<span class="letter" id="r">r</span>
<span class="letter" id="s">s</span>
<span class="letter" id="t">t</span>
<span class="letter" id="u">u</span>
<span class="letter" id="v">v</span>
<span class="letter" id="w">w</span>
<span class="letter" id="x">x</span>
<span class="letter" id="y">y</span>
<span class="letter" id="z">z</span>
</div>
</body>
</html>