个人中心
gpt4 book ai didi

javascript - 隐藏的 p 元素不会在刽子手游戏中保持固定

转载 作者：太空宇宙 更新时间：2023-11-03 21:38:11 24 4
gpt4 key购买 nike

我是 javascript、css 和 html 的初学者。我正在使用这三种语言创建一个简单的刽子手游戏。我遇到的问题是，当我开始转向内联 p 标签(包含单词的组成字母)的显示属性时，这些字母不会保持它们的位置。例如，如果正在猜测单词“clouds”并且猜对了 c 和 o 字母，则结果显示为“c o _ _ _ _”而不是“c _ o _ _ s”。当最后一个字母被猜对时，这个词会正常出现，但不会像以前那样出现。如果我无法显示尚未选择的字母的正确位置，但我似乎无法弄清楚问题所在，那么这种做法就失去了刽子手的意义。我的代码流程是这样的。我有四个功能:

  1. createAlphabets()，列出要选择的字母网格。

  2. 选择单词的 selectWord() 函数。

  3. displayWord() 函数创建 p 个元素，这些元素包含上述所选单词的字母，并将其显示属性设置为“无”。

  4. clickLetter() 函数，当任意字母被点击时调用，并将该字母与所选单词中的字母进行比较，并将包含该字母的 p 元素的显示属性设置为 "排队”。

这是我的代码:

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>

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 word = clickedLetter.getAttribute("data-word");


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

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

          var pId = "id" + word[i];

          var pNode = document.getElementById(pId);
          pNode.style.display = "inline";
          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 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 = "id" + word[i];
    pNode.setAttribute('id', id);
    pNode.setAttribute('class', "letterp");  
      pNode.style.display = "none";

    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);
  anchor.setAttribute('data-word', word);    
  anchor.onclick = clickLetter;
}

http://jsfiddle.net/h_i_r_a/5rtwed1d/9/

谢谢!

最佳答案

问题出在你的方式上。您将 p 的样式设置为 'display:none' 以使其不可见。您应该改用“visibility:hidden”。如果你让它不显示，那么它就会表现得好像它不存在一样。但是如果你使用 visibility 属性，它会表现得像它存在但不可见

http://jsfiddle.net/5rtwed1d/11/ 

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

      var pId = "id" + word[i];

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

  }

关于javascript - 隐藏的 p 元素不会在刽子手游戏中保持固定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25327243/

24 4 0
文章推荐： css - 在 ngClass 中使用范围变量和动态 css
文章推荐： c# - 从 IIS .Net 应用程序访问网络共享
文章推荐： c# - 页面加载前 "A potentially dangerous Request.Form value was detected from the client"
文章推荐： html - 如果图像不存在，Opera 会显示损坏的图像
太空宇宙
个人简介

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

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