How to implement a lucky wheel game in WeChat applet

I mainly introduce how to develop a lucky wheel game in the WeChat applet. It mainly uses JavaScript and CSS syntax, and you can easily realize a simple lucky wheel (taking 6 prize areas as an example).

Preface

This tutorial requires you to have a certain amount of basic knowledge of JavaScript and CSS, and you need to have some experience in developing small programs. The specific knowledge points you need to master are:

• CSS position, transform, transition, overflow
• JavaScript basic random algorithm
• wxs syntax
• Mini Program built-in animation API

Rendering

Mini Program Development Ideas

The development idea consists of three parts. The first part is to use CSS to draw the turntable background. The second part is to use wxs syntax to implement responsive styles. The third part is to use the built-in animation API of the applet to realize the rotation of the turntable and the randomness of the rotation through JS.

I mainly introduce the writing ideas, and now I will start my explanation.

How to draw a triangle

To begin with, write a basic wxml framework.

<view class="turntable">
  <view class="wrapper">
    <view class="item" >
	  <view class="item-inner">
		<text>10 points</text>
	  </view>
	</view>
  </view>
</view>

I drew two rectangles of the same size, with a length and width of 300rpx and 600rpx respectively, and used the position CSS attribute to merge the two rectangles together.

.turntable {
  display: block;
  width: 100%;
  height: 600rpx;
}
.turntable .wrapper{
  position: relative;
  transform-origin: center;
  width: 100%;
  height: 600rpx;
}

After the merging, I need to separate the two rectangles, turn the red rectangle into a semicircle, swing the blue rectangle 60 degrees clockwise, and the red rectangle swing 30 degrees counterclockwise. Why do I have to rotate like this? Because the blue originally swings 30 degrees counterclockwise with the red, and the internal angle of a triangle is 60 degrees. In order to form this 60-degree angle, I need to move the blue 60 degrees clockwise after the red is swung, thus forming a 60-degree angle.

.turntable .wrapper .item {
  position: absolute;
  left: 50%;
  width: 300rpx;
  height: 600rpx;
  border-radius: 0px 300rpx 300rpx 0;
  transform-origin: left center;
  transform: rotate(-30deg);
}
.turntable .wrapper .item .item-inner {
  text-align: center;
  width: 300rpx;
  height: 600rpx;
  transform: translateX(-300rpx) rotate(60deg); 
  transform-origin: right center;
  border-radius: 300rpx 0 0 300rpx;
  font-size: 32rpx;
}

The next key step is to add the overflow: hidden attribute to the item, a triangle appears, and the position of the font is adjusted.

.turntable .wrapper .item {
  position: absolute;
  left: 50%;
  width: 300rpx;
  height: 600rpx;
  border-radius: 0px 300rpx 300rpx 0;
  overflow: hidden;
  transform-origin: left center;
}
.turntable .wrapper .item .item-inner text {
  display: block;
  transform-origin: center;
  transform: translateY(100rpx) translateX(43rpx) rotate(-30deg);
}

After a triangle is drawn, 6 triangles of the same size can be joined together to form a disc. Just modify the rotation angle of each triangle.

.turntable .wrapper .item:nth-child(1) {
  transform: rotate(-30deg);
}

.turntable .wrapper .item:nth-child(2) {
  transform: rotate(-90deg);
}

.turntable .wrapper .item:nth-child(3) {
  transform: rotate(-150deg);
}

.turntable .wrapper .item:nth-child(4) {
  transform: rotate(-210deg);
}

.turntable .wrapper .item:nth-child(5) {
  transform: rotate(-270deg);
}

.turntable .wrapper .item:nth-child(6) {
  transform: rotate(-330deg);
}

Implementing responsive styles

In order to better adapt to different business needs, I made the turntable style responsive, so that I can easily set different styles according to the length of the prize data passed in from the outside. I put the judgment of this step in the wxs module.

<wxs module="computed">
	var rotate = function (index, length) {
		var inital = - (360 / length / 2)
		var averageRotate = 360 / length
		var deg = inital - averageRotate * index
		return 'transform: rotate(' + deg + 'deg);'
	}
	var inner = function (length) {
		var averageRotate = 360 / length
		return 'transform: translateX(-300rpx) rotate(' + averageRotate + 'deg);'
	}
	var text = function (length) {
		var distance = 0
		var rotate = 0
		switch (length) {
			case 6:
				distance = 43
				rotate = 30
				break
			case 8:
				distance = 72
				rotate = 30
				break
			case 4:
				distance = -20
				rotate = 40
				break
		}
		return 'transform: translateY(100rpx) translateX(' + distance + 'rpx) rotate(-45deg);'
	}
	module.exports = {
		rotate: rotate,
		inner: inner,
		text: text
	}
