stackoom
  简体   繁体   中英

Javascript: word game, loop through array

 原文  2017-05-11 16:40:38  3   2    javascript/ arrays/ loops/ if-statement

Question

I'm new to Javascript and I'm struggling to make something work.

I have a basic word game that is supposed to replace one character and the user has to guess that one. It works well (apart from obvious design errors, never mind these) if I specify ONE word only. However, I've spent all day to work through an array of words.

The user should see the (gapped) word, enter the missing character and should then be presented with the next gapped word until the array is finished.

This is the (fairly ok) code for the single word: 

<html>
<body>
<h1> Guess the word! :) </h1>

<br><br>

<div id="paste_game" style="left: 30%; top: 25%; border: 3px solid #73AD21; font-size: 350%; font-weight: bold; display: flex; align-items: center; justify-content: center">
</div>

<br>

<br> feedback:
<div id="feedback" style="top: 35%; font-size: 150%; font-weight: bold; background-color:powderblue; display: flex; align-items: center; justify-content: center">
... feedback ...
</div>

<br> number of attempts:
<div id="attempts" style="top: 35%; font-size: 150%; font-weight: bold; background-color:powderblue; display: flex; align-items: center; justify-content: center">
... attempts ...
</div>

<div id="guess_area" style="height: 10em; display: flex; align-items: center; justify-content: center">  
    <h2>ENTER THE MISSING CHARACTER:  </h2><br>
        <input type="text" id="guess"><br>
        <button onClick="guessChar()">GUESS!</button>
</div>

<script>
var testword = "straightforward";
var current_blank = getBlank(testword);
document.getElementById("paste_game").innerHTML = replaceChar(testword);
var count = 0;

function getBlank(word) {
    var numchars = word.length;
    var randomchar = Math.floor((Math.random() * numchars) + 1);
    var chosenchar = word.charAt(randomchar);
    return chosenchar;
}

function replaceChar(word) {
    var newWord = word.replace(current_blank, "[ ]");
    return newWord;
}

function guessChar() {
    var char = document.getElementById("guess").value;

    if (char == current_blank) {
        document.getElementById("feedback").innerHTML = "Correct, the missing blank is >>" + char +"<<";
        document.getElementById("paste_game").innerHTML = testword;
    }
    else if (char != current_blank) {
        if (count < 2) {
            document.getElementById("feedback").innerHTML = "Sorry, try again!";
            // reset only works with forms, form breaks code
            //document.getElementById("form").reset();
            count++;
            document.getElementById("attempts").innerHTML = count;
        }
        else {
            document.getElementById("feedback").innerHTML = "Sorry, you've tried too often!";
            count++;
            document.getElementById("attempts").innerHTML = count;
        }
    }
    else {
        alert("ERROR");
    }

}

</script>

</body>
</html>

This is the messed up code with an array (I stopped working on it in-between) 

<html>
<body>
<h1> Guess the word! :) </h1>

<div id="start_div" style="height: 40px; display: flex; align-items: center; justify-content: center">
        <button id="start_button" onClick="startGame()">START GAME!</button>
</div>

<div id="next_div" style="height: 60px; display: flex; align-items: center; justify-content: center">
        <button id="start_button" onClick="nextWord()">NEXT WORD!</button>
</div>

<div id="paste_game" style="left: 30%; top: 25%; border: 3px solid #73AD21; font-size: 350%; font-weight: bold; display: flex; align-items: center; justify-content: center">
</div>

<br>

<br> feedback:
<div id="feedback" style="top: 35%; font-size: 150%; font-weight: bold; background-color:powderblue; display: flex; align-items: center; justify-content: center">
... feedback ...
</div>

<br> number of attempts:
<div id="attempts" style="top: 35%; font-size: 150%; font-weight: bold; background-color:powderblue; display: flex; align-items: center; justify-content: center">
... attempts ...
</div>

<div id="guess_area" style="height: 10em; display: flex; align-items: center; justify-content: center">  
    <h2>ENTER THE MISSING CHARACTER:  </h2><br>
        <input type="text" id="guess"><br>
        <button onClick="guessChar()">GUESS!</button>
</div>

<script>
// define variables
//var guess_word = "straightforward";
var guessword_array = ['handy', 'lovely', 'annoying', 'superb']; 
var global_chosen_char;
var count = 0;
var game_started = false;

var game_word;
var guessed_char;
var current_word;
var loopy;

/**
for (var i = 0; i < guessword_array.length; i++) {
    array_current_position = guessword_array[i];
    console.log("Array currently at "+guessword_array[i]+", position: "+i);
    document.getElementById("paste_game").innerHTML = replaceChar(guessword_array[i]);
    }
**/

/**
var tempword = replaceChar(guessword_array[i]);
        document.getElementById("paste_game").innerHTML = tempword;
        **/

// FUNCTION: get random character from word (=1) and replace by [] (=2)
function replaceChar(word) {
    //1
    var numchars = word.length;
    var randompos = Math.floor((Math.random() * numchars) + 1);
    if (randompos == numchars) {
        randompos = 0;
    }
    //2
    var chosenchar = word.charAt(randompos);
    var newword = word.replace(chosenchar, "[]");

    global_chosen_char = chosenchar;
    global_newword = newword;
    return newword;
}

