[CODE=javascript]
<html>
<style>
.hangman {
font-face: tahoma;
font-size: 15pt;
color: white;
TEXT-DECORATION: underline;
}
.letters {
font-face: tahoma;
font-size: 10pt;
color: white;
}
.subject {
font-face: tahoma;
font-size: 12pt;
color: gold;
}
.spacer {
font-face: tahome;
font-size: 14pt;
}
</style>
<body bgcolor="black" >
<script>
var Phrases = ["The quick brown fox jumps over the lazy dog", "Chuck", "Mc donalds", "Oragel", "Javascript "]; //set the answers
var Subjects = ["Names", "Names", "Places", "Medicine", "Scripting Language"]; //set the subjects
var misses = 0; //start off with 0 misses
window.onload = doload; //load everything
function doload() {
reset(); //reset all default values
setLetters(); //set the letters back to normal
setPhrase(); //put the phrase and subject up on screen
}
function setPhrase() {
var ph = random(0, Phrases.length-1); //get a random phrase
var phrase = Phrases[ph];
document.getEle mentById("subje ct").innerHTM L = "Subject: " + Subjects[ph];
var tbody = document.getEle mentById("hangm an");
var tr = document.create Element("TR"); //create the phrase on screen in cells
for (i=0; i<phrase.length ; i++) {
if (document.all) { //Make internet explorer hack (it doesn't like dom elements created and using getelementbynam e)
var td = document.create Element("<TD name=\"phrase\" id=\"phrase\">" ); //IE's hacked way of creating elements so you can grab them via .getElementsByT agName
} else {
var td = document.create Element("TD");
td.setAttribute ("name", "phrase"); //set the element name
td.id="phrase"+ random(0, 100000); //set the element id hopefully unique.
}
if (phrase.substri ng(i, i+1)==" ") { tdClass = "spacer"; } else { tdClass = "hangman"; } //set the classname to be used
td.className=td Class; //actually give the element the class
td.setAttribute ("letter", phrase.substrin g(i, i+1)); //custom attribute (some people don't like custom attributes) I use them all the time without any problems.
td.innerHTML = " &n bsp;"; //Give it some spaces so the underline is decent sized
tr.appendChild( td); //append the cell to the row
}
tbody.appendChi ld(tr); //append the row to the table body
}
function random(min, max) {
//Just a function for making random numbers more easily.
random_num = Math.round((Mat h.random()*max) +min)
return random_num
}
function reset() {
misses = 0; //reset misses to 0
setImage(); //reset the hang man image
document.getEle mentById("used_ letters").inner HTML = ""; //reset the used letters
document.getEle mentById("lette rs").innerHTM L = document.getEle mentById("main" ).innerHTML; //reset the letters available
var tbody = document.getEle mentById("hangm an");
while (tbody.childNod es[0]) { //remove last phrase
tbody.removeChi ld(tbody.childN odes[0]); //This removes all the children of tbody so its a clean slate again.
}
}
function setLetters() {
var val=""; //set a blank val
var letters = document.getEle mentById("lette rs").innerHTM L; //get the available letters
letters = letters.split(" "); //split it up by space
for (i=0; i<letters.lengt h; i++) {
val+="<span onclick=\"tryLe tter('"+letters[i]+"');\" style=\"cursor: pointer;\">"+le tters[i]+"</span> "; //this is just creating a span of each letter so you can click the letters instead of typing.
}
document.getEle mentById("avail _letters").inne rHTML = val; //sets the inner html of the avail letters to the new.
}
function tryLetter(lette r) {
var letters = document.getEle mentById("lette rs").innerHTM L;
var phrase = document.getEle mentsByName("ph rase");
var cLetters = "";
var correct = false;
letters = letters.split(" ");
for (i=0; i<letters.lengt h; i++) {
if (letters[i].toLowerCase()! =letter.toLower Case()) { cLetters+=lette rs[i]+" "; } //simple compairson of letters if the letter does not match then it adds it back to the letters avail area.
}
document.getEle mentById("lette rs").innerHTM L = cLetters;
if (document.getEl ementById("used _letters").inne rHTML.indexOf(l etter)>=0) { alert("this letter was already used!"); return false; }
setLetters();
count = 0;
for (i=0; i<phrase.length ; i++) {
if (phrase[i].getAttribute(" letter").toLowe rCase()==letter .toLowerCase()) { phrase[i].innerHTML = letter; correct = true; }
if (phrase[i].innerHTML!="&n bsp;   ;" || phrase[i].className=="sp acer") { count++; }
}
if (count==phrase. length) { alert("Yay you won!"); doload(); return false; } //check for win
if (!correct) { misses++; var fail = setImage(); }
if (fail) { return false; } //return false if it fails
var used = document.getEle mentById("used_ letters").inner HTML + " " + letter
document.getEle mentById("used_ letters").inner HTML = used;
}
function setImage() {
document.getEle mentById("game" ).innerHTML = "<img src=\"images/"+Math.floor(mi sses+1)+".gif\" >";
if (misses==6) { alert("You Lost!!!!"); doload(); return false; } else { return true; }
}
</script>
<table border="0" width="100%">
<tr><td width="500" id="game"><img src="images/1.gif"></td>
<td>
<table>
<tbody id="hangman">
<tr><td class="hangman" > &n bsp;</td><td class="hangman" > &n bsp;</td><td class="hangman" > &n bsp;</td></tr>
</tbody>
</table>
<tr><td>  ;</td><td class="subject" align="left" id="subject"></td></tr>
<tr><td class="letters" >Used letters: <span id="used_letter s"></span></td><td class="letters" >Available letters: <span id="avail_lette rs"></span></td></tr>
<tr><td> < td><input type="text" onkeyup="if (this.value!='' ) { tryLetter(this. value); this.value=''; }" value="Type Letters Here" onclick="this.v alue='';" maxlength="1">
</table>
<div id="letters">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
<div id="main">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
</body>
</html>
[/CODE]
Alright heres my example of the game hangman in javascript. The uploaded zip has the images and such for it. Hope this helps someone.
----- I have modified to the code to work in firefox now ----
<html>
<style>
.hangman {
font-face: tahoma;
font-size: 15pt;
color: white;
TEXT-DECORATION: underline;
}
.letters {
font-face: tahoma;
font-size: 10pt;
color: white;
}
.subject {
font-face: tahoma;
font-size: 12pt;
color: gold;
}
.spacer {
font-face: tahome;
font-size: 14pt;
}
</style>
<body bgcolor="black" >
<script>
var Phrases = ["The quick brown fox jumps over the lazy dog", "Chuck", "Mc donalds", "Oragel", "Javascript "]; //set the answers
var Subjects = ["Names", "Names", "Places", "Medicine", "Scripting Language"]; //set the subjects
var misses = 0; //start off with 0 misses
window.onload = doload; //load everything
function doload() {
reset(); //reset all default values
setLetters(); //set the letters back to normal
setPhrase(); //put the phrase and subject up on screen
}
function setPhrase() {
var ph = random(0, Phrases.length-1); //get a random phrase
var phrase = Phrases[ph];
document.getEle mentById("subje ct").innerHTM L = "Subject: " + Subjects[ph];
var tbody = document.getEle mentById("hangm an");
var tr = document.create Element("TR"); //create the phrase on screen in cells
for (i=0; i<phrase.length ; i++) {
if (document.all) { //Make internet explorer hack (it doesn't like dom elements created and using getelementbynam e)
var td = document.create Element("<TD name=\"phrase\" id=\"phrase\">" ); //IE's hacked way of creating elements so you can grab them via .getElementsByT agName
} else {
var td = document.create Element("TD");
td.setAttribute ("name", "phrase"); //set the element name
td.id="phrase"+ random(0, 100000); //set the element id hopefully unique.
}
if (phrase.substri ng(i, i+1)==" ") { tdClass = "spacer"; } else { tdClass = "hangman"; } //set the classname to be used
td.className=td Class; //actually give the element the class
td.setAttribute ("letter", phrase.substrin g(i, i+1)); //custom attribute (some people don't like custom attributes) I use them all the time without any problems.
td.innerHTML = " &n bsp;"; //Give it some spaces so the underline is decent sized
tr.appendChild( td); //append the cell to the row
}
tbody.appendChi ld(tr); //append the row to the table body
}
function random(min, max) {
//Just a function for making random numbers more easily.
random_num = Math.round((Mat h.random()*max) +min)
return random_num
}
function reset() {
misses = 0; //reset misses to 0
setImage(); //reset the hang man image
document.getEle mentById("used_ letters").inner HTML = ""; //reset the used letters
document.getEle mentById("lette rs").innerHTM L = document.getEle mentById("main" ).innerHTML; //reset the letters available
var tbody = document.getEle mentById("hangm an");
while (tbody.childNod es[0]) { //remove last phrase
tbody.removeChi ld(tbody.childN odes[0]); //This removes all the children of tbody so its a clean slate again.
}
}
function setLetters() {
var val=""; //set a blank val
var letters = document.getEle mentById("lette rs").innerHTM L; //get the available letters
letters = letters.split(" "); //split it up by space
for (i=0; i<letters.lengt h; i++) {
val+="<span onclick=\"tryLe tter('"+letters[i]+"');\" style=\"cursor: pointer;\">"+le tters[i]+"</span> "; //this is just creating a span of each letter so you can click the letters instead of typing.
}
document.getEle mentById("avail _letters").inne rHTML = val; //sets the inner html of the avail letters to the new.
}
function tryLetter(lette r) {
var letters = document.getEle mentById("lette rs").innerHTM L;
var phrase = document.getEle mentsByName("ph rase");
var cLetters = "";
var correct = false;
letters = letters.split(" ");
for (i=0; i<letters.lengt h; i++) {
if (letters[i].toLowerCase()! =letter.toLower Case()) { cLetters+=lette rs[i]+" "; } //simple compairson of letters if the letter does not match then it adds it back to the letters avail area.
}
document.getEle mentById("lette rs").innerHTM L = cLetters;
if (document.getEl ementById("used _letters").inne rHTML.indexOf(l etter)>=0) { alert("this letter was already used!"); return false; }
setLetters();
count = 0;
for (i=0; i<phrase.length ; i++) {
if (phrase[i].getAttribute(" letter").toLowe rCase()==letter .toLowerCase()) { phrase[i].innerHTML = letter; correct = true; }
if (phrase[i].innerHTML!="&n bsp;   ;" || phrase[i].className=="sp acer") { count++; }
}
if (count==phrase. length) { alert("Yay you won!"); doload(); return false; } //check for win
if (!correct) { misses++; var fail = setImage(); }
if (fail) { return false; } //return false if it fails
var used = document.getEle mentById("used_ letters").inner HTML + " " + letter
document.getEle mentById("used_ letters").inner HTML = used;
}
function setImage() {
document.getEle mentById("game" ).innerHTML = "<img src=\"images/"+Math.floor(mi sses+1)+".gif\" >";
if (misses==6) { alert("You Lost!!!!"); doload(); return false; } else { return true; }
}
</script>
<table border="0" width="100%">
<tr><td width="500" id="game"><img src="images/1.gif"></td>
<td>
<table>
<tbody id="hangman">
<tr><td class="hangman" > &n bsp;</td><td class="hangman" > &n bsp;</td><td class="hangman" > &n bsp;</td></tr>
</tbody>
</table>
<tr><td>  ;</td><td class="subject" align="left" id="subject"></td></tr>
<tr><td class="letters" >Used letters: <span id="used_letter s"></span></td><td class="letters" >Available letters: <span id="avail_lette rs"></span></td></tr>
<tr><td> < td><input type="text" onkeyup="if (this.value!='' ) { tryLetter(this. value); this.value=''; }" value="Type Letters Here" onclick="this.v alue='';" maxlength="1">
</table>
<div id="letters">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
<div id="main">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
</body>
</html>
[/CODE]
Alright heres my example of the game hangman in javascript. The uploaded zip has the images and such for it. Hope this helps someone.
----- I have modified to the code to work in firefox now ----
Comment