红包
◆ [2024-12-23 星期一 11:3] ◆
您来自:3.147.78.249,欢迎您访问風雲工作室。
◆
收藏本站
◆ | ◆
设为首页
◆
联系站长(腾讯QQ)
5029111 [風雲]
〓
站长当前离线
〓
首 页
论坛交流
游戏频道
无忧脚本
旧版论坛
云服务器
聊 天 室
自助链接
来访记录
访客留言
搜索提供
位置:
風雲工作室
-
论坛交流
-
技术专栏
-
脚本中心
- 【原创】小程序大转盘抽奖代码
返回
主题:【原创】小程序大转盘抽奖代码
風雲
★☆☆☆☆☆☆☆☆☆
积分:58
发帖:62
登录:2024/3/26
注册:2006/9/17
(1楼)
【原创】小程序大转盘抽奖代码
Page({ onLoad(op){ this.cvs = wx.createCanvasContext("draw", this); // 初始缩放比例 var rect = wx.getSystemInfoSync(); this.scale = Math.min(rect.screenWidth, rect.screenHeight) / 100; this.pan = new this.PanClass([ { id: 0, text: "抱歉" }, { id: 7, text: "锤子" }, { id: 9, text: "小米" }, { id: 30, text: "苹果" }, { id: 8, text: "黑莓" }, { id: 5, text: "松果" }, { id: 6, text: "石榴" }, { id: 40, text: "山楂" } ]); this.startPlay(); }, // 点击开始抽奖 doPlay() { this.pan.startRotate(); }, // 清空定时器 onUnload(){ this.die = true; }, // 动画开始播放 startPlay() { if (this.die) return; var cvs = this.cvs; cvs.scale(this.scale, this.scale); cvs.clearRect(0, 0, 100, 100); this.drawFrame().forEach(x => x(cvs)); cvs.draw(); // 每秒50帧 setTimeout(z => this.startPlay(), 1e3 / 50); }, // 绘制场景 drawFrame() { var arr = new Array; // 绘制背景 arr.push(e => { //e.setFillStyle("#abcdef"); //e.fillRect(0, 0, 100, 100); }); // 绘制阴影 arr.push(e => { e.save(); e.translate(50, 90); e.scale(1, 0.15); e.arc(0, 0, 30, 0, Math.PI * 2); e.setFillStyle("rgba(0, 0, 0, 0.3)"); e.fill(); e.restore(); }); // 绘制圆盘 arr.push(e => { e.save(); this.pan.draw(e); e.restore(); }); // 绘制对象一 arr.push(e => { e.save(); e.translate(50, 50); // 旋转 e.rotate(45 * Math.PI / 180); e.setFillStyle("#abcdef"); e.fillRect(-10, -10, 20, 20); e.restore(); }); return arr; }, // 转盘类 PanClass(arr) { var num = arr.length; // 奖品数量 var jiao = 360 / num * Math.PI * 2 / 360; var ost = -jiao / 2 - Math.PI/2; var arrColor = [ "red", "yellow", "green", "blue", "orange", "white" ]; var r = 40; // 圆的半径为40vw var speed = 10; // 旋转速度 var start = false, rotate = 360 / num / -2; var stop, timer = 1e3 / 50; var idList = new Object; // 初始化商品索引 arr.forEach((x, i) => idList[x.id] = i); // 防止颜色冲突 if(num % arrColor.length == 1) arrColor.shift(); // 绘制帧 this.draw = e => { e.translate(50, 50); // 当前帧旋转角度 e.rotate(rotate * Math.PI * 2 / 360); e.setFontSize(4); // 扇形绘制 for(var i = 0; i < num; i++) { e.beginPath(); e.arc(0, 0, 40, ost, jiao + ost); e.lineTo(0, 0); e.setFillStyle(arrColor[ i % arrColor.length ]); e.fill(); e.setFillStyle("black"); e.fillText(arr[i].text, -4, -30); e.rotate(jiao); } }; // 变速器 function fadeRotate(sp1, sp2, sec, func) { sec -= timer; if (sec < 0) return console.log(rotate), func(); // 保留一位小数以提升精度 var spd = (Math.max(sp1, sp2) * sec * sec / 4e6).toFixed(1) - 0; if(sp2 > sp1) spd = sp2 - spd; rotate = (spd + rotate) % 360; setTimeout(z => fadeRotate(sp1, sp2, sec.toFixed(6), func), timer); } // 执行旋转 function doRoate(){ if(!start) return; // 变更角度 rotate = (rotate + speed) % 360; setTimeout(doRoate, timer); if(stop > -1 && Math.abs(rotate - stop) < speed) { // 精度偏移修正 rotate = stop; stopRotate(); } } // 开始旋转 this.startRotate = e => { if(start) return; start = true; stop = -1; rotate = 0; console.log(rotate); // 2秒内速度从1升级到20 fadeRotate(0, speed, 2e3, doRoate); // 6秒后自动结束旋转,并随机抽出奖品 setTimeout(z => { // 生成随机中奖商品的ID var goodsId = arr[Math.floor(Math.random() * num)].id; var idx = idList[goodsId] || 0; console.log("当前奖品是:", arr[idx].text); // 中奖时停止的角度(往右偏移了100度),因为是顺时针转,所以应该反向取奖品索引 stop = (360 / num * (num - idx) + 32) % 360; }, parseInt(Math.random() * 3e3) + 1e3); }; // 停止旋转 var stopRotate = e=> { start = false; console.log(rotate); fadeRotate(speed, 0, 2e3, z => { }); }; } });
[您可以先修改代码再运行]
时间:
2019年1月3日 13:38:50
IP:
已记录
引用
回复
© Copyright 2006-2024,
風雲工作室
All rights reserved.
【
湘ICP备05009306号
】
QQ登录
操作 1 个库,连接 2 次,执行 7 次,耗时 62 毫秒。