<html>
<head>
<style type="text/css">
.all_display {
border-left:8px solid lightgray;
border-top:8px solid darkgray;
border-right:8px solid #505050;
border-bottom:8px solid #505050;
background-color:white;
width:60%;
margin-left:20%;
}
.inner_tablecell {
font-size: 14px;
font-weight: bold;
text-align: center;
width: 12px;
}
.fake_link {
color: blue;
font-weight: bold;
text-decoration: underline;
cursor: hand;
cursor: pointer;
}
.img1 {
background-image: url("imgs/imageA.jpg");
background-repeat: no-repeat;
}
.img2 {
background-image: url("imgs/imageB.jpg");
background-repeat: no-repeat;
}
.img3 {
background-image: url("imgs/imageC.jpg");
background-repeat: no-repeat;
}
.img4 {
background-image: url("imgs/imageD.jpg");
background-repeat: no-repeat;
}
.img5 {
background-image: url("imgs/imageE.jpg");
background-repeat: no-repeat;
}
.img6 {
background-image: url("imgs/imageF.jpg");
background-repeat: no-repeat;
}
.img7 {
background-image: url("imgs/imageG.jpg");
background-repeat: no-repeat;
}
.img8 {
background-image: url("imgs/imageH.jpg");
background-repeat: no-repeat;
}
.img9 {
background-image: url("imgs/imageI.jpg");
background-repeat: no-repeat;
}
.img10 {
background-image: url("imgs/imageJ.jpg");
background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
var NumOfWords = 42;
var selectedWord
var timerID
function WordList() {
this.length = NumOfWords;
this[0] = ["GEORGE WASHINGTON", "hint description"];
this[1] = ["JOHN ADAMS", "hint description"];
this[2] = ["THOMAS JEFFERSON", "hint description"];
this[3] = ["JAMES MADISON", "hint description"];
this[4] = ["JAMES MONROE", "hint description"];
this[5] = ["JOHN QUINCY ADAMS", "hint description"];
this[6] = ["ANDREW JACKSON", "hint description"];
this[7] = ["MARTIN VAN BUREN", "hint description"];
this[8] = ["WILLIAM HENRY HARRISON", "hint description"];
this[9] = ["JOHN TYLER", "hint description"];
this[10] = ["JAMES POLK", "hint description"];
this[11] = ["ZACHARY TAYLOR", "hint description"];
this[12] = ["MILLARD FILLMORE", "hint description"];
this[13] = ["FRANKLIN PIERCE", "hint description"];
this[14] = ["JAMES BUCHANAN", "hint description"];
this[15] = ["ABRAHAM LINCOLN", "hint description"];
this[16] = ["ANDREW JOHNSON", "hint description"];
this[17] = ["ULYSSES GRANT", "hint description"];
this[18] = ["RUTHERFORD HAYES", "hint description"];
this[19] = ["JAMES GARFIELD", "hint description"];
this[20] = ["CHESTER ARTHUR", "hint description"];
this[21] = ["GROVER CLEVELAND", "hint description"];
this[22] = ["BENJAMIN HARRISON", "hint description"];
this[23] = ["GROVER CLEVELAND", "hint description"];
this[24] = ["WILLIAM MCKINLEY", "hint description"];
this[25] = ["THEODORE ROOSEVELT", "hint description"];
this[26] = ["WILLIAM HOWARD TAFT", "hint description"];
this[27] = ["WOODROW WILSON", "hint description"];
this[28] = ["WARREN HARDING", "hint description"];
this[29] = ["CALVIN COOLIDGE", "hint description"];
this[30] = ["HERBERT HOOVER", "hint description"];
this[31] = ["FRANKLIN ROOSEVELT", "hint description"];
this[32] = ["HARRY TRUMAN", "hint description"];
this[33] = ["DWIGHT EISENHOWER", "hint description"];
this[34] = ["JOHN KENNEDY", "hint description"];
this[35] = ["LYNDON JOHNSON", "hint description"];
this[36] = ["RICHARD NIXON", "hint description"];
this[37] = ["GERALD FORD", "hint description"];
this[38] = ["JIMMY CARTER", "hint description"];
this[39] = ["RONALD REAGAN", "hint description"];
this[40] = ["GEORGE BUSH", "hint description"];
this[41] = ["BILL CLINTON", "hint description"];
this[42] = ["BARACK OBAMA", "hint description"];
}
function startGame(alphabetElementID, wordElementID, hintElementID, timerElementID, graphicElementID) {
displayAlphabet(alphabetElementID, wordElementID, graphicElementID)
displayRandomWord(wordElementID, hintElementID)
displayTimer(timerElementID, 1) // reset timer
displayGraphic(graphicElementID, 1)
displayTimer(timerElementID, 0) // run timer
} // startGame(string, string, string, string, string, string)
// create display using DOM technique
function displayAlphabet(displayElementID, awordElementID, graphicElementID) {
var dElem = document.getElementById(displayElementID)
if (dElem) { // display element exists
if (dElem.getElementsByTagName("table").length>0) { // table exists already
var alphabetTable = dElem.getElementsByTagName("table")[0] // expect only 1 table
for (var row=0; row<alphabetTable.rows.length; row++) {
for (var col=0; col<alphabetTable.rows[row].cells.length; col++) {
var content = alphabetTable.rows[row].cells[col].style.visibility = null
}
}
}
else { // not have table yet, create it
var alp
var newTab = document.createElement("table")
newTab.style.width = "60%"
newTab.style.marginLeft = "20%"
var newTr1 = newTab.insertRow(0) // first row
for (var i=65; i<78; i++) { // display A-M
alp = String.fromCharCode(i)
var newTd = newTr1.insertCell(i-65) // each table cell in 1st row
var arg = "'"+alp+"','"+displayElementID+"','"+awordElementID+"','"+graphicElementID+"'"
newTd.className = "inner_tablecell"
newTd.onclick = function() { chooseAlphabet(this, displayElementID, awordElementID, graphicElementID) }
var tdCont = document.createElement("span")
tdCont.className = "fake_link"
tdCont.innerHTML = alp
newTd.appendChild(tdCont)
}
var newTr2 = newTab.insertRow(1) // first row
for (var i=78; i<91; i++) { // display A-M
alp = String.fromCharCode(i)
var newTd = newTr2.insertCell(i-78) // each table cell in 2nd row
newTd.className = "inner_tablecell"
newTd.onclick = function() { chooseAlphabet(this, displayElementID, awordElementID, graphicElementID) }
var tdCont = document.createElement("span")
tdCont.className = "fake_link"
tdCont.innerHTML = alp
newTd.appendChild(tdCont)
}
dElem.appendChild(newTab)
}
}
} // displayAlphabet(string, string, string)
// create display using string which is assigned to innerHTML
function displayRandomWord(displayElementID, hintElementID) {
selectedWord = (new WordList())[Math.floor(Math.random()*NumOfWords)]
var dElem = document.getElementById(displayElementID)
var hElem = document.getElementById(hintElementID)
if (dElem) { // display element exists
var out = "<table style=\"width:60%;margin-left:20%\"><tr>\n"
for (var i=0; i<selectedWord[0].length; i++) {
out += "<td class=\"inner_tablecell\">"
out += (selectedWord[0].charAt(i)==" ")? " " : "_"
out += "</td>\n"
}
out += "</tr></table>"
dElem.innerHTML = out
}
if (hElem) { // hint element exists
hElem.innerHTML = selectedWord[1]
}
} // displayRandomWord(string)
function displayTimer(timerElementID, reset) {
var dElem = document.getElementById(timerElementID)
if (dElem) {
if (!isNaN(reset) && reset>0) {
dElem.innerHTML = "00:00:00" // reset value
}
else {
var time = dElem.innerHTML.split(":")
if (time.length==3) { // somewhat valid size
// ensure to integer
time[0] = parseInt(time[0],10)
time[1] = parseInt(time[1],10)
time[2] = parseInt(time[2],10)
time[2] += 1 // increase by 1 second
time[1] += Math.floor(time[2]/60) // add second to minute
time[0] += Math.floor(time[1]/60) // add minute to hour
time[2] = time[2]%60 // adjust second
time[1] = time[1]%60 // adjust minute
var timeStr = time[0]+":" // hour
timeStr += (time[1]<10)? ("0"+time[1]) : time[1] // add '0' if minute is less than 10
timeStr += ":"
timeStr += (time[2]<10)? ("0"+time[2]) : time[2] // add '0' if second is less than 10
dElem.innerHTML = timeStr
// wait 1000 milliseconds before display the time again
timerID = window.setTimeout("displayTimer('"+timerElementID+"', 0)", 1000)
}
}
}
} // displayTimer(string)
function displayGraphic(graphicElementID, reset) {
var dElem = document.getElementById(graphicElementID)
if (dElem) { // graphic element exists
var img = dElem.getElementsByTagName("div")[0]
if (!isNaN(reset) && reset>0) { // reset
img.className = "img1"
}
else {
var i = parseInt(img.className.replace("img",""),10)
img.className = "img"+(i+1)
} // either reset or move the image to the back
} // element exists
} // displayGraphic(string, int)
function chooseAlphabet(tdElement, alphabetElementID, awordElementID, graphicElementID) {
if (selectedWord) {
if (tdElement && !tdElement.style.visibility) { // non-selected alphabet table cell
var alphabet = tdElement.getElementsByTagName("span")[0].innerHTML
var wElem = document.getElementById(awordElementID)
var wTab = wElem.getElementsByTagName("table")[0] // expect 1 table
var correct = false
var done
for (var i=0; i<selectedWord[0].length; i++) {
if (selectedWord[0].charAt(i)==alphabet) {
wTab.rows[0].cells[i].innerHTML = selectedWord[0].charAt(i)
correct = true
done = isDone(wTab.rows[0])
if (done) {
break
}
}
}
tdElement.style.visibility = "hidden"
if (done) {
alert("You WIN!!!")
selectedWord = null
stopTimer()
}
else if (!correct) {
displayGraphic(graphicElementID)
if (isOver(graphicElementID)) {
alert("You LOSE! Try again...")
selectedWord = null
stopTimer()
}
}
}
}
else {
alert("Please start a new game first")
}
} // chooseAlphabet(HTMLObjectElement, string, string, string)
function isDone(trElement) {
var res = true
var str
for (var i=trElement.cells.length-1; i>=0; i--) {
str = trElement.cells[i].innerHTML.toString()
if (trElement.cells[i].innerHTML.toString()=="_") {
res = false
break
}
}
return res
} // isDone(HTMLObjectElement)
function isOver(graphicElementID) {
var dElem = document.getElementById(graphicElementID)
if (dElem) { // graphic element exists
var img = dElem.getElementsByTagName("div")[0]
var imgNum = parseInt(img.className.replace("img",""),10)
if (imgNum>=10) { return true } // last image is 10, so it is over
}
return false
} // isOver(string)
function stopTimer() {
if (timerID) {
window.clearTimeout(timerID)
timerID = null
}
}
</script>
</head>
<BODY>
<div style="width:100%;text-align:center;">
<table class="all_display">
<tr>
<td style="text-align:center">
<h2>Hangman!</h2><br>
<h3><span style="color:red">Topic:</span> Presidents of The United States</h3>
</td>
</tr><tr>
<td id="alphabet_disp">
<!-- all alphabets are displayed here -->
</td>
</tr><tr>
<td id="aword_disp" style="text-align:center">
<!-- a random word selected from WordList is here -->
</td>
</tr><tr>
<td style="text-align:center">
<input type="button" value="New Game"
onclick="startGame('alphabet_disp', 'aword_disp', 'hint_disp', 'timer_disp', 'graphic_disp')">
</td>
</tr>
</table>
<h3 style="color:green">Hint:</h3>
<div id="hint_disp"></div>
<br>
<div id="timer_disp"></div>
<div style="position:relative;width:100%;height:300px" id="graphic_disp">
<div class="img1" style="position:absolute;top:0px;margin-left:40%;width:100px;height:100px"></div>
</div>
</div>
<script type="text/javascript">
displayAlphabet("alphabet_disp", "aword_disp", "graphic_disp") // first display
</script>
</BODY>
</html>
phoenx 0 Light Poster
twiss 155 Veteran Poster
Why did you create three threads with nothing but a bunch of code and mark them all solved?
IIM 163 Master Poster
If you are displaying your code then add it in code snippets
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.