推荐阅读:

一。前言

      在前面给大家分享了大转盘的抽奖方式,这是现在游戏使用较多的一种抽奖方式,今天给大家介绍另一抽奖方式——水果机,这是以前街机游戏使用较多的抽奖方式。该方式使用选中奖品的方式来进行抽奖。

二。算法讲解

先声明几个变量来控制选项依次选中的转动效果,可在properties里面声明,以方便调试时修改数值:

		//最大速度
maxSpeed: {
default: 20,
type: cc.Float,
max: 30,
min: 1,
},
//减速时间==加速时间
duration: {
default: 2,
type: cc.Float,
max: 10,
min: 1,
},
//加速度
acc: {
default: 8,
type: cc.Float,
max: 10,
min: 1,
},
gearNum: {
default: 10,
type: cc.Integer,
max: 10,
min: 1,
},

不需要经常修改的变量,声明在onLoad中:

this.wheelState = 0;      //转盘状态  1--加速  2--减速   0--静止
this.curSpeed = 0; //当前速度
this.spinTime = 0; //减速前旋转时间
this.firstAngle = 30; //每个奖品的中间角度
this.gearAngle = 60; //每个奖品的角度
this.finalAngle = 0; //最终结果指定的角度
this.decAngle = 3 * 360;//减速旋转三周

抽奖转动状态设置为3个阶段,0(未转动),1(加速阶段),2(减速状态)。在加速状态时,通过判断转动速度是否达到最大速度来判断下一阶段是继续加速还是开始减速。在减速阶段,通过判断减速阶段需要转动的角度是否等于减速阶段已经转过的角度,从而判断转动是否结束。

三。功能实现

1.加速阶段

		if (self.wheelState == 1)
{
self.spinTime += dt;//加速阶段的时间累计
self.uiRoot.startAward.rotation += self.curSpeed;//每帧后旋转的角度
this.showIndexLight(self.uiRoot.startAward.rotation);//显示指针到达区域的奖品的外发光 if (self.curSpeed <= self.maxSpeed) {
self.curSpeed += self.acc;//修改下一帧速度
} else {
if (self.spinTime < self.duration) {//判断时间是否到
return;
}
//设置目标值
self.finalAngle = self.targetID * self.gearAngle + self.firstAngle;//指针最后停留的位置
self.maxSpeed = self.curSpeed;//当前速度未转动过程中的最大速度
self.wheelState = 2;
}
}

