javascript - 如何处理javascript刽子手游戏中的重复字母-6ren

javascript - 如何处理javascript刽子手游戏中的重复字母

转载作者：太空宇宙更新时间：2023-11-04 13:02:53

我是 html、css 和 javascript 的初学者，我正在使用它们创建这个 hangman 游戏，它适用于每个字母只有一个实例的单词，但当一个字母在同一个字母中重复出现时，它似乎会遇到问题单词。我创建了一个函数来检查单词中每个字母的实例，但我不知道如何使用它，以便在单词中出现重复的字母时同时显示它们。任何帮助，将不胜感激。谢谢!

这是我的代码:

HTML:

<body>
  <div id="container">
    <div id="hangman">
      <div id="stand"></div>
      <div id="face"></div>
      <div id="body"></div>
      <div id="left-arm"></div>
      <div id="right-arm"></div>
      <div id="left-leg"></div>
      <div id="right-leg"></div>

    </div>
    <div id="alphabet">

    </div>
      <div id="gameOver"><p>Game Over!<br>PS: I am not "actually" being hanged</p>
        </div>
    <div id="beingGuessedWord"></div>



  </div>

</body>

CSS:

#container {
  height:450px;
  width:600px;
  border:2px solid grey;
  border-radius:5px;
  background-color:hsla(115, 100%, 16%, 1);
  position:relative;  

}

#stand {

  background-image:url('http://i59.tinypic.com/sbll48.png');
  height:220px;
  width:200px;

 }

#face {
  background-image:url('http://i59.tinypic.com/6dx0ee.png');
  height:60px;
  width:60px;
  position:relative;
  top:-175px;
  left:155px;
  visibility:hidden;  



}

#body {
background-image:url('http://i61.tinypic.com/27ywcg.png');
  background-repeat: no-repeat;
  position:relative;
  height:50px;
  top:-175px;
  left:155px;
  visibility:hidden;  

}

#left-arm {
  background-image:url('http://i58.tinypic.com/2evvvac.png');
  background-repeat: no-repeat;
  position:relative;
  height:70px;
  width:40px;
  top:-240px;
  left:150px;
  visibility:hidden;  


}

#right-arm{
  background-image:url('http://i58.tinypic.com/vfuhyp.png');
  background-repeat: no-repeat;
  position:relative;
  height:70px;
  width:40px;
  top:-300px;
  left:190px;
   visibility:hidden;  

}

#left-leg{
  background-image:url('http://i57.tinypic.com/t4u5na.png');
  background-repeat: no-repeat;
  position:relative;
  height:60px;
  width:60px;
  top:-335px;
  left:135px;
  visibility:hidden;  

}

#right-leg{
  background-image:url('http://i61.tinypic.com/2dqplzb.png');
  background-repeat: no-repeat;
  position:relative;
  height:50px;
  width:60px;
  top:-385px;
  left:180px;
  visibility:hidden; 

}

#alphabet {
  height:100px;
  width:250px;
  position:relative;
  top:-450px;
  left:300px;
  text-align:center;

}

#alphabet a {
  font-size:20px;
  text-decoration:none;
  margin:5px;
  font-family: 'Crafty Girls', cursive;
  font-weight:bold;
  color:grey;

}

#beingGuessedWord {
  height:70px;
  width:300px;
  position:relative;
  top:-500px;
  left:80px;
  padding-top:50px;

}

.letterp {
  border:2px solid black;
  font-family:"Crafty Girls", cursive;
  font-size:20px;
  margin:10px;
  font-weight:bold;
  padding:5px;
  border-radius:5px;


}

#dash {
  padding:5px;
  margin:5px;
  font-weight:bold;
  font-family:serif;

}

#gameOver {
 border:3px solid grey;

 font-family:'Crafty Girls', cursive;
 font-size:15px;
 font-weight:bold;
 position:relative;
 top:-670px;
 left:300px;
 height:70px;
 width:280px;   
 border-radius:5px;
 text-align:center;   
 visibility:hidden;      

}

JavaScript:

var totalIncorrectClicks = 0;//Global variable



