PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

Game address: game.pkec.net/word-ticket… Development language: Vue Running platform: Chrome Gitee address: gitee.com/ihope_top/w… Github address: github.com/heyongsheng… The game has been open source, welcome to experience

preface

XDM Happy New Year, everyone. First of all, thank you for your support to my last article, VUE New Year game – Year Beast Battle, happy New Year. The first time so many people like the article, I feel flattered, now the technology is not creative enough to make up the second round of the series – VUE New Year game – fight hand speed to snatch tickets, old rules, Click the above game address to experience and then read the article (this time compatible with the mobile terminal oh).

Write this mainly in the days before the group of operating teacher say zha nobody writes rob ticket, plus the nuggets a week on my last article, heard that there is certificate on a few times more, I haven’t got any certificate of the Denver nuggets, so a little tempted, this little game play and implementation is very simple, creativity comes from many years ago to go to school, the school the small game – jinshan typing on the computer, There is a dozen English chasing the thief of the game, here for reference, nonsense not to say, the following to see how to achieve it.

If someone is interested in the technology not mentioned in the game, you can put it forward in the comment section, and the subsequent article can be targeted to explain. In addition, the code in this article is only posted key parts of the code, if you want to view the complete code, please go to Gitee or GitHub.

The rules of the game

Above is the starting interface of the game. Enter abandon in the lower horizontal line to start the game. Click the question mark in the upper right corner to jump to this article

Start the game, after above will display more votes and the rest of the number of words, more than minus one per second, the number of words to lose to a little one, which one reset will trigger the end of the game, the first is that we need to input in the middle of the word, the following is our input word input box, enter the correct loads the next word, how, the rules are simple, just to see the specific code below.

The progress bar

First is the progress bar above, progress bar is used before components, I this is the first time handwritten progress bar, implementation is very simple, a div set another div, control the width of the progress bar inside the line

I’m here to join in the progress bar text, because progress sections and the overall color is not same, so we’re going to the text background is white, green text, white text background is green, I do not understand the switch according to the background color of the text color, here directly prepared two sets of words, a white, a set of green, By positioning the two positions to overlap, put one of them into the outer div, showing green, and put the other into the inner div, showing white. When the inner div gradually narrowed, the white text was slowly hidden, showing the green text below, so as to achieve the color change of the text.

Here attention should be paid to control the inside of the text forced not to newline, otherwise the text will be hidden when a whole whole disappear, not good

  <! -- Progress area -->
  <div class="progress-wrap">
    <! - more than votes - >
    <div class="progress">
      <p class="progress-text">Tickets: {{currentTicketCount}}</p>
      <div class="progress-inside" :style="{width: currentTicketCount / ticketCount * 100 + '%'}">
        <p class="progress-text">Tickets: {{currentTicketCount}}</p>
      </div>
    </div>
    <! -- Remaining verification code -->
    <div class="progress">
      <p class="progress-text">Remaining verification code: {{currentCodeCount}}</p>
      <div class="progress-inside" :style="{width: currentCodeCount / codeCount * 100 + '%'}">
        <p class="progress-text">Remaining verification code: {{currentCodeCount}}</p>
      </div>
    </div>
  </div>
Copy the code
  ticketCount: 60.// The number of tickets for this round
  currentTicketCount: 0.// The current number of tickets
  codeCount: 50.// Total number of verification codes
  currentCodeCount: 0.// Number of remaining verification codes
Copy the code
/* Progress bar style */
.progress {
  width: 100%;
  height: 20px;
  background: #fff;
  color: #24de62;
  border-radius: 20px;
  overflow: hidden;
  padding: 5px;
  position: relative;
}
.progress:first-child {
  margin-bottom: 20px;
}
.progress-inside {
  width: 100%;
  height: 100%;
  background: #24de62;
  border-radius: 20px;
  color: #fff;
  z-index: 3;
  position: relative;
  transition: width 1s linear;
  overflow: hidden;
}
.progress-inside .progress-text {
  position: inherit;
  left: 5px;
}
.progress-text {
  position: absolute;
  left: 10px;
  z-index: 2;
  white-space: nowrap;
}
Copy the code

Word display area

In the last article has been used for many times, extract, extract barrage, is a principle, to prepare a word library first, and then get thesaurus word count, then get a random integer less than or equal to the number, then take the integer suffix words is ok, if you want to be a round of words don’t repeat, then we can use splice, If we don’t limit the repetition, we can just assign