2.减速阶段

		 else if (self.wheelState == 2)
{
var curRo = self.uiRoot.startAward.rotation;
var hadRo = curRo - self.finalAngle;//减速阶段已经转过的角度
self.curSpeed = self.maxSpeed * ((self.decAngle - hadRo) / self.decAngle) + 0.2;//后面加一个数是使指针最后能停下来
self.uiRoot.startAward.rotation += self.curSpeed;
this.showIndexLight(self.uiRoot.startAward.rotation); if ((self.decAngle - hadRo) <= 0) {//判断是否转完
self.wheelState = 0;
self.uiRoot.startAward.rotation = self.finalAngle;
this.showIndexLight(self.uiRoot.startAward.rotation);
//大转盘结束后的一些列操作,根据实际情况需要增加删除
self.ctrolWheelItem(true);
self.uiRoot.close.active = true;
self.uiRoot.startBtn.active = true;
self.uiRoot.close.active = true;
self.uiRoot.sign.interactable = true;
self.uiRoot.wheel.interactable = true;
for (let i = 0; i < self.uiRoot.wheelBg.childrenCount; i++) {
cc.find("item" + i, self.uiRoot.wheelBg).getComponent(cc.Button).interactable = true;
} var data = cls.WheelLayer._srvData.SC_Wheel_Info;
let info = gm.GameData.getBagDataById(data.award[this.targetID].id); self.showRewardBox(data.award[this.targetID].id, info.Icon, data.award[this.targetID].num); console.log("抽奖操作结束,需要同步奖励奖励数据,暂时不知道同步到哪里去");
}

同步指针指到的奖品区域外发光

    //显示指针到达的区域发光
showIndexLight(rot) {
var index = parseInt(rot / 60) % 6;/60代表每个奖品格子的角度,6代表一共6个格式
for (let i = 0; i < this.wheelLight.length; i++) {
this.wheelLight[i].active = false;
}
this.wheelLight[index].active = true;
},

水果机抽奖(CocosCreator)的更多相关文章

  1. 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...

  2. 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...

  3. 《微赢微信公众平台系统5月14最新破解高级运营版+水果机+邀请函+微汽车+微食品+用户CRM》

    <微赢微信公众平台系统5月14最新破解高级运营版+水果机+邀请函+微汽车+微食品+用户CRM> 此版本号眼下是淘宝卖600RMB的,其他VIP源代码论坛也都还没有公布.咱们这里全然免费分享 ...

  4. 手把手教你用JS/Vue/React实现幸运水果机(80后情怀之作)

    项目体验地址 免费视频教程 分别使用原生JS,Vue和React,手把手教你开发一个H5小游戏,快速上手Vue和React框架的使用. 项目截图 在线体验 在线体验 游戏介绍 幸运水果机是一款街机游戏 ...

  5. 从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏

    项目体验地址 免费视频教程 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后 ...

  6. 抽奖动画 - lao虎机抽奖

    本文介绍一个lao虎机抽奖动画的实现,lao虎机抽奖在各类商家营销活动中非常常见,这里主要介绍动画的实现过程,其他细节不做详细分析. ps:lao虎机是敏感词,博客园不允许出现,所有老用拼音. 1. ...

  7. 原生javascript实现老.虎机抽奖点名demo源码思路解析

    想着使用原生Javascript做一个随机点名的小应用, 也可以做抽奖使用. html简单化,人名单可以通过js生成并处理. 可以非常随意的添加修改人名字. 应用想带点特效,比如老.虎机转动的特效. ...

  8. H5水果机,一个网络版的lao hu ji

    该游戏为h5小游戏,纯属娱乐,技术探讨,相关技术在文章结尾,欢迎探讨交流 花了几天时间开发了这款水果lao hu ji,更新了几个版本,还有不足的地方,由于时间有限暂时没有继续更新新版本 未完成的功能 ...

  9. cocos 水果机,老Tiger虎机流水灯,博彩大转盘效果

    原(http://www.cnblogs.com/zisou/p/cocos2d-xZhuanpan.html) 博彩大转盘,转盘抽奖的小系统,这是一个很有意思的游戏模块,游戏中增加这样一些趣味的小模 ...

随机推荐

  1. 以for循环的方式了解var与let的区别

    var是ES5定义变量的一种声明方式. let是ES6定义变量的一种声明方式---可定义局部变量,即定义块级作用域. 以下列简单的函数进行表现二者作用域的不同 在ES6之前,我们都是用var来声明变量 ...

  2. Python_Day1_人人都爱列表

    列表由一系列按特定顺序排列的元素组成.你可以创建包含字母表中所有字母.数字0~9或 所有家庭成员姓名的列表;也可以将任何东西加入列表中,其中的元素之间可以没有任何关系. 鉴于列表通常包含多个元素,给列 ...

  3. List集合源码解读

    一:总述: 主要讲解3个集合 1.ArrayList: 底层是数组,线程不安全: 2.LinkedList: 底层是链表,线程不安全: 3.Vector    底层数据结构是数组.线程安全: 二:Ar ...

  4. 如何简单易懂地描述REST接口编程

    网上很多关于REST的介绍,看起来都是云里雾里的,就像在看论文一样,晦涩难懂, 这里有一个链接大概可以简单明了地描述:https://www.zhihu.com/question/28557115

  5. spring读取xml配置文件(二)

    一.当spring解析完配置文件名的占位符后,就开始refresh容器 @Override public void refresh() throws BeansException, IllegalSt ...

  6. Java实现常见的排序算法

    一.排序算法 常见的排序算法主要分为下面几类: 选择排序 堆排序 冒泡排序 快速排序 插入排序 希尔排序 归并排序 桶式排序 基数排序 本文主要介绍选择排序.堆排序.冒泡排序.快速排序和归并排序的原理 ...

  7. 【iOS】Masonry 自动布局 MASViewConstraint.m:207 错误

    问题详情: Assertion failure 报错原因: make.right.equalTo([_imageView superview]).right.with.offset(-); make. ...

  8. JDBC连接池-C3P0连接

    JDBC连接池-C3P0连接 c3p0连接池的学习英语好的看英文原版      c3p0 - JDBC3 Connection and Statement Pooling 使用c3p0连接池  三种方 ...

  9. Mysql无法启动情况下,如何恢复数据?

    本文适用于,mysql无法启动,但数据文件未丢失的情况. Mysql因意外情况,导致无法启动,数据库未做备份的情况下,如何将数据迁移至其他数据库中. 原数据库地址:192.168.1.100(以下简称 ...

  10. mysql limit分页查询效率比拼

    1.直接使用数据库提供的SQL语句 limit M ,N SELECT * from message limit 0 , 10 ; -- 0.044 SELECT * from message lim ...