微信小程序实现水果老虎机游戏
发布于 2 年前 作者 liangping 3417 次浏览 来自 分享

游戏介绍

水果老虎机是一款街机游戏，游戏界面由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;
}

​现在基本的样子就出来了

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



​最后整体布局如下：




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


总体布局出来，接下来就是开始写运行逻辑了，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是随机产生的数字让转灯最少运行两圈。


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


 baseNum: 5, //基数，越大投中几率越低


    bigMin: 3, //出现大号的基数


这个基数就是我们小时候常说的老板手里有遥控器，哈哈哈哈，老板还不承认，通过调整基数可随意控制中奖概率，我是这样设计的，通过判断运行次数除基数是否为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


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

























回到顶部