文章/答案/技术大牛

发布

问javascript中的hangman游戏
EN

Stack Overflow用户

提问于 2016-02-14 02:56:01

回答 1查看 1.1K关注 0票数 2

我在JavaScript/jQuery分配中遇到了一些问题&我似乎不知道问题是什么:首先，当我玩新游戏时，空格似乎没有显示出单词空格(尽管它随机选择了一个单词& randomWord()函数似乎正常运行)。它显示了我选择的错误单词，但除了没有显示空格&在这些空格中正确选择的字母之外，当我选择了一个错误的字母&输入一个单词后没有清除输入框(当我选择了一个错误的字母时，我终于得到它来推进挂人图像)，这不是“闪烁”(消失在红色的背景色中)。我在这一点上有点卡住了，任何帮助我朝着正确的方向前进都会很感激(在它的外观和分配规范方面，我还有很多工作要做，但我必须首先让它工作)。

我的代码:J Query/JavaScript：

var wordBank=["modernism", "situationalist", "sartre", "camus", "hegel", "lacan", "barthes", "baudrillard", "foucault", "debord", "baudrillard"];
var word=[];
var wrongGuesses=[];
var rightGuesses=[];
var images = [gallows, head, body, armL, handL, armR, handR, legL, footL, legR, footR];
var y = 0;
var i = 1;
$(document).ready(function(){
//choose a random word from the wordBank {like challenge12}-generate a random# for arrayIndex, apply to array, convert to string & split the word for use in game 
 function randomWord(){
    var random = Math.floor(Math.random() * wordBank.length);
    var toString = wordBank[random];
    console.log(toString);
    word=toString.split("");
    console.log(word);
}
  randomWord();
//create spaces, append a div to use for gameplay w/the spaces  
  function wordSpaces(){
    var letterSpace = "";
    for (var i = 0; i < word.length; i++){
      $(".word-spaces").append(letterSpace + "<div class='space'></div>" )
    }
  }
  wordSpaces();

  function startPlay(space) {
  //indexOf()==inArray() 
    var lIndex = jQuery.inArray(space, word);
    if(lIndex == -1){
      wrongGuesses.push(space);
      $(".wrongLetters p").append(space + " ");
      $(this).css("background-color", "#ff4500").fadeIn('fast').delay(800).fadeOut('fast');
      $(images[i - 1]).hide();
      $(images[i]).show();
      i++;
    } else {
      $("word-spaces > div:nth-of-type(" + (lIndex + 1) + ")").text(space);
      rightGuesses.push(space);

    }
  }
  //keycode function I found online for taking keyboard input
  $(".form-control").keypress(function (event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == 13)
    {
         var space = $(this).val();
         startPlay(space);
         $(this).val('');
         endGame();
         return false;
    }
  });


  function endGame(){
      if(wrongGuesses.length >= 10 || rightGuesses.length == word.length){
      $("body").css("background-color", "#ff4500");
      $(".form-control").prop('disabled', true);
      }
  }

});

HTML：

<body>

  <header></header>

  <div class="hangman">
    <img src="http://i.imgur.com/gSxmkUf.gif" id="gallows" align="middle top">
    <img src="http://i.imgur.com/Mb4owx9.gif" id ="head" align="middle top" style="display:none;">
    <img src="http://i.imgur.com/xkXISte.gif" id ="body" align="middle top" style="display:none;">
    <img src="http://i.imgur.com/U44ReUi.gif" id ="armL" align="middle top" style="display:none;">
    <img src="http://i.imgur.com/49kkaQF.gif" id ="handL" align="middle top" style="display:none;">
    <img src="http://i.imgur.com/tqtNazW.gif" id ="armR" align="middle top" style="display:none;">
    <img src="http://i.imgur.com/ydnz7eX.gif" id ="handR" align="middle top" style="display:none;">
    <img src="http://i.imgur.com/dlL7Kek.gif" id ="legL" align="middle top" style="display:none;">
    <img src="http://i.imgur.com/3AQYFV9.gif" id ="footL" align="middle top" style="display:none;">
    <img src="http://i.imgur.com/j9noEN7.gif" id ="legR" align="middle top" style="display:none;">
    <img src="http://i.imgur.com/kJofX7M.gif" id ="footR" align="middle top" style="display:none;">
  </div>

  <div class="word-spaces">
    <p>Your word is: </p>
  </div>

  <div class="guessIn">
    <p>Please Guess a Letter:</p>
    <br>
    <input type="text" class="form-control" placeholder="...your guess...">
    <br>

    <div class="wrongLetters">
      <p>Wrong letters you've already guessed:</p>
    </div>


  </div>

html

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-02-14 06:24:17

刽子手

我让它起作用了，我会对它所拥有的和你自己需要完成的东西做一个快速的分解：

亮点

