游戏介绍
水果老虎机是一款街机游戏,游戏界面由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
您的支持是我共享资源的最大动力,因为要吃饭,哈哈哈哈!