添加提示到JQuery刽子手游戏

时间：2015-02-24 20:17:09

标签： jquery

我正在尝试为我的国家制作Hangman游戏。我有一个随机单词列表出现，它正常工作。现在我想添加提示。例如，如果选择“学校”这个词，我希望提示是“你学习的地方”，我不知道该怎么做。

代码：

/*
* SPOILER ALERT! 
* WORDS FOR THE GAME ARE IN THIS FILE ;)
* ©2014 Nate Wiley -- MIT License
Sounds from http://soundfxnow.com, and http://www.soundjay.com
Fonts from Google Fonts
*/
(function($, window, undefined){

  Hangman = {
    init: function(words){
      this.hint = $(".hint"),
      this.words = words,
      this.hm = $(".hangman"),
      this.msg = $(".message"),
      this.msgTitle = $(".title"),
      this.msgText = $(".text"),
      this.restart = $(".restart"),
      this.wrd = this.randomWord(),
      this.correct = 0,
      this.guess = $(".guess"),
      this.wrong = $(".wrong"),
      this.giveUp = $(".giveUpBtn"),
      this.wrongGuesses = [],
      this.rightGuesses = [],
      this.guessForm = $(".guessForm"),
      this.guessLetterInput = $(".guessLetter"),
      this.goodSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/goodbell.mp3"),
      this.badSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/bad.mp3"),
      this.winSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/win.mp3"),
      this.loseSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/lose.mp3"),
      /*Aww Sound Added for the 'I give up' */
      this.awwSound = new Audio ("https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/aww.mp3"),
      this.setup();
    },


    setup: function(){
      this.binding();
      this.sounds();
      this.showGuess(this.wrongGuesses);
      this.showWrong();

    },


    sounds: function(){  
      this.badSound.volume = .4;
      this.goodSound.volume = .4;
      this.winSound.volume = .8;
      this.loseSound.volume = .4;
      this.awwSound.volume = .8;

    },


    binding: function(){
      this.guessForm.on("submit", $.proxy(this.theGuess, this));
      this.giveUp.on("click", $.proxy(this.theAnswer, this));
      this.restart.on("click", $.proxy(this.theRestart, this));
      this.hint.on("click",$.proxy(this.hintanswer,this))
    },


    playSound: function(sound){
      this.stopSound(sound);
      this[sound].play();
    },


    stopSound: function(sound){
      this[sound].pause();
      this[sound].currentTime = 0;

    },


    theRestart: function(e){
      e.preventDefault();
      this.stopSound("winSound");
      this.stopSound("loseSound");
      this.stopSound("awwSound");
      this.reset();
    },


    theGuess: function(e){
      e.preventDefault();
      var guess = this.guessLetterInput.val();
      if(guess.match(/[áƒ-ჰ]/) && guess.length == 1){
        if($.inArray(guess, this.wrongGuesses) > -1 || $.inArray(guess, this.rightGuesses) > -1){
          this.playSound("badSound");
          this.guessLetterInput.val("").focus();
        }
        else if(guess) {
          var foundLetters = this.checkGuess(guess);
          if(foundLetters.length > 0){
            this.setLetters(foundLetters);
            this.playSound("goodSound");
            this.guessLetterInput.val("").focus();
          } else {
            this.wrongGuesses.push(guess);
            if(this.wrongGuesses.length == 10){
              this.lose();
            } else {
              this.showWrong(this.wrongGuesses);
              this.playSound("badSound");
            }
            this.guessLetterInput.val("").focus();
          }
        }
      } else {
        this.guessLetterInput.val("").focus();
      }
    },

    randomWord: function(){
      return this._wordData(this.words[ Math.floor(Math.random() * this.words.length)] );
    },


    showGuess: function(){
      var frag = "<ul class='word'>";
      $.each(this.wrd.letters, function(key, val){
        frag += "<li data-pos='" +  key  + "' class='letter'>*</li>";
      });
      frag += "</ul>";
      this.guess.html(frag);
    },


    showWrong: function(wrongGuesses){
      if(wrongGuesses){
        var frag = "<ul class='wrongLetters'>";
        frag += "<p>დáƒáƒ¨áƒ•áƒ”ბული შეცდáƒáƒ›áƒ: </p>";
        $.each(wrongGuesses, function(key, val){
          frag += "<li>" + val + "</li>";
        });
        frag += "</ul>";
      }
      else {
        frag = "";
      }

      this.wrong.html(frag);
    },



    checkGuess: function(guessedLetter){
      var _ = this;
      var found = [];
      $.each(this.wrd.letters, function(key, val){
        if(guessedLetter == val.letter.toLowerCase()){
          found.push(val);
          _.rightGuesses.push(val.letter);
        }
      });
      return found;

    },


    setLetters: function(letters){
      var _ = this;
      _.correct = _.correct += letters.length;
      $.each(letters, function(key, val){
        var letter = $("li[data-pos=" +val.pos+ "]");
        letter.html(val.letter);
        letter.addClass("correct");

        if(_.correct  == _.wrd.letters.length){
          _.win();
        }
      });
    },


    _wordData: function(word){

      return {
        letters: this._letters(word),
        word: word.toLowerCase(),
        totalLetters: word.length
      };
    },


    hideMsg: function(){
      this.msg.hide();
      this.msgTitle.hide();
      this.restart.hide();
      this.msgText.hide();
    },


    showMsg: function(){
      var _ = this;
      _.msg.show("blind", function(){
        _.msgTitle.show("bounce", "slow", function(){
          _.msgText.show("slide", function(){
            _.restart.show("fade");
          });

        });

      });
    },


    reset: function(){
      this.hideMsg();
      this.init(this.words);
      this.hm.find(".guessLetter").focus();

    },


    _letters: function(word){
      var letters = [];
      for(var i=0; i<word.length; i++){
        letters.push({
          letter: word[i],
          pos: i
        });
      }
      return letters;
    },


    rating: function(){
      var right = this.rightGuesses.length,
          wrong = this.wrongGuesses.length || 0,
          rating = {
            rating: Math.floor(( right / ( wrong + right )) * 100),
            guesses: (right + wrong)

          };
      return rating;
    },

    win: function(){
      var rating = this.rating();
      this.msgTitle.html("გილáƒáƒªáƒáƒ•áƒ—, თქვენ გáƒáƒ›áƒáƒ˜áƒªáƒáƒœáƒ˜áƒ—!");
      // this is messy
      this.msgText.html("თქვენ გáƒáƒ›áƒáƒ˜áƒªáƒáƒœáƒ˜áƒ— სიტყვრ<span class='highlight'>" + rating.guesses + "</span> ცდáƒáƒ¨áƒ˜!<br>ქულáƒ: <span class='highlight'>" + rating.rating + "%</span>");
      this.showMsg();
      this.playSound("winSound");

    },


    lose: function(){
      this.msgTitle.html("თქვენ დáƒáƒ›áƒáƒ ცხდით.. სიტყვრიყრ<span class='highlight'>"+ this.wrd.word +"</span>");
      this.msgText.html("áƒáƒ  ინერვიულáƒáƒ—, შემდეგში გáƒáƒ›áƒáƒ˜áƒªáƒœáƒáƒ‘თ!");
      this.showMsg();
      this.playSound("loseSound");
    },
   /*theAnswer() initiated when you give up*/
    theAnswer: function(){
       var answer = this.wrd.word;
       this.msgTitle.html("áƒáƒ°áƒ°.. შენ დáƒáƒœáƒ”ბდი!");
      this.msgText.html(" სიტყვრიყრ <span class='highlight'>"+ this.wrd.word +"</span>");                 
       this.showMsg();
       this.playSound("awwSound");
    },
  hintanswer: function() {
  var answer = this.wrd.word;
  this,msgTitle.html("ძáƒáƒšáƒ˜áƒáƒœ áƒáƒ“ვილიáƒ!");
  this.showMsg();
  },
  };

  var wordList = ["სკáƒáƒšáƒ", "კვერცხი", "კáƒáƒ ტáƒáƒ¤áƒ˜áƒšáƒ˜", "მუსიკáƒ", "მáƒáƒœáƒ¥áƒáƒœáƒ", "კáƒáƒ›áƒžáƒ˜áƒ£áƒ¢áƒ”რი", "მზესუმზირáƒ", "ფáƒáƒ ტეპიáƒáƒœáƒ", "სáƒáƒ—ლელი", "წიგნი", "გáƒáƒ¡áƒáƒ¦áƒ”ბი", "ტელევიზáƒáƒ ი", "ჰáƒáƒ™áƒ”რი", "მáƒáƒ£áƒ¡áƒ˜", "კლáƒáƒ•áƒ˜áƒáƒ¢áƒ£áƒ áƒ", "ვეფხისტყáƒáƒáƒ¡áƒáƒœáƒ˜", "კáƒáƒ›áƒáƒ—ელი", "ბილიáƒáƒ დი", "თეáƒáƒ¢áƒ ი", "რეკლáƒáƒ›áƒ", "ტყლáƒáƒžáƒ˜", "სურáƒáƒ—ი", "ჩილიმი", "თვáƒáƒšáƒ˜", "თáƒáƒ•áƒ˜", "მუხლი", "ფáƒáƒ დáƒ", "წკლიპურტი", "მáƒáƒœáƒ“áƒáƒ ინი", "áƒáƒ¡áƒ™áƒáƒ ი", "პეპელáƒ", "ლáƒáƒ§áƒ", "ჯáƒáƒ თი", "áƒáƒ¤áƒáƒ¤áƒ˜", "კáƒáƒ™áƒáƒšáƒ˜", "კერძი", "ემიგრáƒáƒœáƒ¢áƒ˜", "სკáƒáƒ›áƒ˜", "მერქáƒáƒœáƒ˜", "ვáƒáƒšáƒ˜", "ხáƒáƒ თუმი", "დáƒáƒ—ვი", "მელáƒ", "ზáƒáƒ–უნáƒ", "ვეფხვი", "ვერძი", "მáƒáƒ›áƒáƒšáƒ˜", "სუფრáƒ", "ტყემáƒáƒšáƒ˜", "ლáƒáƒ’ინი", "ტელეფáƒáƒœáƒ˜", "ქáƒáƒ წილი", "ქáƒáƒ ი", "გზáƒ", "ნáƒáƒ«áƒ•áƒ˜áƒ¡áƒ®áƒ”", "ბეჰემáƒáƒ¢áƒ˜", "სáƒáƒ დáƒáƒ¤áƒ˜", "ლáƒáƒ›áƒ˜", "áƒáƒ წივი", "áƒáƒ”რáƒáƒžáƒáƒ ტი", "ჰáƒáƒ›áƒáƒ™áƒ˜", "ბურთი", "ქáƒáƒ—áƒáƒ›áƒ˜", "ზებრáƒ", "ჰიდრáƒáƒ”ლექტრáƒáƒ¡áƒáƒ“გური", "სáƒáƒ¦áƒ”ბáƒáƒ•áƒ˜", "áƒáƒ ქიტექტáƒáƒ ი", "ხáƒáƒ®áƒ", "თითი", "ჭრიჭინáƒ", "თáƒáƒ›áƒ‘áƒáƒ¥áƒ", "ლუდი", "შáƒáƒ£áƒ მáƒ", "სáƒáƒ¤áƒ”თქელი", "მეტრáƒ", "ქáƒáƒ იშხáƒáƒšáƒ˜", "რესტáƒáƒ áƒáƒœáƒ˜"];
  var engword = ["book","room","home","table","garbage","blind","fear","number","patent","lose","basketball"];
  Hangman.init(wordList);

})(jQuery, window);

代码链接：http://331542.esy.es/game/js/index.js

如何在此代码中添加提示？

1 个答案:

答案 0 :(得分：0)

您很可能希望将它们合并到wordList和engWord数据对象中。也许将它们转换为实际对象，以防您需要向它们添加任何其他数据（难度等）

var wordList [
  { word: "book", hint: "this is my book hint" },
  { word: "room", hint: "this is my room hint" }
];

然后，您必须更改使用单词object的代码。

randomWord: function(){
  return this._wordData(this.words[ Math.floor(Math.random() * this.words.length)].word );
},

请注意添加新对象.word的属性。您可以在需要访问this.words[n].hint的任何位置使用相同的方法进行提示。

我还要仔细研究Javascript面向对象编程。将OOP的基本原理应用于您的Hangman游戏将会有很长的路要走。

一些例子：

http://eloquentjavascript.net/1st_edition/chapter8.html

http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/

<强>更新 你的hintanswer看起来应该是这样的。

hintanswer: function() {
  var hint = this.wrd.hint;
  this.msgTitle.html(hint);
  this.showMsg();
}
相关问题
最新问题