Hangman Help!

warganism

12-15-2010, 03:29 PM

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:

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

kansel

12-15-2010, 03:55 PM

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:
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:
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".

kansel

12-15-2010, 04:17 PM

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

Philip M

12-15-2010, 04:22 PM

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.