// FUNCTION: first time the game is started
function startGame() {

    if (guessed_char == undefined) {
        alert("Thank you for playing!\nPlease start guessing and enter your guess below!");
        current_word = guessword_array[0];
        game_word = replaceChar(guessword_array[0]);
        document.getElementById("paste_game").innerHTML = game_word;
        console.log(game_word);
        game_started = true;
        return;
    }
    else {
        alert("Sorry, an error has occurred!");
    }
}

function nextWord() {
    for (var i = 1; i < guessword_array.length; i++) {
        game_word = replaceChar(guessword_array[i]);
        console.log("nextword: "+game_word);
        wait(100);
        document.getElementById("paste_game").innerHTML = game_word;
        guessChar();
    }
}

function guessChar() {

    if (game_started != true) {
        startGame();
    }

    else if (game_started == true && guessed_char != "") {

        guessed_char = document.getElementById("guess").value;

        if (guessed_char == global_chosen_char) {
            document.getElementById("feedback").innerHTML = "Correct! ".fontcolor("green")+"The word is: "+""+current_word.fontcolor("red").fontsize(20);
            guessed_char = "";
            console.log("Guessed char:" +guessed_char);
            console.log("guessed righ");
        }

        else {
            if (count < 2) {
                document.getElementById("feedback").innerHTML = "Sorry, try again!".fontcolor("red");
                count++;
                document.getElementById("attempts").innerHTML = count;
            }
            else {
                document.getElementById("feedback").innerHTML = "Sorry, you've tried too often!";
                count++;
                document.getElementById("attempts").innerHTML = count;
                console.log("guessed wrong");
                guessed_char = "";
            }
        }
    }

    else if (game_started == true && guessed_char == "") {
        alert("Guess char is empty");
    }
}


</script>

Please help me, I've already lost so much time on this - thank you so much!!!

PS: I know that there are some other issues with my code, but please focus on the array thing for now - thank you ever so much!

2 answers

solution1
 1  2017-05-11 16:52:35

I modified it to use a list, also it uses an interval to switch to the next word.

The code could obviously use optimization, but I'm not going to go that far. 

<html>
<body>
<h1> Guess the word! :) </h1>

<br><br>

<div id="paste_game" style="left: 30%; top: 25%; border: 3px solid #73AD21; font-size: 350%; font-weight: bold; display: flex; align-items: center; justify-content: center">
</div>

<br>

<br> feedback:
<div id="feedback" style="top: 35%; font-size: 150%; font-weight: bold; background-color:powderblue; display: flex; align-items: center; justify-content: center">
... feedback ...
</div>

<br> number of attempts:
<div id="attempts" style="top: 35%; font-size: 150%; font-weight: bold; background-color:powderblue; display: flex; align-items: center; justify-content: center">
... attempts ...
</div>

<div id="guess_area" style="height: 10em; display: flex; align-items: center; justify-content: center">  
    <h2>ENTER THE MISSING CHARACTER:  </h2><br>
        <input type="text" id="guess"><br>
        <button onClick="guessChar()">GUESS!</button>
</div>

<script>
var words = ["straightforward", "testing"];
var currentWord = 0;

var current_blank = getBlank(words[currentWord]);
document.getElementById("paste_game").innerHTML = replaceChar(words[currentWord]);
var count = 0;

function getBlank(word) {
    var numchars = word.length;
    var randomchar = Math.floor((Math.random() * numchars) + 1);
    var chosenchar = word.charAt(randomchar);
    return chosenchar;
}

function replaceChar(word) {
    var newWord = word.replace(current_blank, "[ ]");
    return newWord;
}

function guessChar() {
    var char = document.getElementById("guess").value;

    if (char == current_blank) {
        document.getElementById("feedback").innerHTML = "Correct, the missing blank is >>" + char +"<<";
        document.getElementById("paste_game").innerHTML = words[currentWord];
        setTimeout(function(){
          currentWord++;
          current_blank = getBlank(words[currentWord]);
          document.getElementById("paste_game").innerHTML = replaceChar(words[currentWord]);
        }, 2000);
    }
    else if (char != current_blank) {
        if (count < 2) {
            document.getElementById("feedback").innerHTML = "Sorry, try again!";
            // reset only works with forms, form breaks code
            //document.getElementById("form").reset();
            count++;
            document.getElementById("attempts").innerHTML = count;
        }
        else {
            document.getElementById("feedback").innerHTML = "Sorry, you've tried too often!";
            count++;
            document.getElementById("attempts").innerHTML = count;
        }
    }
    else {
        alert("ERROR");
    }

}

</script>

</body>
</html>

solution2
 1  2017-05-11 16:56:06

You iterate over your array once and start all games at the same time. You may wait for the user to finish: 

var words=["hi","test","abc"];
var current=0;
function next_word(){
 current++;
 var word=words[current];
 ....
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I loop through an array of my answers and hints in my JavaScript word game? Javascript - How to loop through each word and push them to an empty array Loop through Javascript Array loop through a javascript array Javascript: loop through array Loop through an array in JavaScript How would I loop through an array in Javascript, add a word, then return an array (without using map)? Javascript loop through array asynchronous JavaScript: Iterate through array in for loop? loop through array in javascript for wixsite
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM