评论

微信小程序实现水果老虎机游戏

小程序中实现水果老虎机游戏

游戏介绍

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

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


最后一次编辑于  2021-10-22  
点赞 0
收藏
评论
登录 后发表内容