微信小程序实现水果转盘游戏

游戏介绍

水果老虎机是一款街机游戏，游戏界面由24个方格拼接成一个正方形，每个方格中都有一个不同的水果图形，方格上有一个小灯。玩家使用游戏币选择希望押注的目标，按下开始后，小灯开始绕着正方形中每个格子转。当小灯停下时，如果停在玩家押注的目标上则可赢取相应的游戏币。

物品：游戏中的物品有八种，分别为：苹果、西瓜、木瓜、橙子、铃铛、77、双星，这些物品又分为大小两种。还有BAR图标，分为2种。

赔率：以下为所有固定赔率物品的赔率。·

BAR x100，小BAR x50；77 x40，小77 x10；星星 x30，小星星 x5；西瓜 x30，小西瓜 x5；铃铛 x20，小铃铛 x5；木瓜 x10，小木瓜 x2；桔子 x10，小桔子 x2；苹果 x5，小苹果 x2；榴莲 x0；

当玩家中奖之后，玩家点击“开始”按钮为收分，将得分计入总分，再次点击“开始”按钮为按照上一次押注再次进行游戏。如果玩家要重新押注，在押注物品上直接押注即可。在押注的同时会将中奖的金额收入“当前余额”区中。

如果玩家没有中奖，则玩家点击“开始”按钮为按照上一次押注再次进行游戏。

使用技术

我们使用微信小程序，来开发一个集趣味性与技术性于一体的小游戏，项目使用到了以下知识点：

CSS：盒子模型，定位，浮动，CSS3的Flex弹性盒模型，图片，CSS3选择器...
JS：json，sort，数组，定时器，随机数，设计概率...

水果机转盘界面设计

绝对定位和相对定位，设置父级格子的宽高，然后每个子级格子设置比例，我使用百分比，因为rpx会有小小的空隙，这是计算的精确度问题。具体请查看官方的解释。

.ul{position: relative;height: 650rpx;width: 650rpx;margin-left: auto;margin-right: auto;
}
.li{width: 14%;height:14%;list-style: none;text-align: center;line-height: 90rpx;position: absolute;background-size: contain;border: 1rpx solid #f1a7a7;padding: 10rpx;background-color: white;
}

现在基本的样子就出来了

然后加上格子上面的转灯以及玩法说明

<view class="active {{isStop==true?'on':''}}" style="left: {{activeLeft}};top: {{activeTop}};"></view>

最后整体布局如下：

选择下方列表的押注对象，点击加减就可以押注了，按钮支持长按持续累加，反之亦然。

总体布局出来，接下来就是开始写运行逻辑了，js部分开始。

首先想到的是定时器，让转灯动起来，并且是加速转动，最后慢慢地停下来，最少转两圈。

startPlay() {let fruits = that.data.fruits; //转盘数组let flen = fruits.length;let fruitsBet = this.data.fruitsBet; //投注数组let step = flen * 2 + parseInt(Math.random() * 35); //随机数，转盘焦点定位let index = that.data.activeIndex; //转盘数组下标function start() {that.setData({activeLeft: fruits[index].left,activeTop: fruits[index].top})step--;if (step == 0) {clearTimeout(that.data.timerID);index++;if (index == fruits.length) {index = 0;}that.setData({activeIndex: index})that.data.timerID = setTimeout(start, 1800 / step);}start(step)}

activeLeft和activeTop是转灯的定位，fruits是存放转盘图片的数组，每个图片的位置都写在了数组里面，这样通过每次运行index来获取每个图片的位置，赋值给转灯达到转动的效果。step是随机产生的数字让转灯最少运行两圈。

接下来问题就出现了，按照随机数的话，那么老板得赔死。于是开始设计一种概率回收机制

这个基数就是我们小时候常说的老板手里有遥控器，哈哈哈哈，老板还不承认，通过调整基数可随意控制中奖概率，我是这样设计的，通过判断运行次数除基数是否为0，来控制随机数出现的次数，就是达到不能让玩家不中，但又不能让玩家中太多，根本没赢的可能，有时候赢可能正是命运使然，正好出现随机数又正好被你投中。

接下来就是将押注的数组的押注分乘以赔率进行倒序，结果最低的概率最高

let newFruit = fruitsBet.slice().sort(that.compareDown("bet","score")).slice(0,5); //投注倒序

//倒序compareDown(bet,score) {return function (a, b) {var bet1 = a[bet] * a[score];var bet2 = b[bet] * b[score];return bet1 - bet2;}},

抽出最低的五个押注，然后在这五个里面产生随机数。这还没完，因为这五个里面还有大小的区分，就像前面说的那样通过大号基数设置大号出现的概率。

if (runNum % baseNum == 0) {step = flen * 2 + parseInt(Math.random() * 35 );} else {let descid = 0;let bigMin = that.data.bigMin;let seleID = 0;let seleScore = 0;if (runNum % bigMin == 0) {descid = parseInt(Math.random() * newFruitMbIg.length + 1) - 1;seleID = newFruitMbIg[descid].index;seleScore = newFruitMbIg[descid].score;} else {descid = parseInt(Math.random() * newFruitMin.length + 1) - 1;seleID = newFruitMin[descid].index;seleScore = newFruitMin[descid].score;}fruits.forEach((item, i) => {if (item.index == seleID && item.score == seleScore) {if (i < index) {step = flen * 3 - (index - i) + 1;} else {step = flen * 2 + i - index + 1;}}})}

通过这样一通设置后整个水果老虎机基本完成。欢迎大家扫码体验，有问题可以做小程序内反馈。

源码地址：https://download.csdn.net/download/qq_38332693/33769605

您的支持是我共享资源的最大动力，因为要吃饭，哈哈哈哈！