个人中心
gpt4 book ai didi

Javascript:文字游戏，循环数组

转载 作者：行者123 更新时间：2023-12-01 03:40:30 30 4
gpt4 key购买 nike

我是 Javascript 新手，我正在努力让一些东西发挥作用。

我有一个基本的文字游戏，应该替换一个 Angular 色，用户必须猜测那个 Angular 色。如果我只指定一个单词，它效果很好(除了明显的设计错误，不用介意这些)。然而，我花了一整天的时间来处理一系列单词。

用户应该看到(空白的)单词，输入缺少的字符，然后应该显示下一个空白的单词，直到数组完成。

这是单个单词的(相当不错)代码:

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

请帮助我，我已经在这方面浪费了很多时间 - 非常感谢!!!

P.S.:我知道我的代码还存在一些其他问题，但现在请关注数组问题 - 非常感谢!

最佳答案

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

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

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

关于Javascript:文字游戏，循环数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43921238/

30 4 0
文章推荐： javascript - window 和 top javascript 全局变量有什么区别？
文章推荐： javascript - 为什么 AngularJS ng-model 返回 [object%20Object] 作为值而不是选项值(整数)？
文章推荐： javascript - JS根据属性删除重复的div
文章推荐： jquery - 为什么 jQuery 的 height() 会自动将值向上舍入？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com