.words-spaces是一个动态表。它为单词的每个字母生成一个<td>。每个字母也被放置在它的<td>中，但它们是不可见的，因为它们以白色开头(与背景相同)。作为额外的预防措施，我添加了user-select: none，这样用户就不能通过高亮显示<td>来欺骗。
.wrongLetter是一个具有10 <td>的表，因为这是endGame()之前错误猜测的最大数量。
keypress部分无法工作，因为它调用的是不存在的gamePlay(space)函数。
有几个地方也有畸形的选择器(例如。(课堂上缺失的点)

ToDo

它不能处理一封信(例如)的多次事件。它会识别单词baudrillard中的第一个"l“，而忽略第二个”l“。)
嗯.我还以为还有更多呢。我想不是..。

有一个小提琴和一个片段玩得开心。

<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>35387864</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
html {
  font: 400 16px/1.428 'Verdana';
}

main {
  padding: 20px;
}

footer,
header {
  padding: 5px 20px;
}

footer {
  border-top: 2px ridge #666;
}

header {
  border-bottom: 2px ridge #666;
}

.word-spaces,
.wrongLetters {
  border: 1px ridge grey;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 10px 0;
}

.word-spaces td,
.wrongLetters td {
  border: 2px inset #BBB;
  width: 3ch;
  height: 1.5rem;
  padding: 1px;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: white;
}

.wrongLetters td {
  color: red;
}

.form-control {
  width: 10ch;
  text-align: center;
}

ul {
  font-size: 1rem;
  list-style: none;
  padding-left: 0;
}

</style>
</head>

<body>

  <header>
    <h2>
    Hangman
    </h2>
  </header>
  <main>
    <figure class="hangman">
      <img src="https://i.imgur.com/gSxmkUf.gif" id="gallows" align="middle top">
      <img src="https://i.imgur.com/Mb4owx9.gif" id="head" align="middle top" style="display:none;">
      <img src="https://i.imgur.com/xkXISte.gif" id="body" align="middle top" style="display:none;">
      <img src="https://i.imgur.com/U44ReUi.gif" id="armL" align="middle top" style="display:none;">
      <img src="https://i.imgur.com/49kkaQF.gif" id="handL" align="middle top" style="display:none;">
      <img src="https://i.imgur.com/tqtNazW.gif" id="armR" align="middle top" style="display:none;">
      <img src="https://i.imgur.com/ydnz7eX.gif" id="handR" align="middle top" style="display:none;">
      <img src="https://i.imgur.com/dlL7Kek.gif" id="legL" align="middle top" style="display:none;">
      <img src="https://i.imgur.com/3AQYFV9.gif" id="footL" align="middle top" style="display:none;">
      <img src="https://i.imgur.com/j9noEN7.gif" id="legR" align="middle top" style="display:none;">
      <img src="https://i.imgur.com/kJofX7M.gif" id="footR" align="middle top" style="display:none;">
    </figure>

    <table class="word-spaces">
      <caption>Your Word is: </caption>
      <tbody>
        <tr></tr>
      </tbody>
    </table>
    <br/>
    <fieldset class="guessIn">
      <legend>
        Guess a Letter
      </legend>
      <label for="form">Type a Letter then Click <kbd>Enter</kbd></label>
      <input type="text" id="form" class="form-control" placeholder="guess">

    </fieldset>

    <table class="wrongLetters">
      <caption>Letters Guessed Wrong:</caption>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </main>
  <footer>
  	<ul>
    	<li><a href="https://stackoverflow.com/questions/35387864/hangman-gameplay-in-javascript">Hangman Gameplay in JavaScript</a></li>
    	<li><a href="https://jsfiddle.net/zer00ne/0fa56t3s/">jsFiddle</a></li>
    </ul>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <script>
  var wordBank = ["modernism", "situationalist", "sartre", "camus", "hegel", "lacan", "barthes", "baudrillard", "foucault", "debord", "baudrillard"];
var word = [];
var wrongGuesses = [];
var rightGuesses = [];
var images = [gallows, head, body, armL, handL, armR, handR, legL, footL, legR, footR];

$(document).ready(function() {
  function randomWord() {
    var random = Math.floor(Math.random() * wordBank.length);
    var toString = wordBank[random];
    console.log(toString);
    word = toString.split("");
    console.log(word);
  }
  randomWord();

  function wordSpaces() {
    for (var i = 0; i < word.length; i++) {
      $(".word-spaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
    }
  }
  wordSpaces();

  function play(space) {
    //indexOf()==inArray() 
    var lIndex = jQuery.inArray(space, word);
    if (lIndex == -1) {
      wrongGuesses.push(space);
      var wrong = wrongGuesses.length;
      console.log('wrong ' + wrong)
      $('.wrongLetters tbody tr td:nth-of-type(' + wrong + ')').text(space);

      $(this).css("background-color", "#ff4500").fadeIn(300).delay(800).fadeOut(300);
      $(images[i - 1]).hide();
      $(images[i]).show();
      i++;
    } else {
      $(".word-spaces tbody tr td:nth-of-type(" + (lIndex + 1) + ")").css('color', 'black');
      rightGuesses.push(space);

    }
  }

  $(".form-control").keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == 13) {
      var space = $(this).val();
      play(space);
      $(this).val('');
      endGame();
      return false;
    }
  });


  function endGame() {
    if (wrongGuesses.length >= 10 || rightGuesses.length == word.length) {
      $("body").css("background-color", "#ff4500");
      $(".form-control").prop('disabled', true);
    }
  }

});
</script>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35387864

复制

相似问题

问javascript中的hangman游戏
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript中的hangman游戏EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript中的hangman游戏
EN