<! -- Word display area -->
<div class="show-wrap">
    <div class="word">{{ currentWord.word }}</div>
    <div class="mean">{{ currentWord.mean }}</div>
</div>
Copy the code
wordLibrary: require('@/assets/data/word.json'), / / word library
currentWordLibrary: [].// Current word library
currentWord: {}, // The current word

/ * * *@description: Extract word *@param {*}
 * @return {*}* /
drawWord () {
  let dataLength = this.currentWordLibrary.length
  let randomIndex = Math.floor(Math.random() * dataLength)
  this.currentWord = this.currentWordLibrary.splice(randomIndex, 1) [0]},Copy the code

Input box

Input box is also particularly simple, is an input box, locate to the following, and then listen to the input value, trigger the related events

Gameplay related

Start the game

Start the game first to determine whether a voice opened, if open the background music (it ended because the game will be automatically suspended), followed by reset the various parameters, here we introduce the concept of a round number, as players level is different, lead to some players it is difficult to enter in a minute 40 (50 was set up, for the user experience, Optimize to 40) words, for a good game experience, we allow players to try again after losing, and the next round ticket is +5, that is, the game time +5 seconds, each additional round, the game time will be increased by 5 seconds, until the user can complete 40 words.

/ * * *@description: Start the game@param {*}
 * @return {*}* /
startGame () {
  // If the sound switch is turned on, background music will be played
  if (this.audioState) {
    this.bgAudio.play()
  }
  // Change the game state
  this.gameStatus = 'start'
  // The number of rounds is increased by one
  this.round++
  // Reset the thesaurus of this round
  this.currentWordLibrary = [...this.wordLibrary]
  // Set the game time according to the number of rounds
  this.ticketCount = this.ticketCount + (this.round - 1 ) * 5
  // Reset the time
  this.currentTicketCount = this.ticketCount
  // Empty the input field
  this.wordInput = ' '
  // Reset the distance
  this.currentCodeCount = this.codeCount
  // Get a random word
  this.drawWord()
  // Start check-in
  this.ticketCheck()
},
Copy the code

check-in

Ticket checking is a matter of reducing the number of votes by one a second

The word detection

Words below the detection is entered by the user content, because we started the game, the game again are triggered by the input key word, so here we should not only determine whether the user to enter the word correctly, but also to determine whether a user input keywords and, of course, to control the game in the enter key to start the game again

If the user enters the correct word, the number of words is reduced by one and the next word is extracted

/ * * *@description: Word detection *@param {*}
 * @return {*}* /
wordCheck () {
  // Check keywords
  if (this.wordInput === 'abandon' || this.wordInput === 'again') {
    if (this.gameStatus ! = ='start') {
      this.startGame()
    }
  }
  // Check if the answer is correct
  if (this.wordInput === this.currentWord.word) {
    // Play sound effects
    this.playAudio(this.dingMedia)
    // Reset the input box
    this.wordInput = ' '
    // The number of verification codes is reduced by one
    this.currentCodeCount-=10
    if (this.currentCodeCount <= 0) {
      this.gameOver()
      return
    }
    // Pick the next word
    this.drawWord()
  }
},
Copy the code

Game over

The end of the game is divided into two situations, one is to grab the ticket, one is not to grab the ticket, we just need to judge whether the remaining ticket is greater than 0 when triggering the end of the game, greater than 0 means grabbed, less than 0 means not grabbed.

/ * * *@description: Game over *@param {*}
 * @return {*}* /    
gameOver () {
  if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
    this.$refs.wordInput.blur()
  }
  // Pause the background music
  this.bgAudio.pause()
  // Clear the check-in timer
  clearInterval(this.ticketCheckInterval)
  // Determine the outcome
  if (this.currentTicketCount > 0) {
    // Change the victory status
    this.result = 'success'
    // Play victory sound
    this.playAudio(this.successMedia)
  } else {
    / / fail
    this.result = 'fail'
    // Play the failure sound
    this.playAudio(this.failMedia)
  }
  this.gameStatus = 'end'
},
Copy the code

Rob ticket successfully

Rob ticket failure

This article is over, I hope to help you, I wish you a happy New Year, good health, good luck in everything