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 4 of 4

Thread: Hangman Help!

  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Location
    Netherlands
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hangman Help!

    Hey everyone!

    I'm new to coding and I've been working on a hangman game, but I got one problem I just can't figure out. I want to be able to insert feedback at the end of the game where I give the player the definition of the word they were guessing.

    Also I will gladly take any suggestions or commentary on my game.

    Heres my code so far:
    Code:
    <html>
    <head>
    <script>
    
    var canvas, ctx;
    var dc=0;//draw counter
    var it, dg, ds, swa;//input text, display guess div, display string
    
    sw = ["Netherlands","world","zombies","ashtray","mouse", "asperagus", "wooden", "energy", "arial", "horseshoe", "foundation", "majestic", "titties", "coffee", "postman", "perfect", "yellow", "onomatopoeia"];//secret word
    var sw = sw[Math.floor(Math.random()*sw.length)];
    		
    
    function init(){
    	canvas = document.getElementById("hungman");
    	ctx = canvas.getContext('2d');
    	ctx.lineWidth = 3;
    	it = document.getElementById("input_txt");
    	dg = document.getElementById("display_guess_div");
    	displayGuess("-");
    	
    }
    
    function drawStuff(){
    	ctx.beginPath();
    	dc++;
    	switch(dc){
    		case 1:
    			gallows1();
    			break;
    		case 2:
    			gallows2();
    			break;
    		case 3:
    			gallows3();
    			break;
    		case 4:
    			gallows4();
    			break;
    		case 5:
    			drawHead();
    			break;
    		case 6:
    			drawBody();
    			break;
    		case 7:
    			drawLeftArm();
    			break;
    		case 8:
    			drawRightArm();
    			break;
    		case 9:
    			drawLeftLeg();
    			break;
    		case 10:
    			drawRightLeg();
    			break;	
    	}
    	ctx.stroke();
    }
    
    function drawHead(){
    	//draw head
    	ctx.arc(150,175,50,0,Math.PI*2, true);//outer circle
    	ctx.moveTo(115,175);
    	ctx.arc(150,175,35,0, Math.PI, false);//mouth
    	ctx.moveTo(135,155);
    	ctx.arc(130,155,5,0,Math.PI*2,true);//left eye 
    	ctx.moveTo(175,155)
    	ctx.arc(170,155,5,0,Math.PI*2,true);//right eye
    }
    
    function drawBody(){
    	//draw body
    	ctx.moveTo(150,225);
    	ctx.lineTo(150, 320);
    }
    
    function drawLeftArm(){
    	//draw left arm
    	ctx.moveTo(150,250);
    	ctx.lineTo(50,200);
    }
    
    function drawRightArm(){
    	//draw right arm
    	ctx.moveTo(150,250);
    	ctx.lineTo(250,200);
    }
    
    function drawLeftLeg(){
    	//draw left leg
    	ctx.moveTo(150,300);
    	ctx.lineTo(100,450);
    }
    
    function drawRightLeg(){
    	//draw right leg
    	ctx.moveTo(150,300);
    	ctx.lineTo(200,450);
    }
    
    function gallows1(){
    	//draw gallow1
    	ctx.moveTo(20,20);
    	ctx.lineTo(20,500);
    }
    
    function gallows2(){
    	//draw gallow2
    	ctx.moveTo(20,20);
    	ctx.lineTo(150,20);
    }
    
    function gallows3(){
    	//draw gallow3
    	ctx.moveTo(20,80);
    	ctx.lineTo(80,20);
    }
    
    function gallows4(){
    	//draw gallow4 - rope
    	ctx.moveTo(150,20);
    	ctx.lineTo(150,125);
    }
    
    
    function checkLetter(){
    	var len = it.value.length-1;
    	var guess = it.value.charAt(len);
    	
    	
    	if(sw.indexOf(guess)==-1){
    		drawStuff();
    		if (dc>=10){
    			alert("bad luck, you're hung! The word was " + sw + ".");
    			playAgain();
    		}
    	}else{
    		displayGuess(guess)
    		if(ds.indexOf("-")==-1){
    			alert("You win! The word was " + sw + "!");
    			playAgain();
    			
    		}
    	}
    }
    
    function displayGuess(guess){
    	//first time
    	if(guess == "-"){
    		ds = "";
    		for(i=0; i<sw.length; i++){
    			ds+="-";
    		}
    	}else{
    	//display a correct letter
    		var newds ="";
    		for(i=0; i<sw.length; i++){
    			if(sw.charAt(i)==guess){
    				newds +=guess;	
    			}else{
    				newds +=ds.charAt(i);	
    			}
    		}
    		ds = newds;
    	}
    	dg.innerHTML= ds;
    
    }
    
    function playAgain() //Copyright Joey
    {
    var r=confirm("Play Again?");
    if (r==true)
      {
      window.location.reload();
      }
    else
      {
      alert("Thanks For Playing!");
      window.close();
      }
    }
    function changeWord() {
    	var r=confirm("Change word?");
    	if (r==true)
    	{
    		window.location.reload();
    	}
    }
    
    function clear() {
    		document.text_form.input_text.value="";
    		return true;	
    }
    
    	
    //function numberCheck()
    //{
    //	if ( isNaN ( it ) || it != ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz )
    // {
    // 	alert("Please Insert a Letter") ;
    // return;
    // }
    //}
    
    </script>
     
     <style type="text/css">
     canvas{border:1px solid black}
      </style> 
     
     </head>
     
     <body onLoad="init()">
     <center>
     <h1>Hangman</h1>
     <p>Guess The Word or !</p> 
     <canvas id="hungman" width="300px" height="600px"> </canvas><br/>
     <div id="input">
     <div id="display_guess_div">display guessed letters here</div><br/> 
     <input type="text" id="input_txt" maxlength="1" size="19"> </input> <br>
     <input type="button" value="Guess" onClick="checkLetter()" onSubmit="clear()"></input>
     <input type="button" value="Change Word" onClick="changeWord()"></input>
     </div>
    </center>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    To me the logical place to store the definitions would be with the words. Either as two-dim array or objects.

    Two-dimensional array example:
    Code:
    sw = [
      ["Netherlands", "dfn of Netherlands"],
      ["world", "the whole dang planet Earth"],
      ["zombies", "dead rising"],
      ["ashtray", "full of butts"],
      ["mouse", "mammal or peripheral?"],
      ["asperagus", "not something I would eat"],
      ["wooden", "former trees"],
      ["energy", "best go to websters for this one"],
      ["arial", "a font face"],
      ["horseshoe", "equine hoofwear"],
      ["foundation", "a really long book"],
      ["majestic", "hope you get the idea now"],
      ["titties", "hey, this is a family-friendly forum"],
      ["coffee", "black water"],
      ["postman", "costner's greatest role"],
      ["perfect", "see postman (jk)"],
      ["yellow", "what it was called"],
      ["onomatopoeia","bzzzzzzz"]];//secret word
    Then access is as sw[2][0] == "zombies" or sw[2][1] == "dead rising".

    Objects example:
    Code:
    sw = [
      {word:"Netherlands", dfn:"dfn of Netherlands"},
      {word:"world", dfn:"the whole dang planet Earth"},
      {word:"zombies", dfn:"dead rising"},
      {word:"ashtray", dfn:"full of butts"},
      {word:"mouse", dfn:"mammal or peripheral?"},
      {word:"asperagus", dfn:"not something I would eat"},
      {word:"wooden", dfn:"former trees"},
      {word:"energy", dfn:"best go to websters for this one"},
      {word:"arial", dfn:"a font face"},
      {word:"horseshoe", dfn:"equine hoofwear"},
      {word:"foundation", dfn:"a really long book"},
      {word:"majestic", dfn:"hope you get the idea now"},
      {word:"titties", dfn:"hey, this is a family-friendly forum"},
      {word:"coffee", dfn:"black water"},
      {word:"postman", dfn:"costner's greatest role"},
      {word:"perfect", dfn:"see postman (jk)"},
      {word:"yellow", dfn:"what it was called"},
      {word:"onomatopoeia", dfn:"bzzzzzzz"}];//secret word
    Access objects as sw[2].word == "zombies" and sw[2].dfn == "dead rising".
    Last edited by kansel; 12-15-2010 at 03:57 PM.

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    I just played your game. It's pretty neat. (I'd move the leg segments down a bit to the end of the body segment.)

    In order to use the techniques I posted above, you'd need to change the way the game grabs a random word. My suggestion is to assign the randomized index to a new variable and use that to look up the word/definition in the sw arrray. By not overwriting the sw array you could make 'play again' work without having to reload the page.

    var rnd = Math.floor(Math.random() * sw.length);

    You could then assign the specific chosen word & dfn to temp vars to avoid all the array/object lookup during the letter checking functions.

    var word = sw[rnd][0] // or sw[rnd].word;
    var dfn = sw[rnd][1] // or sw[rnd].dfn;

    On a gameplay note, I would recommend forcing either upper- or lower-case on player input for comparison w/ the words. The first word I got was Netherlands and it saw 'n' and 'N' as two separate letters. I would've been a dead man if I hadn't just looked at the word list. If all your words are stored as upper-case then force the player input to upper-case.

    var guess = it.value.charAt(len).toUpperCase();

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,151
    Thanks
    203
    Thanked 2,548 Times in 2,526 Posts
    The big problem with any kind of JavaScript quiz or game is that the user can see the answers simply with View Source. You can slightly mitigate this by placing your script is an external js. file which is less obvious.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.


  •  

    Posting Permissions

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