推荐阅读:

一。前言

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

二。算法讲解

先声明几个变量来控制选项依次选中的转动效果,可在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. 如何让Git适应敏捷开发流程?

    一旦涉及到版本控制系统,Git实际上代表敏捷开发的水平.Git作为一款强大的开源系统,有较强的灵活性,可以按需匹配任何开发团队的工作流程.而这种分布式相比较集中式来说,可以赋予系统更好的性能特征,且允 ...

  2. TCP三次握手抓包理解

    TCP建立连接需要三次握手,分手需要四次握手,平时在网上看到很多次,但是还没有很理解.为什么分手要多一次?可能是刚开始追求女生的时候比较容易,到分手的时候就比较麻烦了吧... 了解某个东西要从它的基础 ...

  3. Codeforces Round #565 (Div. 3)

    传送门 A. Divide it! •题意 给定一个数n, 每次可以进行下列一种操作 1.如果n可以被2整除,用n/2代替n 2.如果n可以被3整除,用2n/3代替n 3.如果n可以被5整除,用4n/ ...

  4. 【Demo 1】基于object_detection API的行人检测 2:数据制作

    项目文件结构 因为目录太多又太杂,而且数据格式对路径有要求,先把文件目录放出来.(博主目录结构并不规范) 1.根目录下的models为克隆下来的项目.2.pedestrian_data目录下的路径以及 ...

  5. js里的Document对象介绍

    activeElement     返回代表文档中dangqianhuodejiaodianyuansudeduixaing body                    返回代表文档中body元素 ...

  6. Vue 报错 listen EADDRINUSE :::8080

    今天在重启vue项目的时候,发现报了错, listen EADDRINUSE :::8080错误提示 原因:因为另一个项目占用了8080端口,我直接在命令行npm run dev第二个项目,就给出了这 ...

  7. 【Java】Map

    今天用到了键-值对,于是想起了 Java 的 Map,由于之前并不很熟悉,就看了下源码,如下: /* * Copyright (c) 1997, 2006, Oracle and/or its aff ...

  8. 目标检测评价指标mAP 精准率和召回率

    首先明确几个概念,精确率,召回率,准确率 精确率precision 召回率recall 准确率accuracy 以一个实际例子入手,假设我们有100个肿瘤病人. 95个良性肿瘤病人,5个恶性肿瘤病人. ...

  9. MySQL 之 Explain 输出分析

    ​MySQL 之 Explain 输出分析 背景 前面的文章写过 MySQL 的事务和锁,这篇文章我们来聊聊 MySQL 的 Explain,估计大家在工作或者面试中多多少少都会接触过这个.可能工作中 ...

  10. .net core 实现基于 cron 表达式的任务调度

    .net core 实现基于 cron 表达式的任务调度 Intro 上次我们实现了一个简单的基于 Timer 的定时任务,详细信息可以看这篇文章. 但是使用过程中慢慢发现这种方式可能并不太合适,有些 ...