Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve a lucky turntable Mini Game in WeChat Mini Programs. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Effect picture

Ideas for the development of Mini Program

The development idea has three parts, the first part is to use css to draw the turntable background, the second part is to use wxs syntax to achieve responsive style, the third part is Mini Program built-in animation api to achieve turntable rotation and the realization of randomness through js rotation.

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

How to draw a triangle

To start, write a basic wxml framework.

10 points

I drew two rectangles of the same size, the length and width are 300rpx and 600rpx, respectively, using the position css property to merge the two rectangles.

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

After the merger, I need to separate the two boxes, turn the red box into a semicircle, the blue box swings 60 degrees in time, and the red box swings 30 degrees counterclockwise. Why should I turn like this? because the blue originally swings 30 degrees with the red. And the inner angle of a triangle is 60 degrees. In order to form this 60-degree angle, I need to move the blue 60 degrees in time after the red is laid out, 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 00 300rpx; font-size: 32rpx;}

The next key step is to add the overflow: hidden attribute to item, and a triangle will come out and adjust the position of the font.

.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, six triangles of the same size are drawn so that they can be spliced together to form a disk, simply by changing the rotation angle of the 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);} implement a responsive style

In order to better adapt to different business needs, I change the style of the turntable into a responsive one, so that I can easily set different styles according to the length of the external prize data. I put the judgment of this step in the wxs module.

Var rotate = function (index, length) {var inital =-/ length / 2) var averageRotate = 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} Animation system and winning system

By setting the winning rate, a winning range of 0-360 is obtained by calculating the winning rate of a circle. The random number is used to determine which interval value belongs to, and the interval value reward is used to determine the angle of rotation of the disc. This is probably the way of thinking, so let's start to explain the main ideas.

The angle of the disk to turn = reward * the average value of a circle divided into 6 pieces + 3 * 360

First of all, it is necessary to set the winning rate winning of the six prize areas, which should add up to 1, and combine the initialized data into a 6-digit array from outside the component into the component.

Prize: [{'name':' 1', 'winnning': 0.2,' count': 1}, {'name':' thank you for participating', 'winnning': 0.5,' count': 0}, {'name':' 5', 'winnning': 0.05' 'count': 5}, {' name':'7', 'winnning': 0.05,' count': 7}, {'name':' 3', 'winnning': 0.1,' count': 3}, {'name':' 4', 'winnning': 0.1' 'count': 4}]

The winning range of 0-360 is calculated with a circle of 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, between 0 and 360, otherwise it is meaningless to exceed 360 or less than 0.

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

After the random number is obtained, the prize range is determined and the corresponding interval value is assigned to the response number reward.

For (let i in winningRange) {let currentwinning = winningRange [I] / / current value if (random)

= winningRange [I-1] & & random

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.