var clickLetter = function() {


 var clickedLetter = document.getElementById(this.id); 
  var tempWord = localStorage["wordGuess"];
  /////////////
  var word = new String();
  for (var k=0; k<tempWord.length;k++)
    {
      if (k%2 ==0 )
        {
          word = word + tempWord[k];

        }
    }



    var compareSuccess = false;
    for (var i = 0; i < word.length; i++) {

      if (word[i] == clickedLetter.innerHTML) 
      {

          var pId = "pid" + (i+1);


          var pNode = document.getElementById(pId);
          pNode.style.visibility = "visible";
          compareSuccess = true;

      }

    }

    if (compareSuccess == false)
    {
        totalIncorrectClicks++;
    }

    if (compareSuccess == false && totalIncorrectClicks <=7)
    {
        if (totalIncorrectClicks == 1)
        {
        var face = document.getElementById('face');
        face.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 2)
        {
        var body = document.getElementById('body');
        body.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 3)
        {
        var leftArm = document.getElementById('left-arm');
        leftArm.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 4)
        {
        var rightArm = document.getElementById('right-arm');
        rightArm.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 5)
        {
        var leftLeg = document.getElementById('left-leg');
        leftLeg.style.visibility = "visible";
        }

         if (totalIncorrectClicks == 6)
        {
        var rightLeg = document.getElementById('right-leg');
        rightLeg.style.visibility = "visible";
        }

        if (totalIncorrectClicks == 7)
        {
            var gameOver = document.getElementById('gameOver');
            gameOver.style.visibility = "visible";
        }
    }


}
////////////////

var checkLetterInstance = function(word, letter) {
  var instance = 0;
  for (var i = 0; i < word.length; i++)
    {
      if (word[i] == letter)
        {
          instance++;
        }
    }
  return instance;

}


/////////////////
var createAlphabets = function () {
  var alphabets = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

for (var i = 0; i < alphabets.length; i++)
  {
    var anchorNode = document.createElement('a');
    var idanch = "id" + (i+1);


    anchorNode.setAttribute('id', idanch);


    anchorNode.innerHTML = alphabets[i];

    anchorNode.setAttribute('href', "#");


    var alphaDiv = document.getElementById('alphabet')

    alphaDiv.appendChild(anchorNode);

    if (i == 11 || i == 22)
      {
        alphaDiv.innerHTML = alphaDiv.innerHTML + "<br>"

      }


  }
}

var selectWord = function() {

  var wordArray = ["air", "clouds", "sun"];
  var randomWord = wordArray[Math.floor(Math.random() * wordArray.length)];
  var splitRandomWord = randomWord.split('');

  return splitRandomWord;

}


var displayWord  = function(word) {


  for (var i = 0; i < word.length; i++) {


    var dispWordDiv = document.getElementById('beingGuessedWord');


    var pNode = document.createElement('p');

    pNode.innerHTML = word[i];
    var id = "pid" + (i+1);

    pNode.setAttribute('id', id);
    pNode.setAttribute('class', "letterp");  
      pNode.style.visibility = "hidden";
      pNode.style.display = "inline-block";

    dispWordDiv.appendChild(pNode);

  }

  var dispWordDiv  = document.getElementById('beingGuessedWord');
  dispWordDiv.innerHTML = dispWordDiv.innerHTML + "<br>"; 

  for (var i = 0; i < word.length; i++) {
      var dispWordDiv  = document.getElementById('beingGuessedWord');
      var empty = document.createElement('p');
      empty.setAttribute('id', 'dash');
      empty.innerHTML = "___";
      empty.style.display = "inline";



    dispWordDiv.appendChild(empty);
  }
  }

  var word = selectWord();
  createAlphabets();
  displayWord(word);
  for (var i = 0; i < 27 ; i++) {
  var id = "id" + ( i + 1 );
  var anchor  = document.getElementById(id);
  localStorage["wordGuess"] = word; 

  anchor.onclick = clickLetter;
}

我在代码中有这些功能:

createAlphabets()，列出要选择的字母网格。
选择单词的 selectWord() 函数。
displayWord() 函数创建 p 个元素，这些元素包含上述所选单词的字母，并将其显示属性设置为“无”。
clickLetter() 函数，当点击任何一个字母时调用，并将该字母与所选单词中的字母进行比较
checkLetterInstance() 函数检查单词中每个字母的实例

