...

View Full Version : Forms in JavaScript Game



MatrixClaw
12-07-2009, 06:34 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!

gusblake
12-07-2009, 07:01 PM
I'm sure I could help you, but I'm not a premium member of rapidshare. Is the code too big/complicated to post here?

MatrixClaw
12-07-2009, 07:02 PM
I'm sure I could help you, but I'm not a premium member of rapidshare. Is the code too big/complicated to post here?

Ah bummer, didn't even realize it was too large! Neither am I haha.

I'll try attaching it to the original post instead :thumbsup:

*edit* I guess the file is too big. I tried uploading it to a different site instead, hopefully this one works:

http://www.mediafire.com/?aot3wemzoza

gusblake
12-07-2009, 07:52 PM
form.elements['letterGuess'].value doesn't work because there is no textbox - if you use buttons you have to send the value with the onclick, ie



<input type="button" value="B" name="letterGuess" onClick="checkGuess(this.value)">


(buttons don't work like radio buttons)

Then to get the value in the checkGuess function, do this:



function checkGuess(letter) {
startPoint = eval(-1)
position = 0
found = false
//letter=document.forms[0].elements['letterGuess'].value don't need this anymore

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) {
guessWord()
}
}

MatrixClaw
12-07-2009, 10:03 PM
Ah ha!

I didn't even think about that. For some reason I was thinking buttons registered the same.


Now that I've done that, it looks like it registers the correct letters just fine, but it still doesn't place the used letters in the right boxes (it is placing them in the numbers instead? - If you continue to click the same letter over and over, it will keep replacing the buttons with the same letter until they're all replaced and then it finally starts putting them in the "Used Letters" section). It also doesn't place the letters in the boxes at the bottom still.

Any ideas? I'm sure there's some simple thing I'm missing, but I can't for the life of me find it. I'm only used to more simple coding, so troubleshooting on this large of a code is confusing me! haha

Here's what I've changed it to so far:



<!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>

MatrixClaw
12-08-2009, 03:18 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum