个人中心
gpt4 book ai didi

JavaScript 刽子手游戏；仅显示错误的猜测，当用户获胜时发出警报

转载 作者：行者123 更新时间：2023-11-28 04:26:38 25 4
gpt4 key购买 nike

我正在尝试使用 HTML、CSS、JS 创建一个基本的 Hangman 类型游戏。到目前为止，我已经成功地从单词数组中创建一个随机单词，使用“_”将所有未猜到的字母显示到屏幕上，并通过用户按键填写正确的猜测。
我无法弄清楚如何:- 当用户正确猜出单词时显示警报。-仅检测并显示错误的用户猜测(现在显示所有按键)任何建议将不胜感激，谢谢!

- JS 代码:

   var composers =["bach","mozart","beethoven","debussy","stravinsky"];
var randomComposer = composers[Math.floor(Math.random() * 
composers.length)];
var guessComposer = [];

    for (var i=0; i<randomComposer.length; i++){
    guessComposer[i] = "-";
    }
    var el = document.getElementById('guessword');
        el.innerHTML=guessComposer.join(" ");


var wrongGuesses = [];
// var eleme = document.getElementById('wrong');
//      eleme.innerHTML=wrongGuesses;

var guessesLeft = 15;
var ele = document.getElementById('remaining');
        ele.innerHTML=guessesLeft;

var wins = 0;
var elem = document.getElementById('numwins');
        elem.innerHTML=wins;

document.onkeyup = function(event) {

    var userGuess = event.key;

    // el.innerHTML=guessComposer.join(" ");


    for(var j=0; j<randomComposer.length; j++){

        if(randomComposer[j]===userGuess){
            guessComposer[j]=userGuess;
            }
    }

    if (userGuess !== randomComposer[j]){
            wrongGuesses.push(userGuess);
            guessesLeft --;
            var wg = document.getElementById('wrong');
            wg.innerHTML=wrongGuesses;
        }


        if(guessComposer == randomComposer){
            alert("Congratulations, You Won!");
            wins++;
        }

        if(guessesLeft===0){
            alert("You lost, study more music...");
        }

        var el = document.getElementById('guessword');
        el.innerHTML=guessComposer.join(" ");

        var ele = document.getElementById('remaining');
        ele.innerHTML=guessesLeft;

        console.log(randomComposer.length);
}

HTML 代码

<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>Famous Classical Composers Hangman Game</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>

<div class="header">
    <h1>Famous Classical Composers Hangman Game</h1>
    <h3>Press any key to start</h3>
</div>

<div class="wordguess" id="guessword">
</div>

<div class="wrong_guesses">
Wrong Guesses: <span id="wrong">
</span></div>

<div class="guesses_left" > Guesses Remaining: <span id="remaining">
</span>     
</div>

<div class="wins">Number of Wins: <span id="numwins"></span>
</div>




<script type="text/javascript" src="assets/javascript/game.js">
</script>
</body>
</html>

最佳答案

对于您的胜利检查代码，您正在比较数组，就好像它们是字符串或整数一样，但您不能这样做:

if(guessComposer == randomComposer){

相反，您可以使用 every 函数来测试每个数组元素的条件，这也使您的测试相对简单并接近原来的情况:

if (guessComposer.every((v,i)=>v === randomComposer[i]) ) {

这会测试 guessComposer 数组中的每个 v 值 是否与 randomComposer 数组中特定位置的相应项目匹配。

至于显示错误的猜测，您只需在警报中将数组显示为字符串即可。为此，您可以使用 join 函数:

if (guessesLeft === 0) {
   alert("You lost, study more music...\nWrong guesses:" + wrongGuesses.join(' '));
}

join 将字符串中每个元素之间想要的字符作为参数，我将其设置为空格 ' '。

或者换句话说，您可以将其理解为:将所有元素放入一个字符串中，并用空格分隔。

此外，检查猜测的字母是否错误也不正确:

if (userGuess !== randomComposer[j]){

它检查userGuess是否与当前所选 Composer 的最后一个字母匹配。相反，您希望将任何现有字母与 indexOf 匹配:

if (randomComposer.indexOf(userGuess) == -1) {

关于JavaScript 刽子手游戏；仅显示错误的猜测，当用户获胜时发出警报，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45002032/

25 4 0
文章推荐： javascript - Blogger:仅在特定作者的帖子中显示小部件
文章推荐： c++ - 无法在 Qt 中调用 PaintEvent (C++)
文章推荐： css - Qlik Sense Mashup 问题 - 进行选择时列表框工具栏不显示
文章推荐： html - 可以删除 HTML 文件中的以下行吗？
行者123
个人简介

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

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