堆棧內存溢出
  簡體   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