这类活动你肯定见过


关于转盘类型的活动我相信大家多多少少都接触到了,很多的抽奖界面都是这类型的,今天这篇小文章就简单的总结一下我们游戏中需要实现这样一个效果的时候我们该怎样去做,其实只要是Cocos类型的,不管是C++的还是JS还是Lua他们之间的道理是相同的,类似于下面这样图的效果:

其实这类型的活动效果无非就分下面两种:

1、指针转动

2、底盘转动

但其实这两点在实现方面是完全一样的,我们需要控制的只是那个控件在我们设置的条件下转动。

代码需要注意的点


1、我们不能让指针停止在两个区域之间的线上

2、往往结束转动之后我们还是需要做很多操作的,该怎么写

3、最简单的写法

针对上面三点我们也简单的说说:

1、不能让停止在两个区域之间的线上我们就得设置一个最小的偏移量,保证不让停止在这个偏移量之内

2、我们利用cc.Sequence

3、最简单的方式就是让每个抽奖区域模块化,我们只需要告诉我们封装的转动的代码,你需要停止在哪个位置

核心代码


下面的区域就是我们设置的区块,因为活动中奖概率这种一般都是后台设置好概率计算好中奖结果之后给你数据,你只需要展示一个效果就行,因为这个概率是需要后台配置改变的,不会让移动端把这些写死的,就像很多人玩的王者荣耀一样,其实在点击了抽奖还没有执行抽奖动画之前其实你仔细看看都已经知道自己中了什么了,仔细看你的钻石或者金币刷新就知道了!

-- 开始抽奖
-- stopId 中间区域
-- sprRound 转到的指针
function ActitvityItem2:onStartDrawALotteryOrRaffle(sprRound,stopId) if GlobalUserItem.bSoundAble then
self.music= AudioEngine.playEffect(cc.FileUtils:getInstance():fullPathForFilename("sound/ZPZD.wav"),true)
end
-- ExternalFun.playClickMusic("ZPZD")
--转盘总奖项数
local totalCount = 8
--转动最小圈数
local roundCountMin = 8
--转动最大圈数
local roundCountMax = 14
--所有奖项概率相同时 这样计算每个奖项占的角度 如果概率不同,可以使用table数组来处理
local singleAngle = 360/totalCount
--为了避免不必要的麻烦,在接近2个奖项的交界处,左右偏移n角度的位置,统统不停留 否则停在交界线上,这个值必须小于最小奖项所占角度的1/2
local offsetAngle = 10
--转盘停止位置的最小角度 不同概率时,直接把之前的项相加即可
local angleMin = (stopId-1) * singleAngle
--转盘转动圈数 目前随机 正常情况下可加入力量元素 根据 移动距离*参数 计算转动圈数
local roundCount = math.random(roundCountMin, roundCountMax)
--检查一下跳过角度是否合法 当前奖项角度-2*跳过角度 结果必须>0
--转动角度
local angleTotal = 360*roundCount + angleMin + math.random(offsetAngle, singleAngle-offsetAngle)
-- print('stopId:'..stopId)
-- print('angleMin:'..angleMin)
-- print('roundCount:'..roundCount)
-- print('angleTotal:'..angleTotal)
--复位转盘
sprRound:setRotation(0)
--开始旋转动作使用EaseExponentialOut(迅速加速,然后慢慢减速)
sprRound:runAction(cc.Sequence:create( cc.EaseExponentialInOut:create(cc.RotateBy:create(4.0, angleTotal)),
cc.CallFunc:create(function()
self:onEndAction(stopId)
end)
))

最后,这是核心代码,里面的东西都加了注释的,还有里面几个角度的点需要注意一下的,这个仔细看看就能理解!

Cocos2d-Lua 做一个活动转盘的更多相关文章

  1. 笔记:利用Cocos2dx 3.3 lua 做一个动作类游戏(一)

    在这之前,声明一下: 做不完我是小狗. 没办法,没毅力和恒心,之前的那个Quick Cocos2dx做的横版过关游戏的demo已经转成了3.3的版本了,其实也算是个半成品,战斗,UI啥的都有了,呵呵. ...

  2. 做一个 App 前需要考虑的几件事

    做一个 App 前需要考虑的几件事  来源:limboy的博客   随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 ...

  3. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  4. fir.im Weekly - 如何做一个出色的程序员

    做一个出色的程序员,困难而高尚.本期 fir.im Weekly 精选了一些实用的 iOS,Android 开发工具和源码分享,还有一些关于程序员的成长 Tips 和有意思有质量的线下活动~ How ...

  5. 领导让我重新做一个微信H5页面!

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  6. 做一个App前需要考虑的几件事

    本文转载于文章原文链接,版本归原作者所有! 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 App 有了一定规模后, ...

  7. [转载]做一个 App 前需要考虑的几件事

    本文转自http://limboy.me/tech/2016/07/06/starting-an-app.html ========================================= ...

  8. 【Android】Intent的使用-返回数据给上一个活动

    第一个Activity  A启动另外一个Activity B,B返回数据给A ============================================================= ...

  9. Cocos2d Lua 越来越小样本 内存游戏

    1.游戏简介 一个"记忆"类的比赛游戏.你和电脑对战,轮到谁的回合,谁翻两张牌,假设两张牌一样.就消掉这两张牌,得2分,能够继续翻牌,假设两张牌不一样,就换一个人.直到最后.看谁的 ...

随机推荐

  1. [NOIP2017 TG D2T3]列队

    题目大意:有一个$n \times m$的方阵,第$i$行第$j$列的人的编号是$(i-1) \times m + j$. 现在有$q$个出列操作,每次让一个人出列,然后让这个人所在行向左看齐,再让最 ...

  2. 如何获取iframe DOM的值

    在Web开发时,很多时候会遇到一个问题.我在一个页面嵌入了iframe,并且我想获得这个iframe页面某个元素的值.那么该如何实现这个需求呢? 先来看下演示: 效果演示 iframe1中文本框的值: ...

  3. 线段树模板 CDOJ1057

    UESTCOJ不知道为什么进不去了哇 跟着叉姐的算法讲堂写的板子 叉姐的思路真的好清晰啊,一定是练习的多并且理解的够深了 希望自己也可以每天进步一点点吧 代码: #include <map> ...

  4. angular-translate加载.json文件进行翻译

    这是这个demo的目录结构,总共有两个文件:locale-chinese.json和translation11.html locale-chinese.json文件的内容是: { "beau ...

  5. bzoj 2426 【HAOI2010】工程选址 贪心

    [HAOI2010]工厂选址 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 447  Solved: 308[Submit][Status][Disc ...

  6. vue.单选和多选,纯css自定义单选框样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. es6+最佳入门实践(5)

    5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : nam ...

  8. nginx proxy_buffer_size 解决后端服务传输数据过多,其实是header过大的问题

    nginx proxy_buffer_size 解决后端服务传输数据过多,其实是header过大的问题 这三个参数已设置就搞定了额 proxy_buffer_size 64k; proxy_buffe ...

  9. 着色方案(bzoj 1079)

    Description 有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其中第i种颜色的油漆足够涂ci个木块.所有油漆刚好足够涂满所有木块,即c1+c2+...+ck=n.相邻两个木 ...

  10. Http/2 升级指南

    [转]http://www.syyong.com/architecture/http2.html HTTP/2(最初名为HTTP/2.0)是 WWW 使用的 HTTP 网络协议的主要版本. 它来自早先 ...