iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何在微信小程序实现一个幸运转盘小游戏
  • 493
分享到

如何在微信小程序实现一个幸运转盘小游戏

2024-04-02 19:04:59 493人浏览 独家记忆
摘要

本人主要介绍如何在微信小程序里面开发一个幸运转盘的小游戏,里面主要用到javascript和 CSS 语法,就可以轻松实现一个简单的幸运转盘(以6个奖品区为例)。 前言 本次教程需

本人主要介绍如何在微信小程序里面开发一个幸运转盘的小游戏,里面主要用到javascriptCSS 语法,就可以轻松实现一个简单的幸运转盘(以6个奖品区为例)。

前言

本次教程需要你掌握一定量 javascript 和 css 基础知识,并且你需要有小程序一定的开发经验,具体需要掌握知识点有:

  • css 的 position、transfORM、transition、overflow
  • javascript基本随机算法
  • wxs语法
  • 小程序内置动画api

效果图

小程序开发思路

开发思路有三部分,第一部分是用css绘制转盘背景,第二部分是利用 wxs 语法实现响应式样式 ,第三部分是小程序内置动画api实现转盘的转动以及通过js转动随机性的实现。

本人主要介绍编写思路,下面就开始我的讲解。

如何画一个三角形

一开始,要写一个基础的 wxml 框架


<view class="turntable">
  <view class="wrapper">
    <view class="item" >
	  <view class="item-inner">
		<text>10分</text>
	  </view>
	</view>
  </view>
</view>

我画了两个大小相同的长方形,长和宽分别是300rpx和600rpx,利用 position css属性,让两个长方形合并在一起。


.turntable {
  display: block;
  width: 100%;
  height: 600rpx;
}
.turntable .wrapper{
  position: relative;
  transform-origin: center;
  width: 100%;
  height: 600rpx;
}

合并之后我需要将两个长方体分离出来,把红色长方体变成半圆形,蓝色长方体顺时摆动60度,红色长方体逆时摆动30度,为什么要这样转,因为蓝色本来随红色逆时摆动30度,而一个三角形内角为60度,为了形成这60度的夹角,我需要红色摆完之后再将蓝色顺时移动60度,也就这样形成60度夹角。


.turntable .wrapper .item {
  position: absolute;
  left: 50%;
  width: 300rpx;
  height: 600rpx;
  border-radius: 0px 300rpx 300rpx 0;
  transform-origin: left center;
  transform: rotate(-30deg);
}
.turntable .wrapper .item .item-inner {
  text-align: center;
  width: 300rpx;
  height: 600rpx;
  transform: translateX(-300rpx) rotate(60deg); 
  transform-origin: right center;
  border-radius: 300rpx 0 0 300rpx;
  font-size: 32rpx;
}

接下来关键一步在 item 处增加  overflow: hidden 属性,一个三角形就出来了,并调整字体的位置。


.turntable .wrapper .item {
  position: absolute;
  left: 50%;
  width: 300rpx;
  height: 600rpx;
  border-radius: 0px 300rpx 300rpx 0;
  overflow: hidden;
  transform-origin: left center;
}
.turntable .wrapper .item .item-inner text {
  display: block;
  transform-origin: center;
  transform: translateY(100rpx) translateX(43rpx) rotate(-30deg);
}

一个三角形画出来后,将6个同等大小的三角形并让他们可以拼接在一起组合成一个圆盘,只需各自修改三角的旋转角度即可。


.turntable .wrapper .item:nth-child(1) {
  transform: rotate(-30deg);
}

.turntable .wrapper .item:nth-child(2) {
  transform: rotate(-90deg);
}

.turntable .wrapper .item:nth-child(3) {
  transform: rotate(-150deg);
}

.turntable .wrapper .item:nth-child(4) {
  transform: rotate(-210deg);
}

.turntable .wrapper .item:nth-child(5) {
  transform: rotate(-270deg);
}

.turntable .wrapper .item:nth-child(6) {
  transform: rotate(-330deg);
}

实现响应式样式

为了更好的适应不同业务需求,我把转盘的样式变成响应式,就可以轻松根据用外部传入的 prize 数据的长度来设置不同的样式,我把这一步的判断,放在 wxs 模块那里。


<wxs module="computed">
	var rotate = function (index, length) {
		var inital = - (360 / length / 2)
		var averageRotate = 360 / length
		var deg = inital - averageRotate * index
		return 'transform: rotate(' + deg + 'deg);'
	}
	var inner = function (length) {
		var averageRotate = 360 / length
		return 'transform: translateX(-300rpx) rotate(' + averageRotate + 'deg);'
	}
	var text = function (length) {
		var distance = 0
		var rotate = 0
		switch (length) {
			case 6:
				distance = 43
				rotate = 30
				break
			case 8:
				distance = 72
				rotate = 30
				break
			case 4:
				distance = -20
				rotate = 40
				break
		}
		return 'transform: translateY(100rpx) translateX(' + distance + 'rpx) rotate(-45deg);'
	}
	module.exports = {
		rotate: rotate,
		inner: inner,
		text: text
	}
</wxs>

动画系统和中奖系统

通过设定好的中奖率,以一个圆为360度来计算,得出一个0-360的中奖范围,将随机得来的数判断属于哪个区间值,用区间值 reward 来决定圆盘所需转动的角度。思路大概就是这样,下面开始讲解主要的思路。

圆盘要转的角度 = reward * 一个圆分成6块的平均值  + 3 * 360

首先要设置好6个奖品区的中奖率winning,该中奖率要相加起来为1,把初始化的数据组合成一个6位数的数组从组件外传入进组件内。


prize: [{
        'name': '1分',
        'winnning': 0.2,
        'count': 1
      },
      {
        'name': '谢谢参与',
        'winnning': 0.5,
        'count': 0
      }, {
        'name': '5分',
        'winnning': 0.05,
        'count': 5
      }, {
        'name': '7分',
        'winnning': 0.05,
        'count': 7
      }, 
      {
        'name': '3分',
        'winnning': 0.1,
        'count': 3
      }, 
      {
        'name': '4分',
        'winnning': 0.1,
        'count': 4
      }
    ],

以一个圆为360度来计算出0-360的中奖取值范围。


getRange(winning) {
   let temp = []
     winning.forEach((item, index) => {
       if (index === 0) {
         temp.push(item['winnning'] * 360)
       } else {
         temp.push(parseInt(temp.slice(-1)) + item['winnning'] * 360)
       }
      })
      return temp
    },

生成一个随机整数,当然这数要在0-360,不然超出360或小于0是没有意义的。


let random = Math.round(Math.random() * 360)

获得随机数之后,判断在哪个奖品范围内并把在对应的区间值赋予响应数reward 内。


for (let i in winningRange) {
    let currentwinning = winningRange[i] // 当前取值
       if (random < currentwinning) {
          this.setData({
            reward: i
          })
          break
      } else {
        if (i == 0) {
           continue
        }
        if (random >= winningRange[i - 1] && random <= currentwinning) {
           this.setData({
              reward: i
           })
           break
       }
     }
}

把点击开始的主函数放在onPoint()内,函数开始时需判断是否仍有抽奖机会以及防止在执行动画又点击函数执行动画,经过计算得来所需的角度通过微信小程序的动画api animation 来让圆盘实现转动,动画结束后把中奖信息通过自定义组件触发事件来让组件外监听到。


onPoint() {
      // 平均值
      const averageRotate = 360 / this.properties.prize.length
      // 是否有抽奖机会
      if (this.properties.chance === 0) {
        this.triggerEvent('none')
        return
      }
      // 防止转动时点击开始按钮
      if (!this.data.onRotation) {
        this.setData({
          onRotation: true
        })
        this.getReward()
        let deg = this.data.reward * averageRotate + 3 * 360  // 至少3圈以上
        this.animate('.wrapper', [{
            rotate: 0,
            ease: 'ease-in-out'
          },
          {
            rotate: deg,
            ease: 'ease-in-out'
          }
        ], 5000, function () {
          this.setData({
            onRotation: false
          })
          // 发送自己的抽奖信息
          this.triggerEvent('onResult', this.properties.prize[this.data.reward])
        }.bind(this))
      }
    },

最后别忘了在每次执行动画前,都要先执行动画重置动作,才能保证动画下次转到正确的角度。当然我把其放在一个函数里面,以便组件外也可以使用该函数。


onClear(){
   this.clearAnimation('.wrapper')
}

最后

整个思路就这些,怎么样,是不是很简单呢?实现关键一步是绘制圆盘,只要这一步搞好了,其他就会简单很多,因为动画实现那部分,微信小程序已经帮我们全部弄好了。最后,如果有更好的方法,欢迎在评论讨论一下。
特别要说一下,该转盘项目放在我微信小程序实例中运行,大家可以扫码进去小程序,在主页最下面就能看到入口端口。

转盘代码仓: turntable

到此这篇关于如何在微信小程序实现一个幸运转盘小游戏的文章就介绍到这了,更多相关小程序幸运转盘小游戏内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 如何在微信小程序实现一个幸运转盘小游戏

本文链接: https://www.lsjlt.com/news/123233.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何在微信小程序实现一个幸运转盘小游戏
    本人主要介绍如何在微信小程序里面开发一个幸运转盘的小游戏,里面主要用到javascript和 css 语法,就可以轻松实现一个简单的幸运转盘(以6个奖品区为例)。 前言 本次教程需...
    99+
    2022-11-12
  • 怎么在微信小程序实现一个幸运转盘小游戏
    这篇文章将为大家详细讲解有关怎么在微信小程序实现一个幸运转盘小游戏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图小程序开发思路开发思路有三部分,第一部分是用css绘制转盘背景,第二部分是利用 wxs...
    99+
    2023-06-14
  • 微信小程序如何实现幸运大转盘功能
    这篇文章给大家分享的是有关微信小程序如何实现幸运大转盘功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、项目展示幸运大转盘是一个简单的抽奖小程序参与用户点击抽奖便可抽取轮盘的奖品二、抽奖页抽奖页是一个大轮盘和...
    99+
    2023-06-29
  • 微信小程序实现幸运大转盘功能的示例代码
    目录一、项目展示二、抽奖页三、领奖页一、项目展示 幸运大转盘是一个简单的抽奖小程序 参与用户点击抽奖便可抽取轮盘的奖品 二、抽奖页 抽奖页是一个大轮盘和活动规则 页面形式简单 主要...
    99+
    2022-11-13
  • 微信小程序如何实现翻牌小游戏
    这篇文章主要介绍了微信小程序如何实现翻牌小游戏,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下一、新建一个quick start项...
    99+
    2022-10-19
  • 微信小程序如何实现拼图游戏
    这篇文章给大家分享的是有关微信小程序如何实现拼图游戏的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下页面展示项目链接微信小程序实现拼图游戏项目设计首页面wxml<!--index.wxml--&g...
    99+
    2023-06-20
  • Android微信小程序如何实现猜数字小游戏
    这篇文章主要介绍“Android微信小程序如何实现猜数字小游戏”,在日常操作中,相信很多人在Android微信小程序如何实现猜数字小游戏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Android微信小程序如...
    99+
    2023-06-25
  • 微信小程序如何实现贪吃蛇游戏
    这篇文章主要介绍微信小程序如何实现贪吃蛇游戏,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!先来看看运行效果:具体代码如下:界面布局 pages/snake/snake/snake.w...
    99+
    2022-10-19
  • 微信小程序如何实现井字棋游戏
    这篇文章主要介绍了微信小程序如何实现井字棋游戏的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序如何实现井字棋游戏文章都会有所收获,下面我们一起来看看吧。效果图.wxml<view cla...
    99+
    2023-06-30
  • 微信小程序如何实现五子棋游戏
    本文小编为大家详细介绍“微信小程序如何实现五子棋游戏”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序如何实现五子棋游戏”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。效果图.wxml<view&nb...
    99+
    2023-06-30
  • 如何使用Javascript和CSS3实现一个转盘小游戏
    这篇文章主要介绍了如何使用Javascript和CSS3实现一个转盘小游戏,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体需要掌握的知识点...
    99+
    2022-10-19
  • 微信跳一跳小程序游戏如何开发
    本篇内容主要讲解“微信跳一跳小程序游戏如何开发”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信跳一跳小程序游戏如何开发”吧!  小游戏只有以下两个必要文件:  game.js 小游戏主程序入口...
    99+
    2023-06-26
  • 如何实现一个微信小程序仪表盘组件
    小编给大家分享一下如何实现一个微信小程序仪表盘组件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言最近开发了一个小程序动态仪表...
    99+
    2022-10-19
  • 在微信小程序中跳转到另一个小程序(多种实现方式)
    今天在项目中刚好遇到一个到从当前小程序中跳转到另一个小程序,下面分享一下我总结的几个比较简单的跳转方式吧。 方式一: 1.配置要跳转的appid和小程序页面路径 wx.navigateToMiniProgram({ appId: '目...
    99+
    2023-08-16
    小程序 微信小程序
  • 如何用PHP实现微信小程序的游戏功能?
    如何用PHP实现微信小程序的游戏功能?随着微信小程序的兴起,越来越多的开发者开始关注如何在小程序中实现游戏功能。PHP作为一种流行的后端语言,可以很好地与小程序进行搭配,实现游戏功能。下面将介绍如何使用PHP来实现微信小程序的游戏功能,并提...
    99+
    2023-10-28
    微信小程序 游戏功能 PHP实现微信小程序
  • 微信小程序双人五子棋游戏如何实现
    今天小编给大家分享一下微信小程序双人五子棋游戏如何实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、项目展示微信小程序项...
    99+
    2023-06-30
  • 微信小程序如何实现车牌键盘
    这篇文章主要介绍“微信小程序如何实现车牌键盘”,在日常操作中,相信很多人在微信小程序如何实现车牌键盘问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序如何实现车牌键盘”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-07-02
  • 微信小程序如何实现摇一摇
    这篇文章将为大家详细讲解有关微信小程序如何实现摇一摇,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。微信小程序目录为了更好的理解小程序和小程序开发,我们首先来看一下项目的目...
    99+
    2022-10-19
  • 微信小程序转发功能如何实现
    这篇文章主要介绍“微信小程序转发功能如何实现”,在日常操作中,相信很多人在微信小程序转发功能如何实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序转发功能如何实现”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-26
  • 微信小程序如何实现转发功能
    这篇文章将为大家详细讲解有关微信小程序如何实现转发功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。微信小程序 转发功能的实现1.当用户将小程序转发到任一群聊之后,可以获...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作