PDA

View Full Version : Forms in JavaScript Game



MatrixClaw
07 Dec 2009, 12:43 PM
Hello, this is my first post here, but I'm having some trouble figuring out what I messed up on my code :(

I'm making a Javascript game of Hangman for one of my classes and I originally had the input as a text box where you physically type in the letter and if it was wrong, it would draw the next sequence of the hangman picture and place the letter in another text box as a "Used Letters," or if you're right, it would place the letter you chose in the box for the word you're guessing. However, I decided that instead of doing that, I wanted to make it more visually appealing and add buttons with the letters on them instead. As you can see in the code which is down-loadable here (http://www.mediafire.com/?aot3wemzoza) (the one with the _2 is the one I'm currently using, but the original is supplied as well), the buttons register for the picture changing, but do not register for the "Used Letters" field or for filling in the actual word. One of the button's values is also replaced by "undefined" after each click of another button and I'm not really sure why :confused:

If anyone could take a look at my code and see if you can figure out what the deal is, that'd be awesome!

MatrixClaw
07 Dec 2009, 10:15 PM
The letter selections seem to work now with a little troubleshooting, though it still doesn't register anything in the text boxes I've made. Instead of saying "Undefined" now, it just duplicates whatever button I press by replacing another one with that letter. I'm sure it's something easy I'm not seeing, but I can't figure out where I went wrong here!



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Derek Dinsmore's Hangman Game - GIT215</title>

<script src="words.js">
</script>

<script>

wordNo = Math.round(Math.random() * (Array1.length-1))
imageNo = 2
word = new String(Array1[wordNo])

tries = 0

usedLetters = new Array()
letterPosition = word.length + 2

guess = ""

function checkGuess(letter) {
startPoint = eval(-1)
position = 0
found = false

document.forms[0].elements[letterPosition].value = letter
letterPosition++


while (position != -1) {
position = word.indexOf (letter, startPoint + 1)
if (position!=-1) {
found = true;
document.forms[0].elements[position].value = letter;
startPoint = position;
}
}

tries++
if (!found) {
document.images[0].src = "Images/hangman" + imageNo + ".png"
imageNo++
if (imageNo >= 12)
lose()
}

guess = ""
for (i=0; i< word.length; i++) {
guess = guess + document.forms[0].elements[i].value
}
if(guess.length == word.length) {
win()
}
}

function lose() {
alert ("You're Dead! The word was " + word)
window.document.location = "hangman_2.html"
}


function win() {

word = word.toUpperCase()
guess = guess.toUpperCase()

if (word == guess) {
alert("Good Job! You've saved your life... this time.")
window.document.location = "hangman_2.html"
}
}



</script>

<style type="text/css">
body {background-color: #1087d9;}
body {color: #000}
</style>

</head>

<body>
<hr />
<hr />
<hr />
<hr />

<form>
<table align="left" background="Images/background.png" width="600" height="600" border="0" cellspacing="30" cellpadding="0">
<tr>
<td align="center" rowspan="2" height="350" width="255">
<img src="Images/hangman1.png" />
</td>
<td height="160" width="255" align="center">
<input type="button" value="A" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="B" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="C" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="D" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="E" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="F" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="G" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="H" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="I" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="J" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="K" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="L" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="M" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="N" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="O" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="P" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="Q" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="R" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="S" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="T" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="U" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="V" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="W" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="X" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="Y" name="letterGuess" onClick="checkGuess(this.value)">
<input type="button" value="Z" name="letterGuess" onClick="checkGuess(this.value)">
</td>
</tr>
<tr>
<td height="160" width="255" align="center">
<h3>Letters Guessed:</h3>
<p>
<script>
for (i=0; i<28; i++) {
document.write("<input type=text size=1>")
}
</script>
</p>
</td>
</tr>
<tr>
<td colspan="2" height="160" width="540" align="center">
<script>
for (i=0; i<word.length; i++) {
document.write("<input type=text size=5 maxlength=1 value=''>")
}
</script>
</td>
</tr>
</table>
</form>

<table align="center" width="600" border="0" cellspacing="30" cellpadding="0">
<tr>
<td>
<p><b>Hello and welcome to Derek's Javascript Hangman!</b></p>
<p>This app was designed using tutorials and examples from various websites which are listed in the javascript code section.
It was created soley in Adobe Dreamweaver, using Adobe Photoshop for the graphics. Now let's get onto it, here's how to play:</p>
</td>
<tr>
<td>
<h3 align="center">Instructions:</h3>
<p>In the bottom window is displayed the number of letters in your word and your progress.</p>
<p>Using the letters shown in the top right box, click the one one which you'd like to guess.</p>
<p>As you click a letter, it will be added to the "Letters Guessed" window.</p>
<p>You will not be penalized for selecting the same letter twice. </p>
<p>You have ten (10) tries before you are "hung."</p>
<ul>
<li>The category is musical instruments, only one word will be used.</li>
</ul>
<p>Good Luck!</p></td>
</tr>
</table>

<hr />
<hr />
<hr />
<hr />

</body>
</html>


Here's a link to the original code and the new code that I'm trying to get to work:

http://www.public.asu.edu/~ddinsmor/hangman.html
http://www.public.asu.edu/~ddinsmor/hangman_2.html