推荐阅读:

一。前言

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

二。算法讲解

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

  1. //最大速度
  2. maxSpeed: {
  3. default: 20,
  4. type: cc.Float,
  5. max: 30,
  6. min: 1,
  7. },
  8. //减速时间==加速时间
  9. duration: {
  10. default: 2,
  11. type: cc.Float,
  12. max: 10,
  13. min: 1,
  14. },
  15. //加速度
  16. acc: {
  17. default: 8,
  18. type: cc.Float,
  19. max: 10,
  20. min: 1,
  21. },
  22. gearNum: {
  23. default: 10,
  24. type: cc.Integer,
  25. max: 10,
  26. min: 1,
  27. },

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

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

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

三。功能实现

1.加速阶段

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

2.减速阶段

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

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

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

水果机抽奖(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. python黑帽子学习笔记1:pyqt5 designer+wmi实现进程监视器

    环境说明:python3.6 所需要模块:wmi.pyqt5.pythonMagick 先放上一张成品效果图,如图所示: 界面利用pyqt5的designer实现,画好界面如下图所示: 画好后,保存好 ...

  2. vs2013类模板的修改

    很多人一起写程序,往往都有规定的代码模板,比如要求每个类都有注释,说明开发者是谁,类的功能以及其他信息.如果每次建一个类,手工去复制这些信息很麻烦,也很容易遗漏.我们可以直接修改VS2013创建类的时 ...

  3. Kotlin学习快速入门(2)——条件 数组 循环 方法

    条件 if条件判断 常用的判断和Java一样,这里提一下不同的用法 1.if可以作为三元运算符 val max = if (a > b) a else b 2.使用in判断是否在某个区间 val ...

  4. java实现线程的两种方式

    要求:一个火车站,三个售票员卖出100张票 1.通过继承Thread类实现 实现思路:建立ThreadTest类继承Thread并建立三个线程卖100张票 public class ThreadTes ...

  5. 搭建谷歌浏览器无头模式抓取页面服务,laravel->php->python->docker !!!

    背景: 公司管理系统需要获取企业微信页面的配置参数如企业名.logo.人数等信息并操作,来隐藏相关敏感信息并自定义简化企业号配置流程 第一版已经实现了扫码登录获取cookie,使用该cookie就能获 ...

  6. win10家庭版打开组策略

    新建记事本,输入: @echo off pushd "%~dp0" dir /b C:\Windows\servicing\Packages\Microsoft-Windows-G ...

  7. java 各基本类型转 bytes 数组

    java 将 基本类型转byte[] 数组时,需考虑大端小端问题 1. 大端格式下,基本类型与byte[]互转 BigByteUtil.java package com.ysq.util; impor ...

  8. 值得花费一周研究的算法 -- KMP算法(indexOf)

    KMP算法是由三个科学家(kmp分别是他们名字的首字母)创造出来的一种字符串匹配算法. 所解决的问题: 求文本字符串text内寻找第一次出现字符串s的下标,若未出现返回-1. 例如 text : &q ...

  9. Vector的一些事

    1.利用数组对vector进行初始化方法 当然有许多方法,这里就讲一种.原因简单,其他方式请参见这个博文:http://www.cplusplus.me/1112.html , , , , -}; v ...

  10. sublime text 3 15个常用插件介绍

    1.ColorPicker 功能:调色板(需要输入颜色时,可直接选取颜色) 使用:快捷键Windows: ctrl+shift+c 2.Emmet 功能:编码快捷键,前端必备 使用:在输入代码段后,按 ...