JFiddle 链接:http://jsfiddle.net/h_i_r_a/5rtwed1d/14/

最佳答案

你可以试试remove your letter with jquery

否则你可以在你的函数中添加这段代码:

clickedLetter.style.display = "none";

更新:等等，我以为你问的是如何在点击后隐藏点击的字母……至于显示字母，你的代码应该做到这一点。不用担心这些字母会同时“出现”。

关于javascript - 如何处理javascript刽子手游戏中的重复字母，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25336880/

文章推荐： java - Camel 路由 - 用 HTTP 负载替换消息正文中的 DTO

文章推荐： c++ - 使用 CPPREST-SDK 将 std::vector 转换为 JSON

文章推荐： c++ - 使用 C++ 实现事件日志

文章推荐： html - CSS 显示 : table-row set height

java - 为什么这段代码不起作用？刽子手
我正在制作刽子手游戏。一切正常，我已经准备好用于使游戏失败并为猜测提供 -1 的代码。虽然将它添加到 else 语句时它会重复等于单词的长度并且它也会给出一个猜测——即使它是正确的？我看不出代码有什么
javascript - 刽子手 - 不会显示正确的破折号数量
我是一名 Javascript 学生，正在开发我的 Hangman 游戏。我用于显示 secret 单词的正确破折号数量的循环不起作用。每次只显示一个破折号。感谢帮助。谢谢。 $(document).
c - 刽子手 : beginner in C
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码以重现它。参见 SSC
适合初学者的 Python 3 刽子手
print("Welcome to hangman. Are you ready to have some fun?") def play(): import random List = ["ra
java - 基本 Java 刽子手
我刚刚开始学习 Java 作为我的第一门编程语言。在类里面，我们被分配使用 while 和 for 循环制作一个基本的 Hangman 游戏。到目前为止我有什么当用户输入第一个猜测时，它确实识别
python - 刽子手 |使用名字和姓氏作为 "word"的问题
我是编程新手。我正在做一个经典的刽子手游戏，但我希望它是从节目中猜测一些角色的名字(名字和姓氏)。我的问题:破折号打印 name 和 surname 之间的空格而不是忽略它，例如: 密语:鲁伯特·吉
Java 刽子手。如何创建多个按钮和 Action 监听器？
我正在尝试创建一个刽子手游戏，其中每个字母都有一个按钮。我用绝对定位和多个 Action 监听器以困难的方式做到了这一点。有什么办法可以用 for 循环同时完成这两个任务吗？另外，如何使用多态数组实
java - 刽子手 : Remember Previous Guesses
我是 Java 新手，所以这听起来可能很傻。我正在尝试从 Java 创建一个基于 GUI 的刽子手游戏。我已经从数组创建了按钮列表，单击时它返回单个字母作为字符。我有要猜测的单词列表，每次按下按钮时
python - 刽子手 : replacing an * with player input guess
我已经研究这段代码有一段时间了。我尝试了许多不同的方法来查找玩家在随机生成的单词中正确猜测的输入的索引 - 我认为我当前编写的内容应该有效，但我担心我忽略了一个非常简单的错误。事实上，每当我运行代码时
java - 刽子手 : if correct button clicked application hangs
在我的 Hangman 应用程序中，我为用户创建了一组按钮，然后从文件中随机选择 Hangman 应用程序中猜测的单词...该单词使用 JLabel 打印...但是一旦单击按钮时，应用程序会卡住。谁能
c - 刽子手 : ending the game if player guesses all letters
我正在为我的 C 课编程编写一个刽子手程序。我似乎不知道如何执行最后一步，即在玩家猜出所有正确的字母后停止游戏。我感觉问题出在播放功能上。 #include #include #inc
python - 刽子手 : File I/O strings and lists python
用 python 编写一个 Hangman 程序，在传入一个包含多单词字符串和单单词字符串的文件时遇到了一个问题。文件: 你好棕色狐狸狗猫水跳跃 #initialize list wordL
Javascript 刽子手 : trouble with replacing blanks with correct letters
所以我在玩这个游戏的特定部分时遇到了问题。这些是我的初始变量: var words = ["sugar","banana","hulk"]; var guessLeft = 12; var wrong

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何处理javascript刽子手游戏中的重复字母