【100个Cocos实例】看完这个,我再也不要当赌狗了...

在这里插入图片描述

引言

探索游戏开发中抽奖转盘的奥秘。

抽奖转盘是一种常见的互动元素,通常用于游戏、营销活动等场景。

本文将介绍一下抽奖转盘原理实现

本文源工程可在文末阅读原文获取,小伙伴们自行前往。

1.抽奖转盘的组成

看看你想要哪个

抽奖转盘的实现涉及多个组成部分,以下是一般抽奖转盘的主要组成:

  1. 转盘界面: 转盘通常是一个圆形或扇形的图形,分为多个奖项区域。
  2. 奖项定义: 定义转盘上的各个奖项,每个奖项包含奖品名称、图标等信息。
  3. 随机数生成器: 抽奖的核心是生成一个随机数,该随机数用于确定用户最终停留在转盘上的位置。
  4. 角度计算: 根据生成的随机数,计算用户最终停留的角度。这涉及将随机数映射到转盘上的角度范围。
  5. 旋转动画: 实现转盘旋转的动画效果,使其在一段时间内以一定的速度旋转。

下面一起来看看抽奖转盘的原理。

2.抽奖转盘的原理

首先我们来看一下抽奖的流程图:

大道从简

其中核心一是后端的抽奖核心算法

概率并不是我们直观看到的均等的1/8(相信大家都是知道的,但是明知山有虎,偏向虎山行)。

事实上会根据不同的奖品设定不同的权重,便宜的物品权重极高(接近90%),贵重的物品权重极低(少于1%,甚至为0)。

从下图可以看到,288金币的权重为33005000金币的权重为200,总权重为10000。所以288金币的概率为33%5000金币的概率为2%

权重虽低,信念要有

核心二则是角度的计算

旋转的角度=当前转盘的角度-当前转盘的角度%360 - 360 / 8 * i - 1080

其中

  • -当前转盘的角度%360是为了让转盘复位,可以从当前旋转继续旋转。
  • -360 / 8 * i则是转盘应该旋转到的角度。
  • -1080 则是为了转盘效果让转盘多转3圈。

套公式即可

下面一起来实现一个抽奖转盘。

3.抽奖转盘的实现

1.环境

引擎版本:Cocos Creator 3.8.1

编程语言:TypeScript

2.资源准备

首先根据抽奖转盘的组成,准备一些图片,其中包括:

  • 一个8等分的转盘。
  • 一个指针。
  • 一些奖励的图片(金币和钻石)。

精美素材

然后简单编辑一下UI界面。

拼UI专业户

其中要注意的是如果图片的中心不是转盘的中心,需要稍微调整一下锚点,否者转起来奇奇怪怪

不忘初心

其次是奖励的子项,可以只拼一个,但是中心也要移动到转盘中心,然后通过克隆和旋转生成其他的。

能用代码别动手

3.编写代码

首先创建一个Turntable组件。

import { _decorator, Component, find, Input, input, instantiate, KeyCode, Label, Node, Sprite, SpriteFrame, tween } from 'cc';
const { ccclass, property } = _decorator;type ItemNode = { icon: Sprite, count: Label };@ccclass('Turntable')
export class Turntable extends Component {
}

然后定义一下奖品的配置,包括奖品类型type、奖品数量count和奖品权重weight。小伙伴们可以写到配置里面去,通过配置驱动

private DropLibs = [
{ type: 1, count: 288, weight: 3300 },
{ type: 2, count: 3, weight: 2200 },
{ type: 1, count: 1000, weight: 1000 },
{ type: 1, count: 2000, weight: 500 },
{ type: 2, count: 10, weight: 600 },
{ type: 1, count: 5000, weight: 200 },
{ type: 2, count: 30, weight: 200 },
{ type: 1, count: 500, weight: 2000 }
];

根据配置初始化转盘,核心方法为:

  • 通过instantiate克隆奖励项。
  • 通过angle属性修改奖励项旋转。
this.TurntableNode = find("Canvas/Turntable/TurntableNode");
let length = this.DropLibs.length;
for (let i = 0; i < length; i++) {let dropLib = this.DropLibs[i];let node: Node;if (i == 0) {node = this.TurntableNode.children[0];}else {node = instantiate(this.TurntableNode.children[0]);this.TurntableNode.addChild(node);}this.ItemNodes.push({ icon: node.getComponentInChildren(Sprite), count: node.getComponentInChildren(Label) });this.ItemNodes[i].icon.spriteFrame = dropLib.type == 1 ? this.iconSpriteFrame1 : this.iconSpriteFrame2;this.ItemNodes[i].count.string = "X" + dropLib.count;this.totalWeight += dropLib.weight;node.angle = 360 / length * i;
}

添加键盘事件,按下空格键开始抽奖并开始播放动画,核心方法为:

  • 通过input.onInput.EventType.KEY_DOWN监听键盘事件。
  • 通过Math.random()产生随机数。
  • 通过tween实现动画。
input.on(Input.EventType.KEY_DOWN, event => {if (event.keyCode == KeyCode.SPACE) {if (this.droping) return;this.droping = true;let length = this.DropLibs.length;let weight = Math.floor(Math.random() * this.totalWeight);let totalWeight = 0;for (let i = 0; i < length; i++) {let dropLib = this.DropLibs[i];totalWeight += dropLib.weight;if (weight < totalWeight) {var rotation = this.TurntableNode.eulerAngles.z;var to = rotation - 1080 - 360 / 8 * i - rotation % 360;var rand = Math.floor(Math.random() * 90) + 90;console.log(dropLib);tween(this.TurntableNode).to(1, { angle: to + rand }).to(3, { angle: to - 360 }, { easing: 'quintOut' }).call(() => {this.droping = false;}).start();break;}}}
})

4.效果演示

在这里插入图片描述

结语

看完这个,概率都是假的,我再也不要当赌狗了…

在哪里可以看到如此清晰的思路,快跟上我的节奏!关注我,和我一起了解游戏行业最新动态,学习游戏开发技巧。

我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。

实不相瞒,想要个在看!请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

推荐专栏:

你知道王者荣耀是怎么实现技能范围指示器的吗?

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列

本文源工程可通过阅读原文获取。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/172158.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot校园车辆管理系统

背景 伴随着社会经济的快速发展&#xff0c;机动车保有量不断增加。不断提高的大众生活水平以及人们不断增长的自主出行需求&#xff0c;人们对汽车的 依赖性在不断增强。汽车已经发展成为公众日常出行的一种重要的交通工具。在如此形势下&#xff0c;高校校园内的机动车数量也…

【KubeSphere】基于AWS在 Linux 上以 All-in-One 模式安装 KubeSphere

文章目录 一、实验配置说明二、实验准备工作1.确认系统版本2. 修改网络DNS3. 关闭SELINUX4. 关闭防火墙 三、实验依赖项安装四、下载 KubeKey五、一键化安装部署六、验证安装结果七、登录KubeSphere管理控制台八、参考链接 一、实验配置说明 本实验基于AWS启动一台新实例&…

I/O多路转接之epoll

承接上文 I/O多路转接之poll-CSDN博客 简介 epoll的相关系统调用 epoll底层原理 编写epoll的server 重新回归一下epoll原理&#xff0c;LT&#xff0c;ET epoll改成ET工作模式 -- 初识(有bug) epoll初识 按照man手册的说法: 是为处理大批量句柄而作了改进的poll. 它是在2.5.4…

CANdelaStudio 使用教程4 编辑State

文章目录 简述1、State Groups2、Dependencies3、 Defaults State1、 会话状态2、 新增会话状态3、 编辑 服务对 State 的依赖关系 State Diagram 简述 1、State Groups 2、Dependencies 在这里&#xff0c;可以编辑现有服务在不同会话状态或安全访问状态的支持情况和状态转换…

python每日一题——7接雨水

题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表…

粒子群算法Particle Swarm Optimization (PSO)的定义,应用优点和缺点的总结!!

文章目录 前言一、粒子群算法的定义二、粒子群算法的应用三、粒子群算法的优点四、粒子群算法的缺点&#xff1a;粒子群算法的总结 前言 粒子群算法是一种基于群体协作的随机搜索算法&#xff0c;通过模拟鸟群觅食行为而发展起来。该算法最初是由Eberhart博士和Kennedy博士于1…

概念解析 | 玻尔兹曼机

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:玻尔兹曼机。 概念解析 | 玻尔兹曼机 引言 随着人工智能技术的飞速发展,玻尔兹曼机作为一种重要的生成模型,受到了广泛的关注。 背景介绍 玻尔兹曼机(Boltzmann Machine)是一…

Mapper 编写有哪几种方式, 使用MyBatis的mapper接口调用时有哪些要求,接口绑定有两种实现方式, MyBatis高级查询

文章目录 Mapper 编写有哪几种方式&#xff1f;接口绑定有两种实现方式使用MyBatis的mapper接口调用时有哪些要求&#xff1f;Mybatis的Xml映射文件中&#xff0c;不同的Xml映射文件&#xff0c;id是否可以重复&#xff1f;简述Mybatis的Xml映射文件和Mybatis内部数据结构之间的…

uniapp+vue基于Android的校园二手跳蚤市场的设计与实现 微信小程序

实现功能&#xff1a; 用户管理&#xff1a;登陆、注册、注销、修改密码、上传头像、修改资料 发布与检索&#xff1a;发布商品、模糊搜索、人气排序、价格排序、时间排序、推送商品&#xff08;协同过滤算法实现个性化推荐&#xff09;&#xff0c;最新发布、分类检索 核心交易…

Java算法小结-Arrays的应用

/* public static String toString(数组) 数组拼接成一个字符串 public static int binarySearch(数组,查找的元素) 二分查找法查找元素 public static int[] copyOf(原数组&#xff0c;新数组的长度) public static int[] copyOfRange(原数组&#xff0c;起始索引&#xff0c;…

1、分布式锁实现原理与最佳实践(一)

在单体的应用开发场景中涉及并发同步时&#xff0c;大家往往采用Synchronized&#xff08;同步&#xff09;或同一个JVM内Lock机制来解决多线程间的同步问题。而在分布式集群工作的开发场景中&#xff0c;就需要一种更加高级的锁机制来处理跨机器的进程之间的数据同步问题&…

安卓系统修图软件(二)

晚上好&#xff0c;自上一次博主分享修图软件之后&#xff0c;今天博主将带来第二期安卓修图软件的推送&#xff0c;个个都是宝藏&#xff0c;建议大家赶紧体验哦。 1.canva可画 如果说有一款手机APP可以与PS媲美&#xff0c;那么一定非canvas莫属。这款强大的修图软件支持海报…

java springboot测试类虚拟MVC环境 匹配请求头指定key与预期值是否相同

上文 java springboot测试类虚拟MVC环境 匹配返回值与预期内容是否相同 (JSON数据格式) 版 中 我们展示 json匹配内容的方式 那么 本文我们来看看Content-Type属性的匹配方式 首先 我们从返回体可以看出 Content-Type 在请求头信息 Headers 中 我们直接将测试类代码更改如下 …

企业文档文件管理软件推荐:提升管理效率与数据安全性

Zoho WorkDrive企业网盘是一种高效的文件管理工具&#xff0c;它不仅可以为组织搭建统一、高效、安全、智能的内容管理体系&#xff0c;还能够提供大规模支撑、海量数据处理、非结构化数据治理、智能挖掘与洞察等服务能力。通过这些服务&#xff0c;企业可以更好地管理和利用其…

站群服务器与普通服务器有哪些区别?

站群服务器"通常指一组被单个实体或组织控制的网络站点&#xff0c;用于提高特定站点在搜索引擎中的排名。在讨论站群服务器与普通服务器的区别时&#xff0c;可能涉及到以下方面&#xff1a; 1. IP地址&#xff1a; 站群服务器&#xff1a; 站群服务器可能涉及多个站点&a…

leetcode 41. 缺失的第一个正数

目录 暴力排序 桶排序 桶排序Set 桶排序分治思想 官方题解 桶排序数组内标记 桶排序额外数组标记&#xff08;更好理解&#xff09; 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额…

Rust在Web开发中的应用

欢迎关注我的公众号lincyang新自媒体&#xff0c;回复关键字【程序员经典书单】&#xff0c;领取程序员的100本经典书单 大家好&#xff01;我是lincyang。 今天我们将一起深入探索Rust在Web开发领域的应用。尽管Rust最初设计用于系统编程&#xff0c;但其性能、安全性和现代并…

Pinia的使用技巧

一、安装 npm install pinia 二、main.ts引入 import { createApp } from vue import App from ./App.vue import { createPinia } from piniaconst app createApp(App) app.use(createPinia()) app.mount(#app)三、定义参数 import { defineStore } from piniatype User …

只狼 资源分享

版本介绍 v1.06版|容量15GB|官方简体中文|支持键盘.鼠标.手柄|赠官方原声4首BGM|赠多项修改器|赠一周目全义手忍具强化通关存档|2020年01月15号更新 只狼中文设置&#xff1a; https://jingyan.baidu.com/article/cb5d6105bc8556005d2fe048.html 只狼键盘对应按键&#xff1…

windows本地dockr的clickhouse链接本地mysql服务,连接不上

不想看过成的&#xff0c;解决办法在最后面 报错信息&#xff1a; SQL 错误 [1000] [08000]: Poco::Exception. Code: 1000, e.code() 0, Exception: Connections to all replicas failed: test1localhost:3306 as user root (version 21.12.3.32 (official build)) , serve…