repl.it
@ThinOldGoose/

Hang-Man

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • hm1.gif
  • hm10.gif
  • hm2.gif
  • hm3.gif
  • hm4.gif
  • hm5.gif
  • hm6.gif
  • hm7.gif
  • hm8.gif
  • hm9.gif
  • hmstart.gif
  • script.js
  • style.css
index.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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<DOCTYPE html>
<html>
<head>
<title>JavaScript Hangman</title>

<script type="text/javascript">

// HangMan II script- By Chris Fortey (http://www.c-g-f.net/)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// Please keep notice intact

var can_play = true;
var words = new Array("CAT", "DOG", "MOUSE", "RABBIT", "HOURSE", "MISSISSIPPI");

var to_guess = "";
var display_word = "";
var used_letters = "";
var wrong_guesses = 0;


function selectLetter(l)
{
if (can_play == false)
{
return;
}

if (used_letters.indexOf(l) != -1)
{
return;
}
	
used_letters += l;
document.game.usedLetters.value = used_letters;
	
if (to_guess.indexOf(l) != -1)
{
 // correct letter guess
pos = 0;
temp_mask = display_word;


while (to_guess.indexOf(l, pos) != -1)
{
pos = to_guess.indexOf(l, pos);			
end = pos + 1;

start_text = temp_mask.substring(0, pos);
end_text = temp_mask.substring(end, temp_mask.length);

temp_mask = start_text + l + end_text;
pos = end;
}

display_word = temp_mask;
document.game.displayWord.value = display_word;
		
if (display_word.indexOf("#") == -1)
{
// won
alert("Well done, you have won!");
can_play = false;
}
}
else
{
// incortect letter guess
wrong_guesses += 1;
eval("document.hm.src=\"hm" + wrong_guesses + ".gif\"");
		
if (wrong_guesses == 10)
{
// lost
alert("Sorry, you have lost!");
can_play = false;
}
}
}

function reset()
{
selectWord();
document.game.usedLetters.value = "";
used_letters = "";
wrong_guesses = 0;
document.hm.src="hmstart.gif";
}

function selectWord()
{
can_play = true;
random_number = Math.round(Math.random() * (words.length - 1));
to_guess = words[random_number];
//document.game.theWord.value = to_guess;
	
// display masked word
masked_word = createMask(to_guess);
document.game.displayWord.value = masked_word;
display_word = masked_word;
}

function createMask(m)
{
mask = "";
word_lenght = m.length;


for (i = 0; i < word_lenght; i ++)
{
mask += "#";
}
return mask;
}

</script>
</head>

<body onLoad="reset(); return true;">


<h1>JavaScript Hangman</h1>

<p><img src="hmstart.gif" height="125" width="75" name="hm"></p>
<form name="game">
<p>Display Word: <input type="text" name="displayWord"><br>
Used Letters: <input type="text" name="usedLetters"></p>
</form>

<p><a href="javascript:selectLetter('A');">A</a> | 
<a href="javascript:selectLetter('B');">B</a> | 
<a href="javascript:selectLetter('C');">C</a> | 
<a href="javascript:selectLetter('D');">D</a> | 
<a href="javascript:selectLetter('E');">E</a> | 
<a href="javascript:selectLetter('F');">F</a> | 
<a href="javascript:selectLetter('G');">G</a> | 
<a href="javascript:selectLetter('H');">H</a> | 
<a href="javascript:selectLetter('I');">I</a> | 
<a href="javascript:selectLetter('J');">J</a> | 
<a href="javascript:selectLetter('K');">K</a> | 
<a href="javascript:selectLetter('L');">L</a>
<a href="javascript:selectLetter('M');">M</a><br>
<a href="javascript:selectLetter('N');">N</a> | 
<a href="javascript:selectLetter('O');">O</a> | 
<a href="javascript:selectLetter('P');">P</a> | 
<a href="javascript:selectLetter('Q');">Q</a> | 
<a href="javascript:selectLetter('R');">R</a> | 
<a href="javascript:selectLetter('S');">S</a> | 
<a href="javascript:selectLetter('T');">T</a> | 
<a href="javascript:selectLetter('U');">U</a> | 
<a href="javascript:selectLetter('V');">V</a> | 
<a href="javascript:selectLetter('W');">W</a> | 
<a href="javascript:selectLetter('X');">X</a> | 
<a href="javascript:selectLetter('Y');">Y</a> | 
<a href="javascript:selectLetter('Z');">Z</a></p>

<p><a href="javascript:reset()">Start game / Reset game</a></p>

<hr>

<p>To change the words used, find the code that starts 'var words = new Array()'. Words for the game appear inbetween the brakets in double quotes, with a comma sperating the words.</p>
<p>For exampe to use the words APPLE and PEARS the code would be: var words = new Array(&quot;APPLE&quot;, &quot;PEARS&quot;)</p>
<p>To use the words APPLE, PEARS and STAIRS  and the code would be: var words = new Array(&quot;APPLE&quot;, &quot;PEARS&quot;, &quot;STAIRS&quot;)</p>
<p>Words should be in uppercase.</p>
</body>
</html>

result
console