Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Forms in JavaScript Game

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

    If anyone could take a look at my code and see if you can figure out what the deal is, that'd be awesome!
    Last edited by MatrixClaw; 12-07-2009 at 07:04 PM.

  • #2
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    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?

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by gusblake View Post
    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

    *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
    Last edited by MatrixClaw; 12-07-2009 at 07:05 PM.

  • #4
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    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

    Code:
    <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:

    Code:
    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()
    		}
    }

  • Users who have thanked gusblake for this post:

    MatrixClaw (12-08-2009)

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <!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>
    Last edited by MatrixClaw; 12-08-2009 at 04:09 AM.

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •