Hangman w/ timer

Question

phoenx 0 Light Poster

12 Years Ago

<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)==" ")? "&nbsp;" : "_"
      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 -->
  &nbsp;
  </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>

javascript

3 Contributors
2 Replies
265 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by IIM

Reply to this topic

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.

twiss 155 Veteran Poster · Answer 1 · 2011-06-27T12:00:54+00:00

Why did you create three threads with nothing but a bunch of code and mark them all solved?

IIM 163 Master Poster · Answer 2 · 2011-06-27T16:00:34+00:00

If you are displaying your code then add it in code snippets