</wxs>

Animation system and winning system

By setting the winning rate and calculating with a circle of 360 degrees, we get a winning range of 0-360. We determine which interval the randomly obtained number belongs to, and use the interval value reward to determine the angle the disc needs to rotate. This is roughly the idea. Let’s start explaining the main ideas.

The angle the disk needs to rotate = reward * the average value of the 6 pieces of a circle + 3 * 360

First, we need to set the winning rates of the six prize areas, which must add up to 1. We then combine the initialized data into a 6-digit array and pass it from outside the component into the component.

prize: [{
        'name': '1 point',
        'winnning': 0.2,
        'count': 1
      },
      {
        'name': 'Thank you for participating',
        'winnning': 0.5,
        'count': 0
      }, {
        'name': '5 points',
        'winnning': 0.05,
        'count': 5
      }, {
        'name': '7 points',
        'winnning': 0.05,
        'count': 7
      }, 
      {
        'name': '3 points',
        'winnning': 0.1,
        'count': 3
      }, 
      {
        'name': '4 points',
        'winnning': 0.1,
        'count': 4
      }
    ],

The winning range of 0-360 is calculated using a circle as 360 degrees.

getRange(winning) {
   let temp = []
     winning.forEach((item, index) => {
       if (index === 0) {
         temp.push(item['winnning'] * 360)
       } else {
         temp.push(parseInt(temp.slice(-1)) + item['winnning'] * 360)
       }
      })
      return temp
    },

Generate a random integer. Of course, this number must be between 0 and 360. Otherwise, it is meaningless if it exceeds 360 or is less than 0.

let random = Math.round(Math.random() * 360)

After obtaining the random number, determine which prize range it is in and assign the corresponding interval value to the response number reward.

for (let i in winningRange) {
    let currentwinning = winningRange[i] // Current valueif (random < currentwinning) {
          this.setData({
            reward: i
          })
          break
      } else {
        if (i == 0) {
           continue
        }
        if (random >= winningRange[i - 1] && random <= currentwinning) {
           this.setData({
              reward: i
           })
           break
       }
     }
}

Put the main function of clicking to start in onPoint(). When the function starts, it is necessary to determine whether there is still a chance to win a prize and prevent clicking the function to execute the animation while the animation is executing. The required angle is calculated and the animation API animation of the WeChat applet is used to rotate the disc. After the animation ends, the winning information is triggered through the custom component to allow external listeners to receive it.

onPoint() {
      // Average value const averageRotate = 360 / this.properties.prize.length
      // Is there a chance to win a lottery if (this.properties.chance === 0) {
        this.triggerEvent('none')
        return
      }
      // Prevent clicking the start button during rotation if (!this.data.onRotation) {
        this.setData({
          onRotation: true
        })
        this.getReward()
        let deg = this.data.reward * averageRotate + 3 * 360 // At least 3 turns this.animate('.wrapper', [{
            rotate: 0,
            ease: 'ease-in-out'
          },
          {
            rotate: degree,
            ease: 'ease-in-out'
          }
        ], 5000, function () {
          this.setData({
            onRotation: false
          })
          //Send your own lottery information this.triggerEvent('onResult', this.properties.prize[this.data.reward])
        }.bind(this))
      }
    },

Finally, don’t forget to reset the animation before executing it each time to ensure that the animation will rotate to the correct angle next time. Of course I put it in a function so that it can be used outside the component.

onClear(){
   this.clearAnimation('.wrapper')
}

at last

That’s the whole idea. How about it? Isn’t it very simple? The key step to achieve this is to draw the disk. As long as this step is done well, the rest will be much simpler, because the WeChat applet has already done everything for us for the animation implementation part. Finally, if there is a better way, please feel free to discuss it in the comments.
I would like to mention in particular that this turntable project is run in my WeChat applet instance. You can scan the code to enter the applet and see the entry port at the bottom of the homepage.

Turntable code repository: turntable

This is the end of this article on how to implement a lucky wheel game in WeChat mini program. For more relevant mini program lucky wheel game content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!