I am participating in the team competition of Nuggets Community Game Creative Submission Contest. For details, please see: Game Creative Submission Contest

Ihope_top.giitee. IO /juejin-king Gitee address: gitee.com/ihope_top/j… Team members: Village head Xiao Er Hei, Monica Oo

Write first:

Hello big brothers 🤭, can participate in this gold digging activity is really very happy ah, also very grateful for the group members to help each other! Of course, most of all thanks to our team leader shizili Aoshan, who could lead us through our ✌ development of this game despite hardships and complications.

Introduction to the Game

This game is called brave dig gold, the game is divided into five levels, the game difficulty increasing.

Are:

  • The first stage: looking for nuggets
  • The second level: rock paper scissors
  • The third level: looking for treasure
  • The fourth level: Whack-a-mole
  • Chapter 5 🙁Lucky draw)

They were completed by different members of the group. The overall framework construction and public construction development are completed by the team leader 👏. I had the honor to participate in the fourth level of the game – Whack-a-mole, this level will be more complicated compared to the first three levels, but also to undertake a turning point from simple to complex ah, and this level, players need to be highly focused to complete the challenge of this level!

Introduction to members:

Leader: ten li Castle peak leader article brave dig gold, you are the number one player!

Team member: MonicaWoo (I am small white ~) team member article brave to dig gold —- let’s whack-a-mole ~~

Member: village head small two black dregs black 😇 member article brave dig gold, you are number one player!

Introduction to this section:

This level is the fourth level, named whack-a-mole. This one, pay attention to eye disease and quick hand, the player needs to destroy it with the fastest speed when the ground mouse appears!

Rules of this section:

Each gopher appeared 0.7 seconds, a total of 20, hit one only one point, no score

Logical explanation:

  • Step one

    Since this project is built according to the VUE framework, the first step is to create a loop of 9 Spaces for gopher infestation and attach the code:

       <div class="susliks-list">
      <div class="susliks-item" v-for="item in 9" :key="item">
        <div class="hole" v-show="active ! == item"></div>
        <div class="hamster" v-show="active === item" @click="countEnd">
          <img src=".. /assets/img/hamster.png" alt="">
        </div>
      </div>
    </div>
Copy the code

  • Step 2

    In the 9 cell range created earlier, set the random gopher to appear 20 times, again with the code:

      // Refresh gopher D
  refreshHamster () {
    // If the turn is 20 times, the direct state changes to complete and jump to the next level
    if (this.round >= 20) {
      // Cannot be clicked
      this.canClick = false
      // Style initialization
      this.active = 0
      setTimeout(() = > {
        this.status = 'success'
      }, 2000)
      return
    }
    // The number of turns increases step by step
    this.round++
    // Select a random number between 1 and 9
    let active = Math.floor(Math.random() * 9) + 1
    while (active === this.active) {
      active = Math.floor(Math.random() * 9) + 1
    }
    this.active = active

    // this.active = Math.floor(Math.random() * 9) + 1

    // Set the gopher appearance time to 0.7s
    this.refreshTimer = setTimeout(() = > {
      this.resultList.push(0)
      this.refreshHamster()
    }, 700)},Copy the code

  • Step 3

    Next, the familiar whack-a-Mole, with the same code:

     // Get a shot
  countEnd () {
    // Cannot be clicked
    if (!this.canClick) {
      return
    }
    // Score array collection
    this.resultList.push(1)

    // Clear the refresh gopher timer
    clearTimeout(this.refreshTimer)

    // Refresh the gopher random area
    this.refreshHamster()
    this.$emit('add', {
      name: 'stage4'.val: 1})}Copy the code

This level is easy to pass, the code of this level should be able to roughly understand 😂 under my comments, at the same time, our leader will also send out an article on the whole project to explain. If you have any questions, please leave them in the comments section. I will ask the leader of the adult personally answer for you, if the leader of the adult answer is not satisfied with this group there are top big guy online for you to solve problems, believe me, kid sou no deceit 🙏🏻

Summary:

We can benefit a lot from this activity. During the development process, we learned the development logic of the leaders and further learned the cooperation between teams. During the development, the group leader and other partners helped each other to optimize each part of the code and shared their own development experience. Not only to gain knowledge but also to make friends. Hope the nuggets do more similar activities, so that each of us know more like-minded partners. Thanks again!! Bi Xin ️!!