微信小程序娃娃机(vue + uni)_抓娃娃小程序源码-CSDN博客

本文链接：https://blog.csdn.net/H_Jian98/article/details/125206415

微信小程序娃娃机

Canvas 绘制

 //htem 使用canvas 标签 
 <canvas :canvas-id="canvasKey"
:style="{marginTop:navHeight+100+'rpx',width:canvasW+'px',height:canvasH+'px'}"></canvas>
// canvsaId 组件 标识  
// 我这里 使用 
const ctx = uni.createCanvasContext(this.canvasKey, this)
// 友情提示 canvas  绘制需要在 onReady 中 渲染

Canvas 动画

//  既然 小游戏 肯定 少不了 动画交互 
//  假设一个 简单 的  娃娃机 往下 抓娃娃的 往下抓 和 回升的动作 
// 已知 爪子的线 h 100 最高可下将 到 300
const speed = 1 //  i++ i--
const y = 100 // 初始高度与
const maxY = 300 // 最大高度
this.minY = 100// 渲染高度
this.key = 0,
const time = setInterval(()=>{
	
	if (this.minY <= y || this.uTb > maxY) {
		// 如果 渲染高度 不大于最多可下降高度  speed = 1 else -1
			speed = -speed
		if (this.minY > maxY) {
			this.key = 1
		}
	}
	if(this.key == 0) {
		
	// 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，	height）			
		minY  = minY +speed
		//每次 出现渲染 改变 高度 
		drawMove(img, x,minY , width, height)
		ctx.draw() //绘制  只要使用一次！ 最后确定 就行
	} 
	if(this.key == 1) {
		// 应为我们下降的是 娃娃机的绳索 每次 达到一定高度 需要重新 渲染icon /image
		// 我这里 就 不详细写了 就是 改变 状态 样式
		//  若 this.minY = y的时候 清楚 定时器
		if(this.minY =<y) {
			clearInterval(time)
			//调用自己 初次渲染的 canvas
			this.getCanvas()
		}
	}
	
	function drawMove(name, x, y, w, h) {
			// console.log( x, y, w, h);
			ctx.drawImage(name, x, y, w, h)
			ctx.save(); //保存
		}
	}
},20)
//没错 canvas的 动画 就是 定时器 的方法

Canvas 碰撞检测

  //碰撞检测  其实 和 动画 是一个道理 就是 获取 canvas 的 宽度 cw = 300 
  // 若 上面的 动画 this.minY 变成 this.minX 
  // 初始 线条 w = 10  
  if(this.minX<=w || cw<this.minX-w) {
  	speed = -speed
  }

总结和提示

主要细节可以看看 uni 官网

提示

// 如果 你发现 你做动画的时候  出现了 动画平移 却 保存了 定时器的中的上一个图片
可以使用 ctx.clearRect(0, 0, w, h)

防止看不懂还算带上一点我的代码（有点乱还没整理）

this.$nextTick(() => {
		// 无动画判断效果
		this.isShow = true
		if (this.isShow == true) {
			const ctx = uni.createCanvasContext(this.canvasKey, this)
			ctx.beginPath()
			var w = uni.upx2px(610) // canvas 宽度
			this.canvasW = w
			var h = uni.upx2px(600) // canvas 高度
			this.canvasH = h
			// 图1
			var t1 = uni.upx2px(16) // 图1 高度 图二 宽度
			// t2
			var t2H = uni.upx2px(130) // 图2 高度 
			var t2T = uni.upx2px(8) // 图二 顶部 padding
			// t3
			var t3w = uni.upx2px(68) // 图san wdith
			var t3h = uni.upx2px(96) // 图3 height
			// t4 抓 left right 
			var t5w = uni.upx2px(116) // 图san wdith
			var t5h = uni.upx2px(153) // 图3 height
			var t5top = uni.upx2px(26)
			var t5mg = uni.upx2px(16)
			var t5rl = uni.upx2px(37)
			// 水平速度
			var x = t3w / 2 - t1 / 2 + t5w - t3w
			if (!this.move) {
				this.move = t3w / 2 - t1 / 2 + t5w - t3w
			}
			if (!this.move2) {
				this.move2 = t5w - t3w
				this.move3 = t5w - t3w
			}
			var x2 = t5w - t3w
			var x3 = t5w - t3w
			var x4 = 0
			if (!this.move4) {
				this.move4 = 0
			}
			const time = setInterval(() => {
			ctx.clearRect(0, 0, w, h)
			const img1 = '/static/688544560682938368.png'
			const img2 = '/static/cj.png'
			const img3 = '/static/cj1.png'
			const img4 = '/static/left.png'
			const img5 = '/static/right.png'
			// 图1 渲染
			drawMove(img1, 0, 0, w,t1) 
			drawMove(img2, this.move, t2T, t1, t2H)
			drawMove(img5, this.move3, t2T + t2H + t5top, t5w, t5h)
			drawMove(img4, this.move4, t2T + t2H + t5top, t5w, t5h)
			drawMove(img3, this.move2, t2T + t2H, t3w, t3h)
			ctx.draw() //绘制
			if (this.isShow == false) {
				clearInterval(time)
			}
		}, 20)

		function drawMove(name, x, y, w, h) {
			// console.log( x, y, w, h);
			ctx.drawImage(name, x, y, w, h)
			ctx.save(); //保存
		}
	}
})