Textbased Hangman - JavaScript

Question

I have a non-marked brainstorming exercise to do which is related to a further marked coursework which will be similar but more complex. The task for the non-marked text-based Hangman is basically to create a JavaScript Hangman game that uses any of the four random words:

var words =["programming", "practical", "software", "development"];

The program should start by telling the user "Guess the word: _______ ; now the underscores represent the word to be guessed, which has to be one of the four above. The programm then asks the user to enter a letter, if it's right, the user will be told he still has 'ten go's' at the game and fills out one of the underscores. If not the user is told he is left with 9 go's and the underscores remain as they are.

I know how to ask the user for input - I am just really, really confused as to how to create the part of the programm where the 'Guess the word: _____-' is changed to "Guess the word: __I___" as for example.

What method do I have to use here? Any suggestions or generic examples would be really helpful! Thanks a ton!

Do you know what a string is, what a control structure is and what a function is? If so, you should be able to work out something yourself. — antonijn, Mar 18 '13 at 14:29
You have several means of output: `readonly` `input`, `span` `innerHTML`, ... — John Dvorak, Mar 18 '13 at 14:29

score 0 · Accepted Answer · answered Mar 18 '13 at 14:53

At school we did the same but then in C#, if I remeber it correctly we did something like this :

        //this part creates the number of stripes depending on your word.
        //this part also breaks up the complete word into an array.
        var word = "programming";
        var letters = word.length;
        var loose_letters = new Array();
        var stripes = new Array();

        for(i = 0; i <= letters; i++)
        {
           stripes[i] = "_";
           loose_letters[i] = word.substring(i, i+1);
        }

now make something like a textbox where user can fill in the letter with a button

<input type = "text" id = "letter" name = "letter" />
<input type = "button" onClick="checkLetter();" value = "OK" id= "btn_OK" />

the checkLetter function :

function checkLetter()
{
   letter = document.getElementById("letter").value;

   for(i = 0; i < letters; i++)
   {
     if(letter == loose_letters[i])
     {
        stripes[i] = letter;
     }
     var complete_string += stripes[i]
   }     
}

I hope this helps, don't forget to add complete_string to the place where you want your people to see the outcome.

Even though this is a valid answer, you have to understand that stack overflow is not for writing code for people, they have to do that themselves. To be fair, this is more of an issue with the question, but nevertheless, you should just send the asker on the right track, and provide little bits of code, rather than doing everything for the asker. — antonijn, Mar 18 '13 at 15:31
I'm sorry, still there's a lot missing to make the code functional, but I thought that I'd share my knowledge. — notknown7777, Mar 19 '13 at 07:31

score 0 · Answer 2 · answered Mar 18 '13 at 15:47

I'd use regular expressions.

var answer = "programmer";
var guessed = "aeiou";
var pattern = new RegExp("[^" + guessed + "]*", "gi");
var display = answer.replace(pattern, "_");

When they guess a letter, add it to guessed. You could use the length of guessed to see if they have turns left and display.indexOf("_") to see if they got the answer right.

Textbased Hangman - JavaScript

2 Answers2