Question

我是javascript，css和html的初学者。我正在使用这三种语言创建一个简单的刽子手游戏。我遇到的问题是，当我开始转向内联p标签的显示属性（包含单词的组成字母）时，字母不会保持其位置。例如，如果单词＆＃39; clouds＆＃39;正在猜测，并且正确猜出了c和o字母，结果显示为＆＃34; c o _ _ _ _＆＃34;而不是＆＃34; c _ o _ _ s＆＃34; 。当正确猜出最后一个字母时，该单词显示为正常但不是之前。如果我不能显示尚未被选中的字母的正确位置，那么这种意义就会从刽子手中解脱出来，但我似乎无法弄清楚问题。我的代码流是这样的。我有四个功能：

createAlphabets（），列出要选择的字母网格。
选择单词的selectWord（）函数。
displayWord（）函数创建p元素，使其包含所选单词的字母，并将其显示属性设置为＆＃34; none＆＃34;。
clickLetter（）函数，在单击任何字母时调用此函数，并将此字母与所选单词中的字母进行比较，并将包含该字母的p元素的display属性设置为＆＃34;直列＆＃34 ;.

这是我的代码：

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/

谢谢！

Answer 1

问题在于你的方式。你使p的样式'display：none'以使其不可见。您应该使用'visibility：hidden'代替。如果你将它显示为none，那么它将表现得就像它不存在一样。但是，如果您使用可见性属性，它将表现得像它存在但不可见

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;

  }

Answer 2

好吧，当你显示一个隐藏元素时，浏览器会在页面的最左边可用边缘显示这个...（因为默认方向是左侧）

如果我是你，我会创建一个像这样的表

<table>
 <tr>
  <td> 1st hidden char </td>
  <td> 2nd hidden char </td>
  ...
  <td> Nth hidden char</td>
 </tr>
 <tr>
  <td> 1st underline _ </td>
  <td> 2nd underline _ </td>
  ...
  <td> Nth underline _ </td>
 </tr>
</table>

（甚至动态地为每个单词）因此，当您显示隐藏元素时，它将显示在其位置：）

希望有所帮助

隐藏的p元素并没有固定在一个刽子手游戏中

2 个答案: