Gold digging – The first level of gold digging

I am participating in the team competition of Nuggets Community Game Creative Contribution Contest. Please refer to the details:Game ideas submission contest

The game is the address

Gitee address

Basic introduction:

Participate in the development of this project first thanks for digging gold activities, secondly thanks to the group members help each other! Of course, the most important thanks to our group leader Shili Castle Peak. Not afraid of hard, not afraid of tedious 😂 lead us to complete the development of the game.

This game is called brave dig gold, the game is divided into five levels, the game difficulty increasing. Level 1 🂱- looking for gold, level 2 🂲- Rock paper Scissors, level 3 🂳- looking for treasure, level 4 🂴- Whack-a-Mole, and level 5 🂲- lucky draw. They were completed by different members of the group. The overall framework building and common component development are completed by the team leader 👏. I had the honor to participate in it and developed the first pass of this game to find gold, this pass is relatively simple, but also to let each player have a good psychological foundation, with the confidence to meet the pass to accept the challenge behind 🫵🏻!

Introduction to members:

Group leader: ten mile castle peak group leader article

Group member: MonicaWoo group member article

Group member: villager xiaoerhei is also me

Introduction to this section:

This is the first pass, called looking for gold. This level is easy to use, suitable for all ages. The gameplay just needs to find the word “nuggets” among many “stubborn gold”. By my own measurement, and pick up my glasses of 361 degrees through this is no trouble. All players only need to take this level as the cost of the game appetizer, with the joy of victory to challenge each level behind! Here I wish you every pass to win ！！！！！

Gameplay: Select “nuggets” from the alternative words on the screen, and click on it. There are 5 rounds in this level, you have 10 seconds to choose each round, you get 4 points if you find it, no points if you don’t.

Code display:

Components:

The rules of the game and the results of the game are encapsulated in common components, and different levels pass in different values to determine what is displayed.

   <! -- Rules and Operation Area -->
    <rule-wrap :stage="1" @begin="begin"></rule-wrap>
    <! -- Result popover -->
    <result-log :status="status" :isEnd="round >= 5" @goOn="goOn"></result-log>
Copy the code

Content Introduction:

This part is to record the number of rounds and countdown display area; The round value is the number of rounds. The elements in the resultList array are 0 and 1, and if this round wins, a 1 is pushed to the resultList, and if this round wins, a 1 is pushed to the resultList. 1 is scored and shows a green circle, 0 is not scored and shows a red circle. The number of arrays is the same as the value of round.

    <! -- Score and countdown -->
    <div class="progress-bar" v-show="round > 0">
      <div class="result-list">
        <div
          class="result-item"
          :class="{active: item}"
          v-for="(item, key) in resultList"
          :key="key"
        ></div>
      </div>
      <div class="count-time">{{ countText }}</div>
    </div>
Copy the code

This is the play area; BlockList is an array of 25 elements, of which 24 are “curmudgeons” and 1 is “nuggets.” The location of the nuggets is determined by random numbers.

<! -- Game area -->
    <div class="game-wrap">
      <div class="block-list">
        <div
          class="block-item"
          :class="{active: item, right: item = = = 'the nuggets', the error: the item = = =' stubborn gold '}"
          v-for="(item, key) in blockList"
          :key="key"
          @click="countEnd(item)"
        ></div>
      </div>
    </div>
Copy the code

Corresponding methods; CountEnd (item) method; Clicking this method passes an argument to stop the countdown and calls the check() method.

    // The countdown is over
    countEnd (val = 'stubborn gold') {
      clearInterval(this.countInterval)
      this.check(val)
    }
Copy the code

Check (val) method; The check (val) method argument is passed by the countEnd() method. This value is the selected answer, and if it is selected correctly a 1 is pushed into the resultList array, if it is selected incorrectly a 0 is pushed, and the result component is called, which displays the corresponding result based on the status value returned.

    check (val) {
      if(val ! = ='the nuggets'&& val ! = ='stubborn gold') return
      this.blockList = []
      if (val === 'the nuggets') {
        this.status = 'success'
        this.$emit('add', {
          name: 'stage1'.val: 4
        })
        this.resultList.push(1)}else {
        this.status = 'fail'
        this.resultList.push(0)}}Copy the code

Reset () method; The reset () method is also the main method in the game. This method assigns 25 empty values to the blockList array, which creates 25 small squares. Then fill the array with fill(), which fills all 25 empty values into “stubborn gold”, and generates a random number up to 25. Use this random number to subscript the array to change the value of the corresponding element to “nuggets”. At this point the page is rendered.

  // reset the table
    reset () {
      this.blockList = new Array(25)
      let index = 0
      let interval = setInterval(() = > {
        if (index < 25) {
          this.$set(this.blockList, index, '6')
          index++
        } else {
          clearInterval(interval)
          this.round++
          let newArr = new Array(25).fill('stubborn gold')
          let random = Math.floor(Math.random() * 25)
          newArr[random] = 'the nuggets'
          this.blockList = newArr
          this.startCount()
        }
      }, 50)},Copy the code

This article only briefly introduces some of the key code. This level is simple and easy to pass, this level of code logic is simple to understand! For the rest of the story, I don’t think you guys need me to force you to explain 😂, if you want to understand the level code or the overall logic of the project just look at the source code.

The group leader will also send out articles on the whole project to explain. Such as have not understand please leave a message in the comments section, I will leader of the adult, please answer for you in person, if not satisfied with our group leader of the adult solutions and beauty within bosses 🙈 service to you, she is a master sword halberd, hitting the pain of not experience cannot understand, advise you choose carefully, if you want to go wish you peace 🙏 🏻

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.