堆栈内存溢出
  简体   繁体   English

Javascript：文字游戏，遍历数组

[英]Javascript: word game, loop through array

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

问题描述

I'm new to Javascript and I'm struggling to make something work. 我是Java的新手，我正努力使某些工作正常。

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! PS：我知道我的代码还有其他问题，但是现在请专注于数组问题-非常感谢！

2 个解决方案

解决方案1
 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>

解决方案2
 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];
 ....
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在JavaScript文字游戏中遍历一系列答案和提示？ - How do I loop through an array of my answers and hints in my JavaScript word game? Javascript - 如何遍历每个单词并将它们推送到一个空数组 - Javascript - How to loop through each word and push them to an empty array 遍历Javascript数组 - Loop through Javascript Array 遍历一个javascript数组 - loop through a javascript array Javascript：遍历数组 - Javascript: loop through array 循环遍历 JavaScript 中的一个数组 - Loop through an array in JavaScript 我将如何遍历 Javascript 中的数组，添加一个单词，然后返回一个数组（不使用 map）？ - How would I loop through an array in Javascript, add a word, then return an array (without using map)? Javascript循环遍历数组异步 - Javascript loop through array asynchronous JavaScript：在 for 循环中遍历数组？ - JavaScript: Iterate through array in for loop? 循环遍历 javascript 中的数组以获取 wixsite - loop through array in javascript for wixsite
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM