如何做一个转盘小程序？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何做一个转盘小程序？相关的知识，希望对你有一定的参考价值。

参考技术A

一、介绍

本项目是一个转转盘的小程序，如果你是一个比较纠结的人，那么这个小程序会对你帮助很大。

主要操作如下：

（1）可以选已经预留的转转盘的选项

（2）可以自己自定义设置一些选项，比如喜欢、不喜欢、喜欢、喜欢......

（3）可以设置重复选项、也可以设置不重复选项

（4）可以设置是否有声音

二、功能模块

三、技术架构

   （1）微信开发者工具

  （1）微信小程序原生

四、项目运行

五、系统效果




六、项目地址

私信回复：大转盘

Unity实战篇 | 自己制作一个《大转盘抽奖》 小程序，顺便带你看看抽奖的水可以有多深

📢前言

  • 今天给大家带来一个 转盘抽奖 的小项目

  • 在游戏开发日常中，抽奖的需求可算是超级常见了

  • 那今天就来做这个小项目，顺便了解一下抽奖一般都有什么内幕吧！

🎬转盘抽奖小程序制作

首先来说一下转盘抽奖小程序的组成。

转盘抽奖 主要是由两部分组成，一个是转盘，另一个是指针。

旋转的逻辑也有两种，一个是指针不动，转盘旋转；另一个则是转盘不动，指针旋转。

不论是哪种情况，其实原理都是一样的，我们只需要把旋转的物体改成我们想要的那个即可。

所以这里采用一个 指针固定，转盘旋转 的思路整起！

下面就来一步一步的介绍一下这个转盘抽奖小程序的制作过程吧！

🏳️‍🌈第一步：打开UnityHub新建一个Unity工程

新建工程这一步就不做过多解释了，要做饭先买菜！

打开UnityHub新建一个工程，Unity版本随意，然后等待工程加载完毕。

然后在Assets下新建一个Scene场景和一个Scripts脚本。

准备过程完毕，下面开始制作这个转盘抽奖的小项目！

🏳️‍🌈第二步：搭建一个简单的转盘抽奖UI

既然是转盘抽奖，那么我们首先来搭建一个简单的抽奖UI画面！

来看一下我简单搭建的一个UI，有一个转盘 和 指针，和一个开始抽奖和停止抽奖的按钮。

看起来很简陋没关系！我们先把架子搭建起来，然后后面可以找素材一键换上即可！

只要把转盘抽奖的关键元素添加上即可，这里的关键元素就是指的 转盘 和 指针

🏳️‍🌈第三步：写转盘抽奖的脚本代码

既然是小项目，那自然代码是必不可少的一部分。

下面我们就来写一下这个转盘抽奖的脚本代码怎么写吧。

直接上代码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class zDemo : MonoBehaviour

    /// <summary>
    ///转盘旋转的四种状态
    /// </summary>
    public enum RollState
    
        None,
        SpeedUp,
        SpeedDown,
        End
    

    public Transform RollPanel;//旋转的转盘
    public Button startButton;//开始抽奖的按钮

    RollState curState; //当前转盘的状态


    float allTime = 0;//旋转时间  总的时间
           
    #region 变速段
    float MaxSpeed = 1000;//最大速度
    float factor;//速度因子
    float accelerateTime = 1;//加速到最大速度的时间 ---暂定为1
    float speedUpTime = 3;//加速段的总时间

    float bufferSpeed=1;//减速
    #endregion

    void Start()
    
        startButton.onClick.AddListener(StartTurnWheel);
    

    void Update()
    
        if (curState == RollState.None)
        
            return;
        
        allTime += Time.deltaTime;

        //进入加速阶段
        if (curState == RollState.SpeedUp)
        
            factor = allTime / accelerateTime;
            factor = factor > 1 ? 1 : factor;
            Debug.Log("在加速中：" + factor);
            //转动转盘
            RollPanel.Rotate(new Vector3(0, 0, -1) * factor * MaxSpeed * Time.deltaTime, Space.Self);
        

        //当旋转时间大于等于了加速段的时间就开始进行减速
        if (allTime >= speedUpTime && curState == RollState.SpeedUp)
        
            bufferSpeed -= Time.deltaTime;
            bufferSpeed = bufferSpeed > 0 ? bufferSpeed : 0;

            Debug.Log("在减速中："+ bufferSpeed);
            RollPanel.Rotate(new Vector3(0, 0, -1) * bufferSpeed * 500 * Time.deltaTime, Space.Self);

            if (bufferSpeed <= 0)
            
                curState = RollState.SpeedDown;
            
        
        //减速完毕，转盘停止转动
        if (curState == RollState.SpeedDown)
        
            Debug.Log("转盘停止了！");
            curState = RollState.None;
            bufferSpeed = 1;
        
    

    /// <summary>
    /// 开始旋转转盘
    /// </summary>
    public void StartTurnWheel()
    
        if (curState != RollState.None)
        
            return;
        
        allTime = 0;
        curState = RollState.SpeedUp;

将脚本挂在场景中的Canvas上，然后将开始抽奖的Button赋值。

还有转盘的游戏对象也要拖到脚本中去，然后就可以运行程序看一下效果了！

效果演示如下：

上面这个脚本代码已经可以对转盘进行转动了。

但是他只是随机进行一个转动，我们并不能控制它的旋转角度。

也就是说在转盘的各个角度的概率都是相同的。

但是这咋行呢！这也太公平了，大奖岂不是都要被别人拿走了！

所以请看下一步改进代码，增加抽奖概率！

🏳️‍🌈第四步：改进抽奖机制，增加可控抽奖概率

我们对脚本代码进行改进，必须增加一个任务控制的概率才可以！

顺便找一个转盘的素材给他换上，只需要更改转盘和指针即可！

改进后的脚本代码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class NewLuckyRoll : MonoBehaviour

    /// <summary>
    /// 转盘旋转的四种状态
    /// </summary>
    public enum RollState
    
        None,
        SpeedUp,
        SpeedDown,
        End
    
    public GameObject ResultUI;
    public Text resultTxt;
    public Transform RollPanel;//旋转的转盘
    public Button startBtn;

    RollState curState; //当前转盘的状态
    int rollID;//旋转结果ID--此案例的转盘分为6份

    float allTime = 0;//旋转时间  总的时间
    float endAngle;//最终的角度


    #region 变速段
    float MaxSpeed = 1500;//最大速度
    float factor;//速度因子
    float accelerateTime = 1;//加速到最大速度的时间 ---暂定为1
    float speedUpTime = 3;//加速段的总时间

    float tempAngle;//开始减速段时转盘此时的旋转角度
    float k = 2f; //减速阶段的速度系数 --减速快慢由此决定 

    #endregion

    void Start()
    
        rollID = 0;
        ResultUI.SetActive(false);
        startBtn.onClick.AddListener(StartTurnWheel);
    

    void Update()
    
        if (curState == RollState.None)
        
            return;
        
        allTime += Time.deltaTime;
        //先进入加速阶段
        if (curState == RollState.SpeedUp)
        
            factor = allTime / accelerateTime;
            factor = factor > 1 ? 1 : factor;
            RollPanel.Rotate(new Vector3(0, 0, -1) * factor * MaxSpeed * Time.deltaTime, Space.Self);
        
        //当旋转时间大于等于了加速段的时间就开始进行减速
        if (allTime >= speedUpTime && curState == RollState.SpeedUp)
        
            curState = RollState.SpeedDown;
            tempAngle = GetTempAngle();
            Debug.Log("tempAngle:" + tempAngle);
        
        if (curState == RollState.SpeedDown)
        
            //通过差值运算实现旋转到指定角度（球型插值无法实现大于360°的计算）
            tempAngle = Mathf.Lerp(tempAngle, endAngle, Time.deltaTime * k);
            RollPanel.rotation = Quaternion.Euler(0, 0, tempAngle);
            //RollPanel.eulerAngles = new Vector3(0, 0, tempAngle);

            //旋转结束
            if (Mathf.Abs(tempAngle - endAngle) <= 1)
            
                curState = RollState.None;
                ResultUI.SetActive(true);
            
        
    
    /// <summary>
    /// 开始旋转转盘
    /// </summary>
    public void StartTurnWheel()
    
        ResultUI.SetActive(false);
        if (curState != RollState.None)
        
            return;
        
        allTime = 0;
        tempAngle = 0;
        rollID = GetRandomID();
        Debug.Log("rollID: " + rollID);
        endAngle = (-1) * rollID * 55;
        curState = RollState.SpeedUp;
    

    /// <summary>
    /// 得到当前转盘的旋转角度
    /// </summary>
    /// <returns></returns>
    private float GetTempAngle()
    
        Debug.Log("RollPanel.eulerAngles.z: " + RollPanel.eulerAngles.z);
        return (360 - RollPanel.eulerAngles.z) % 360;
    

    //(0,60)(60,120)(120,180)(180,210)(210,270)(270,360)
    //获取旋转的结果,通过设定的概率然后随机得到结果,我们可以自定义概率
    private int GetRandomID()
    
        //转盘倒着数，因为顺时针旋转，旋转角度为负数
        int id = 0;
        int a = Random.Range(0, 100);
        if (a <= 1)//%1
        
            id = 6;
            resultTxt.text = "恭喜你获得1G流量";
        
        else if (1 < a && a <= 3)  //%2
        
            id = 5;
            resultTxt.text = "恭喜你获得500M流量";
        
        else if (3 < a && a <= 10)  //%7
        
            id = 4;
            resultTxt.text = "恭喜你获得100M流量";
        
        else if (10 < a && a <= 30) // %20
        
            id = 10;
            resultTxt.text = "恭喜你获得50M流量";
        
        else if (30 < a && a <= 60) //%30
        
            id =9;
            resultTxt.text = "恭喜你获得30M流量";
        
        else   //%40
        
            id = 8;
            resultTxt.text = "恭喜你获得10M流量";
        
        return id;

效果如下：

好咧，一个简单的抽奖旋转就写好了，换上一个简单的UI之后还是有模有样的！

代码增加了一个抽奖概率，在我们点击抽奖的那一刻，其实奖品就已经有结果了。

只不过是增加了一个转圈的过程耽误我们的时间罢了。

而且在抽奖的角度来说，每一个奖项的概率应该都是一样的，毕竟是六等分！

但是我们在代码中早已经加了一个概率，抽中最大奖项的概率只有1%

所以说我们有时候表面上看到的公平其实都是假象！

在背地里的概率早都已经写好了，就等着你入坑呢。

🎁源码工程下载

这个转盘抽奖的小程序就算写完了，源码工程在这里，有需要的下载体验即可。

转盘抽奖小项目下载地址：https://download.csdn.net/download/zhangay1998/68820401

👥总结

  • 本篇文章制作了一个简单的《大转盘抽奖》小程序
  • 只需要一个脚本就可以搞定了，是不是很简单又实用呢！
  • 有了这个转盘抽奖的小项目，我们就可以在抽奖的时候进行使用了。
  • 可以将UI换上我们自己的奖品，然后使用代码自定义抽奖概率。
  • 这样一个简单的转盘小程序就完成了，抽奖概率还可以自己掌控。
  • 那本篇文章就到这里结束了，喜欢的话记得点一波三连哦！

🚀往期优质文章分享

🚀 优质专栏分享 🚀
  • 🎄如果感觉文章看完了不过瘾，可以来我的其他 专栏 看一下哦~
  • 🎄比如以下几个专栏：Unity基础知识学习专栏、Unity游戏制作专栏、Unity实战类项目 和 算法学习专栏
  • 🎄可以学习更多的关于Unity引擎的相关内容哦！直接点击下面颜色字体就可以跳转啦！
❤️ 游戏制作专栏 ❤️
🧡 Unity系统学习专栏 🧡
💛 Unity实战类项目 💛
💚 算法千题案例 💚
💙 Python零基础到入门 💙

【游戏开发爱好者社区】活动进行中，每周打卡送书籍等礼品，期待你的加入

🚀 社区活动，重磅来袭 🚀

【游戏开发爱好者社区】在本周重磅新推出【每日打卡】活动

🎁 新玩法，奖励升级！游戏开发爱好者社区：https://bbs.csdn.net/forums/unitygame

社区中心思想：今天你学到了什么？

在社区你可以做些什么： 每日强化知识点，白嫖书籍礼品！

一个人可以走的很快，一群人才能走的更远！🔥爆C站的游戏开发爱好者社区欢迎您的加入！

本期送书如下：

《Unity 实战(第2版)》京东链接：https://item.jd.com/12498427.html

  • 介绍如何使用Unity编写游戏。有经验的程序员可以把它当成Unity的入门书籍。本书的目标十分明确：带领有一些编程经验但没有Unity经验的读者使用Unity开发游戏。
  • 讲授开发1好的方式是完成示例项目，学生通过制作示例来学习，这正是本书采用的方式。本书的各个主题展现为构建游戏示例的步骤，当浏览本书时，鼓励读者在Unity中构建这些游戏。每几章挑选不同的项目来讲解，而不是整本书只开发一个项目。其他有些书籍采用“一个完整项目”的方法讲解，不足之处是如果对前面的章节不感兴趣，就很难跳到中间的章节。
  • 《Unity 实战(第2版)》比大多数Unity书籍(特别是入门书籍)有更严格的编程内容。如果不知道如何编写计算机程序，1好先使用Codecademy之类的资源学习，在学会如何编写程序之后再回到本书。
  • 不要担心具体的编程语言，本书大量使用了C#，也可以使用其他语言的技能。本书的第Ⅰ部分会花时间介绍新的概念，会小心谨慎、一步一步地在Unity中开发第1款游戏，但剩下的章节将更快速地推进，让读者了解多个游戏类型。本书1后会描述部署到各种平台(如Web和移动平台)，但本书的主旨不会提及1终的部署目标，因为Unity与平台无关。
  • 至于游戏开发的其他方面，广泛覆盖的美术学科会稀释本书涵盖的Unity知识，加大Unity外部软件(例如，所使用的动画软件)的比重。关于美术任务的讨论将仅限于Unity或所有游戏开发者都应该知道的方面。

《Python爬虫与反爬虫开发从入门到精通 》京东链接：https://item.jd.com/13345900.html

  • 学爬虫：知原理，抓数据，做分析，用自动化解放双手
  • 会反爬：懂框架，会部署，见招拆招，攻防兼备
  • 在攻与防的对立统一中寻求爬虫技术突破

更多白嫖活动详情：https://bbs.csdn.net/forums/unitygame?typeId=19603

温馨提示： 点击下面卡片可以获取更多编程知识，包括各种语言学习资料，上千套PPT模板和各种游戏源码素材等等资料。更多内容可自行查看哦！

以上是关于如何做一个转盘小程序？的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序-开心大转盘（圆盘指针）代码分析

微信大转盘抽奖先报名后抽奖怎么做？

微信小程序转盘怎么无限制

微信小程序实现抽奖大转盘

微信小程序项目实例——幸运大转盘

微信小程序实现抽奖大转盘