堆栈内存溢出
  繁体   English   中英

Javascript：文字游戏，遍历数组

[英]Javascript: word game, loop through array

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

问题描述

我是Java的新手，我正努力使某些工作正常。

我有一个基本的文字游戏，应该替换一个字符，并且用户必须猜测一个字符。 如果我仅指定一个字，则效果很好（除了明显的设计错误，别介意这些）。 但是，我花了一整天的时间来整理单词。

用户应看到（带空格的）单词，输入缺少的字符，然后应显示下一个带空格的单词，直到数组完成。

这是单个单词的（还可以）代码： 

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

这是一个带有数组的混乱代码（我停止了在它们之间的工作） 

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

请帮助我，我已经在此上浪费了很多时间-非常感谢！！！

PS：我知道我的代码还有其他问题，但是现在请专注于数组问题-非常感谢！

2 个解决方案

解决方案1
 1  2017-05-11 16:52:35

我将其修改为使用列表，还使用间隔切换到下一个单词。

该代码显然可以使用优化，但是我不会走得那么远。 

<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

您遍历数组一次并同时启动所有游戏。 您可以等待用户完成操作： 

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文字游戏中遍历一系列答案和提示？ Javascript - 如何遍历每个单词并将它们推送到一个空数组 遍历Javascript数组 遍历一个javascript数组 Javascript：遍历数组 循环遍历 JavaScript 中的一个数组 我将如何遍历 Javascript 中的数组，添加一个单词，然后返回一个数组（不使用 map）？ Javascript循环遍历数组异步 JavaScript：在 for 循环中遍历数组？ 循环遍历 javascript 中的数组以获取 wixsite
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM