devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序刮刮乐_小程序刮刮乐逻辑

作者：2023面试高手 | 2024-05-15 01:58:53

赞

踩

小程序刮刮乐逻辑

网上找了个插件，scratch.js下载地址：https://github.com/FrontendMing/scratch-in-wx-miniprogram

个人对scratch.js做了一些修改，设置清除面积达到一定值时（if (clearNum > .2) ），使刮卡刮干净，并触发（结果交互）方法；

测试时 调试基础库（project.config.json 文件中参数："libVersion": "2.2.4",）设置成 2.2.4及以上，否则刮奖操作时没有反应，以下贴出代码


scratch.js代码：

  1. class Scratch {
  2. 	constructor(page, opts) {
  3. 		opts = opts || {};
  4. 		this.page = page;
  5. 		this.canvasId = opts.canvasId || 'canvas';
  6. 		this.width = opts.width || 300;
  7. 		this.height = opts.height || 300;
  8. 		this.maskColor = opts.maskColor || '#dddddd';
  9. 		this.size = opts.size || 15,
  10. 		//this.r = this.size * 2;
  11. 		this.r = this.size;
  12. 		this.area = this.r * this.r;
  13. 		//this.scale = opts.scale || 0.7;
  14. 		this.scale = opts.scale || .5;
  15. 		this.totalArea = this.width * this.height;
  16.  
  17. 		this.init();
  18. 	}
  19. 	init() {
  20. 		this.show = false;
  21. 		this.clearPoints = [];
  22. 		this.ctx = wx.createCanvasContext(this.canvasId, this);
  23. 		this.drawMask();
  24. 		this.bindTouch();
  25. 	}
  26. 	drawMask() {
  27. 		this.ctx.setFillStyle(this.maskColor);
  28. 		this.ctx.fillRect(0, 0, this.width, this.height);
  29. 		this.ctx.draw();
  30. 	}
  31. 	bindTouch() {
  32. 		this.page.touchStart = (e) => {
  33. 			this.eraser(e, true);
  34. 		}
  35. 		this.page.touchMove = (e) => {
  36. 			this.eraser(e, false);
  37. 		}
  38. 		this.page.touchEnd = (e) => {
  39. 			if (this.show) {
  40. 				this.page.clearCanvas();
  41.  
  42. 				this.ctx.clearRect(0, 0, this.width, this.height);
  43. 				this.ctx.draw();
  44. 			}
  45. 		}
  46. 	}
  47. 	eraser(e, bool) {
  48. 		let len = this.clearPoints.length;
  49. 		let count = 0;
  50. 		let x = e.touches[0].x,
  51. 			y = e.touches[0].y;
  52. 		let x1 = x - this.size;
  53. 		let y1 = y - this.size;
  54. 		if (bool) {
  55. 			this.clearPoints.push({
  56. 				x1: x1,
  57. 				y1: y1,
  58. 				x2: x1 + this.r,
  59. 				y2: y1 + this.r
  60. 			})
  61. 		}
  62. 		for (let item of this.clearPoints) {
  63. 			if (item.x1 > x || item.y1 > y || item.x2 < x || item.y2 < y) {
  64. 				count++;
  65. 			} else {
  66. 				break;
  67. 			}
  68. 		}
  69. 		if (len === count) {
  70. 			this.clearPoints.push({
  71. 				x1: x1,
  72. 				y1: y1,
  73. 				x2: x1 + this.r,
  74. 				y2: y1 + this.r
  75. 			});
  76. 		}
  77.  
  78. 		//添加计算已清除的面积，达到标准值后，设置刮卡区域刮干净
  79. 		let clearNum = parseFloat(this.r * this.r * len) / parseFloat(this.scale * this.totalArea);
  80. 		if (!this.show) {
  81. 			this.page.setData({
  82. 				clearNum: parseFloat(this.r * this.r * len) / parseFloat(this.scale * this.totalArea)
  83. 			})
  84. 		}
  85. 		if (clearNum > .2) {
  86. 		//if (len && this.r * this.r * len > this.scale * this.totalArea) {
  87. 			this.show = true;
  88. 		}
  89. 		this.clearArcFun(x, y, this.r, this.ctx);
  90. 		this.ctx.draw(true);
  91. 	}
  92. 	clearArcFun(x, y, r, ctx) {
  93. 		let stepClear = 1;
  94. 		clearArc(x, y, r);
  95.  
  96. 		function clearArc(x, y, radius) {
  97. 			let calcWidth = radius - stepClear;
  98. 			let calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth);
  99.  
  100. 			let posX = x - calcWidth;
  101. 			let posY = y - calcHeight;
  102.  
  103. 			let widthX = 2 * calcWidth;
  104. 			let heightY = 2 * calcHeight;
  105.  
  106. 			if (stepClear <= radius) {
  107. 				ctx.clearRect(posX, posY, widthX, heightY);
  108. 				stepClear += 1;
  109. 				clearArc(x, y, radius);
  110. 			}
  111. 		}
  112. 	}
  113. }
  114.  
  115. export default Scratch


使用demo：
.js：

  1. var app = getApp();
  2.  
  3. import Scratch from '../../utils/scratch.js'
  4.  
  5. let cjIn = false; //防止多次点击
  6.  
  7. Page({
  8.  
  9. 	/**
  10. 	 * 页面的初始数据
  11. 	 */
  12. 	data: {
  13. 		gjEnd: false, //是否刮奖结束
  14. 		showGjBth: true, //是否显示刮奖按钮
  15. 		again: false, //是否显示再来一次按钮
  16.  
  17. 		cjNum: '', //抽奖机会
  18. 		
  19. 		resaultSrc: '', //中奖显示图
  20. 		hasPrize: '', //是否中奖
  21. 		prizeName: '', //奖品名称
  22. 	},
  23. 	
  24. 	
  25. 	//刮奖设置
  26. 	gj() {
  27. 		let This = this;
  28.  
  29. 		if (!This.data.cjNum) {
  30. 			wx.showModal({
  31. 				title: '很抱歉',
  32. 				content: '没有机会啦~',
  33. 				showCancel: false,
  34. 				success(res) {
  35.  
  36. 				}
  37. 			})
  38. 			return;
  39. 		}
  40.  
  41. 		if (cjIn) {
  42. 			return;
  43. 		} else {
  44. 			cjIn = true;
  45. 		}
  46.  
  47. 		// let dataJson = {
  48. 		// 	
  49. 		// };
  50. 		// wx.showLoading({
  51. 		// 	title: '页面加载中',
  52. 		// })
  53. 		//获取抽奖结果
  54. // 		app._post_form(
  55. // 			'获取抽奖结果',
  56. // 			dataJson,
  57. // 			(res) => {
  58. // 				res = res.data;
  59. // 
  60. // 				console.log(res);
  61.  
  62. 				let timeOutTime = 0; //再次 刮奖时要先显示CANVAS，如果显示CANVAS 与 初始化刮奖界面同时进行的话，则不能重置刮奖层状态
  63. 				if (This.data.gjEnd) {
  64. 					//先显示CANVAS
  65. 					This.setData({
  66. 						gjEnd: false, //是否刮奖结束
  67. 					});
  68. 					timeOutTime = 100;
  69. 				}
  70. 				setTimeout(function() {
  71. 					//初始化刮奖界面 ，重置刮奖层状态
  72. 					new Scratch(This, {
  73. 						canvasId: 'canvas-demo',
  74. 						width:570,
  75. 						height:213,
  76. 						//maskColor:'#dddddd',
  77. 						//size:15,
  78. 						//scale:1,
  79. 						scale:.5,
  80. 					})
  81. 					
  82. 					setTimeout(function() {
  83. 						//重置刮奖层状态后，再绑定 获取到的结果 数据，否则会出现结果先出来导致“闪动”的状态
  84. 						This.setData({
  85. 							showGjBth: false, //是否显示刮奖按钮
  86. 							again: false, //是否显示再来一次按钮
  87. 							//cjNum: 0, //抽奖机会
  88. 							cjNum: 1, //抽奖机会
  89. 							resaultSrc: '', //中奖显示图
  90. 							hasPrize: true, //是否中奖
  91. 							prizeName: '奖品名称XXX', //奖品名称
  92. 						});
  93. 					}, 100)
  94. 				}, timeOutTime)
  95. 				
  96. // 				wx.hideLoading();
  97. // 			},
  98. // 			(res) => {
  99. // 				//失败
  100. // 				console.log(res)
  101. //
  102. //				cjIn = false;
  103. //
  104. // 				wx.hideLoading();
  105. // 			},
  106. // 		)
  107.  
  108. 	},
  109. 	//刮卡已刮干净
  110. 	clearCanvas() {
  111. 		let This = this;
  112. 		setTimeout(function() {
  113. 			//隐藏CANVAS
  114. 			This.setData({
  115. 				gjEnd: true, //是否刮奖结束
  116. 			});
  117. 		}, 100)
  118. 		if (!This.data.again) {
  119. 			cjIn = false;
  120. 			
  121. 			console.log('刮卡已刮干净啦！');
  122. 			
  123. 			//刮卡刮干净后 显示的界面 ，显示再刮一次按钮（页面中已注释）
  124. 			This.setData({
  125. 				again: true,
  126. 			});
  127. 		}
  128. 	},
  129. 	
  130. 	
  131. 	//获取抽奖机会次数
  132. 	getNum() {
  133. 		let This = this;
  134.  
  135. 		This.setData({
  136. 			cjNum: 1,
  137. 		});
  138. 	},
  139. 	
  140. 	
  141. 	/**
  142. 	 * 生命周期函数--监听页面加载
  143. 	 */
  144. 	onLoad: function(options) {
  145.  
  146. 	},
  147.  
  148. 	/**
  149. 	 * 生命周期函数--监听页面初次渲染完成
  150. 	 */
  151. 	onReady: function() {
  152.  
  153. 	},
  154.  
  155. 	/**
  156. 	 * 生命周期函数--监听页面显示
  157. 	 */
  158. 	onShow: function() {
  159. 		cjIn = false;
  160. 		let This = this;
  161.  
  162. 		This.setData({
  163. 			gjEnd: false, //是否刮奖结束
  164. 			showGjBth: true, //是否显示刮奖按钮
  165. 			again: false,//是否显示再来一次按钮
  166. 			
  167. 			resaultSrc: '', //中奖显示图
  168. 			hasPrize: '', //是否中奖
  169. 		});
  170.  
  171. 		This.getNum(); //获取抽奖机会次数
  172. 	},
  173.  
  174. 	/**
  175. 	 * 生命周期函数--监听页面隐藏
  176. 	 */
  177. 	onHide: function() {
  178.  
  179. 	},
  180.  
  181. 	/**
  182. 	 * 生命周期函数--监听页面卸载
  183. 	 */
  184. 	onUnload: function() {
  185.  
  186. 	},
  187.  
  188. 	/**
  189. 	 * 页面相关事件处理函数--监听用户下拉动作
  190. 	 */
  191. 	onPullDownRefresh: function() {
  192.  
  193. 	},
  194.  
  195. 	/**
  196. 	 * 页面上拉触底事件的处理函数
  197. 	 */
  198. 	onReachBottom: function() {
  199.  
  200. 	},
  201.  
  202. 	/**
  203. 	 * 用户点击右上角分享
  204. 	 */
  205. 	onShareAppMessage: function() {
  206. 		
  207. 	}
  208. })

.wxss：

  1. page{ box-sizing: border-box; padding-top: 50rpx; background-color: #3b0a8e;}
  2.  
  3. .scratch_body{ width: 630rpx; padding-top: 24rpx; margin: 0 auto; position: relative;}
  4. .scratch_body_bg{ width: 100%; position: absolute; left: 0; top: 0;}
  5.  
  6. .scratch_time{ width: 440rpx; height: 64rpx; margin: 0 auto 20rpx auto; text-align: center; color: #e81903; font-size: 28rpx; position: relative;}
  7. .scratch_time text{ font-size: 42rpx;}
  8.  
  9. .scratch_do{ width: 570rpx; height: 213rpx;/* margin: 0 auto 160rpx auto; */ margin: 0 auto 110rpx auto; position: relative;}
  10. .scratch_do_after , .scratch_do_after_box , .scratch_do_after_box image , .scratch_do_in , .scratch_do_before{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
  11. .scratch_do_after_box{ padding-top: 25rpx; line-height: 82rpx; color: #7a7a7a; font-size: 40rpx; text-align: center;}
  12. .scratch_do_after_box view{ position: relative;}
  13. .scratch_do_after_btn{ width: 210rpx; height: 54rpx; line-height: 54rpx; margin: 0 auto; color: #fff; font-size: 30rpx; border-radius: 27rpx; background-color: #ff3c9d;}
  14.  
  15. .scratch_btn{ width: 310rpx; height: 64rpx; margin: 34rpx auto 0 auto; border: #fff solid 2rpx; border-radius: 32rpx; position: relative;
  16. 	display: flex; justify-content: center; align-items: center;
  17. 	box-shadow: 0 0 15px 5px rgba(102,12,164,.8);
  18. }
  19. .scratch_btn view{ width: 300rpx; height: 52rpx; line-height: 52rpx; text-align: center; color: #3b0a8e; font-size: 30rpx; font-weight: bold; background-color: #fff; border-radius: 26rpx;}
  20.

.wxml：

  1. <view class="scratch_body">
  2. 	<image class="scratch_body_bg" mode="widthFix" src="https://img-blog.csdnimg.cn/2022010702543295939.png"></image>
  3.  
  4. 	<view class="scratch_time">您有 <text>{{cjNum}}</text> 次刮奖机会</view>
  5.  
  6. 	<view class="scratch_do">
  7.  
  8. 		<view class="scratch_do_after">
  9. 			<view wx:if="{{hasPrize}}" class="scratch_do_after_box">
  10. 				<image mode="widthFix" src="https://img-blog.csdnimg.cn/2022010702543242350.png"></image>
  11. 				<view>恭喜你刮中{{prizeName}}</view>
  12. 				<view class="scratch_do_after_btn" bindtap="gj">再来一次</view>
  13. 			</view>
  14. 			<view wx:else class="scratch_do_after_box">
  15. 				<view>很遗憾未中奖</view>
  16. 				<view class="scratch_do_after_btn" bindtap="gj">再来一次</view>
  17. 			</view>
  18. 		</view>
  19.  
  20. 		<canvas wx:if="{{!gjEnd}}" class="scratch_do_in" disable-scroll="false" canvas-id='canvas-demo' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas>
  21.  
  22. 		<cover-image wx:if="{{showGjBth}}" class="scratch_do_before" src="https://img-blog.csdnimg.cn/2022010702543256236.png" bindtap="gj"></cover-image>
  23. 		
  24. 		<!-- <view wx:if="{{again}}" class="scratch_btn again_btn" bindtap="gj">
  25. 			<view>再刮一次</view>
  26. 		</view> -->
  27. 	</view>
  28.  
  29.  
  30. 	<view class="scratch_btn">
  31. 		<view>我的奖品</view>
  32. 	</view>
  33. 	<view class="scratch_btn">
  34. 		<view>活动规则</view>
  35. 	</view>
  36.  
  37. </view>


 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/571078
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号