javascript中的刽子手游戏

我在JavaScript/jQuery hangman任务中遇到了一些问题&我似乎不知道问题是什么： 首先，当我玩一个新游戏时，空格似乎没有显示出来表示单词空格（尽管它是随机选择一个单词，

randomWord（）

函数似乎运行正常）。 它显示了我选择的错误单词，但除了没有显示空格和那些空格中正确选择的字母外，当我选择了错误的字母时，它没有“闪烁”（淡入和淡出红色背景色），也没有在输入单词后清除输入框（当我选择了一个错误的字母时，我终于开始推进刽子手图像）。 我有点被困在这一点上，任何能为我指明正确方向的帮助都将不胜感激（我在它的外观和任务规范方面还有很多工作要做，但我必须首先让它工作）

我的代码： J查询/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);
      }
  }

});

var wordBank=[“现代主义”、“情境主义”、“萨特”、“加缪”、“黑格尔”、“拉康”、“巴特”、“鲍德里亚”、“福柯”、“德伯”、“鲍德里亚”]；
var-word=[]；
var错误猜测=[]；
var rightGuesses=[]；
var图像=[绞架，头部，身体，手臂，把手，手臂，把手，腿，脚，腿，脚]；
var y=0；
var i=1；
$（文档）.ready（函数（）{
//从单词库{like challenge12}中选择一个随机单词-为arrayIndex生成一个随机单词#，应用于数组，转换为字符串并拆分该单词以在游戏中使用
函数randomWord（）{
var random=Math.floor（Math.random（）*wordBank.length）；
var-toString=wordBank[random]；
console.log（toString）；
word=toString.split（“”）；
console.log（word）；
}
随机词（）；
//创建空间，添加一个div用于游戏，并添加空间
函数字空间（）{
var letterSpace=“”；
for（变量i=0；idiv:n类型（“+（lIndex+1）+”）。文本（空格）；
猜对。推（空格）；
}
}
//我在网上找到的用于输入键盘的keycode函数
$（“.form控件”）.keypress（函数（事件）{
var keycode=（event.keycode？event.keycode:event.which）；
如果（键代码==13）
{
var space=$（this.val（）；
startPlay（空间）；
$（this.val（“”）；
结束游戏（）；
返回false；
}
});
函数endGame（）{
if（错误猜测.length>=10 | |正确猜测.length==word.length）{
$（“body”）.css（“背景色”，“#ff4500”）；
$（“.form control”）.prop（'disabled'，true）；
}
}
});

HTML:

你的话是：

请猜一封信：





你猜错了字母：

刽子手 我让它工作起来了，我将快速分解它所拥有的以及您需要自己完成的内容：

亮点

• .words spaces

  是一个动态表。它为单词的每个字母生成一个
  。每个字母也放在它的
  中，但它们不可见，因为它们以白色开头（与背景相同）。作为额外的预防措施，我添加了

  user select:none

  ，这样用户就不会通过突出显示
  来作弊

• .ErrorLetter

  是一个包含10个
  的表，因为这是

  endGame（）之前的最大错误猜测量
  

• 按键部分无法工作，因为它正在调用不存在的

  gamePlay（space）

  函数

• 有几个地方也有格式错误的选择器（例如，类上缺少点）

待办事项

• 它无法处理一个字母的多次出现（例如，它将识别单词baudrillard中的第一个“l”，并忽略第二个“l”。）

• 嗯…我以为不止这些。我想不是

有一个和一个片段，祝你玩得开心

35387864
html{
字体：400 16px/1.428“Verdana”；
}
主要{
填充：20px；
}
页脚，
标题{
填充：5px20px；
}
页脚{
边界顶部：2个山脊#666；
}
标题{
边界底部：2个山脊#666；
}
.单词空间，
.错信{
边框：1倍脊灰；
表布局：固定；
边界塌陷：塌陷；
利润率：10px0；
}
.字空间td，
.错误字母td{
边框：2张插图#BBB；
宽度：3cm；
高度：1.5雷姆；
填充：1px；
文本对齐：居中；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
颜色：白色；
}
.错误字母td{
颜色：红色；
}
.表格管制{
宽度：10厘米；
文本对齐：居中；
}
保险商实验室{
字号：1rem；
列表样式：无；
左侧填充：0；
}
刽子手
你的话是：


猜一封信
键入一个字母，然后单击Enter
猜错的字母：




var wordBank=[“现代主义”、“情境主义”、“萨特”、“加缪”、“黑格尔”、“拉康”、“巴特”、“鲍德里亚”、“福柯”、“德伯”、“鲍德里亚”]；
var-word=[]；
var错误猜测=[]
<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>