uni app 钓鱼小游戏

最近姑娘喜欢玩那个餐厅游戏里的钓鱼  ，经常让看广告，然后就点点点...

自己写个吧。小鱼的图片自己搞。 有问题自己改，不要私信我

<template>
	<view class="page_main">
 
		<view class="top_linear">
			<view class="top_mean_left">
				<text>以钓到 </text>
				<text class="top_mean_tv">{{ydlist.length}} </text>
			</view>
			<view class="top_mean_center">
				<text> </text>
				<text class="top_mean_tv"></text>
			</view>
			<view class="top_mean_right">
				<text> </text>
				<text class="top_mean_tv"></text>
			</view>
 
			<view class="top_mean_right">
				<text> </text>
				<text class="top_mean_tv"> </text>
			</view>
 
		</view>
		<view class="contentone">
			<canvas class="canvas_cla" canvas-id="myCanvas" id="myCanvas"></canvas>
 
		</view>
		<view class="contenttwo">
			<canvas class="canvas_cla" canvas-id="myCanvass" @touchstart="touchstart" @touchend="touchend"
				id="myCanvass" @touchmove="touchmove"></canvas>
 
		</view>
 
 
 
 
 
 
 
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				canvasWidth: 0,
				canvasHeight: 0,
				shuishen: 0,
				ydlist: [],
				dyl: {
					dylimg: '../static/ship.png',
					dylx: 0,
					dyly: 0,
					dylsize: 50,
					dqjl: 100,
					speedx: 2,
					yg: {
						image: "../static/yg.png",
						size: 15,
						sxspeedy: 5
					}
 
				},
				ydtimerX: '',
				ytimerX: '',
				ylist: [],
				yimages: ['../static/yu1.png', '../static/yu2.png', '../static/yu3.png',
					'../static/yu4.png', '../static/yu5.png', '../static/yu6.png',
					'../static/yu7.png', '../static/yu8.png', '../static/yu9.png',
					'../static/yu10.png', '../static/yu11.png', '../static/yu12.png', '../static/yu13.png',
					'../static/yu14.png', '../static/yu15.png', '../static/yu16.png', '../static/yu17.png',
					'../static/yu18.png'
				],
				ygy: 100,
				istddyl: false,
				isxg: false,
				iswddl: false,
 
 
 
 
 
 
			};
		},
		onLoad() {
 
 
			this.dyl.yxstartx = this.dyl.dylx + this.dyl.dylsize
			this.dyl.dyly = this.canvasHeight - this.shuishen - this.dyl.dylsize
			this.dyl.yxstarty = this.dyl.dyly + this.dyl.dylsize - 10
			console.log(JSON.stringify(this.ylist))
		},
 
		onReady() {
			const ctx = uni.createCanvasContext('myCanvas');
			const ctxtwo = uni.createCanvasContext('myCanvass');
			this.ctx = ctx
			this.ctxtwo = ctxtwo
			const canvas = uni.createSelectorQuery().select('#myCanvas');
			canvas.boundingClientRect(rect => {
 
				this.canvasWidth = rect.width
				this.canvasHeight = rect.height
				this.shuishen = rect.height - 100
				this.addy()
			}).exec();
 
 
			this.drawyu()
			this.drawdyl()
			this.yddyl()
			this.ydy()
		},
 
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
 
		},
		methods: {
 
			/**
			 * 触摸屏幕开始 记录开始坐标
			 */
			touchstart: function(e) {
 
				let startx = e.touches[0].x
				let starty = e.touches[0].y
				console.log(startx, starty)
				if (starty < this.canvasHeight - this.shuishen) {
					if (!this.isxg) {
						console.log("拖动钓鱼老")
						this.istddyl = true
						clearInterval(this.ydtimerX);
						this.dyl.dylx = startx
 
 
						this.drawdyl();
					}
				} else {
					if (!this.isxg) {
						this.ygy = starty
						this.isxg = true
						this.dyl.dqjl = this.getRandomInt(40, 100)
					}
 
				}
 
 
 
			},
			/**
			 * 触摸屏幕结束 计算
			 */
			touchend: function(e) {
				let x = e.changedTouches[0].x
				let y = e.changedTouches[0].y
				if (!this.isxg) {
					if (this.istddyl) {
						this.istddyl = false
						this.yddyl()
					}
				} else {
 
				}
			},
			/**
			 * 触摸屏幕移动  画框
			 */
			touchmove: function(e) {
				let x = e.touches[0].x
				let y = e.touches[0].y
				if (!this.isxg) {
					if (this.istddyl) {
						this.dyl.dylx = x
						this.drawdyl();
					}
				}
 
			},
			addy: function() {
				console.log("添加" + this.ylist.length)
				let count = 10 - this.ylist.length
				console.log("添加" + count)
				console.log(this.canvasHeight, this.shuishen, this.canvasHeight)
				// console.log(this.canvasHeight - this.shuishen + 50, this.canvasHeight - 50)
				for (var i = 0; i <= count; i++) {
					let bean = {}
					bean.size = this.getRandomInt(20, 40)
					bean.x = [0, this.canvasWidth - bean.size][this.getRandomInt(0, 1)]
 
					bean.y = this.getRandomInt(this.canvasHeight - this.shuishen + 50, this.canvasHeight - 80)
					bean.image = this.yimages[this.getRandomInt(0, this.yimages.length - 1)]
					bean.dqjl = this.getRandomInt(0, 100)
					bean.speedx = this.getRandomInt(1, 3)
					bean.isbdd = false
 
 
 
 
					this.ylist.push(bean)
				}
			},
 
			getRandomInt: function(min, max) {
				min = Math.ceil(min);
				max = Math.floor(max);
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
 
 
 
 
			drawdyl: function() {
				this.ctxtwo.drawImage("../static/shanshui.png", 0,
					0, this.canvasWidth, this.canvasHeight - this.shuishen);
				var dyly = this.canvasHeight - this.shuishen - this.dyl.dylsize
				this.ctxtwo.drawImage(this.dyl.dylimg, this.dyl.dylx, dyly, this
					.dyl.dylsize, this.dyl.dylsize);
				this.ctxtwo.draw(); // 绘制到 canvas 上
 
				// 绘制鱼线（假设是简单的直线）  
				this.ctxtwo.beginPath();
				this.ctxtwo.moveTo(this.dyl.dylx + this.dyl.dylsize, dyly + this.dyl.dylsize - 10); // 起点位置  
				this.ctxtwo.lineTo(this.dyl.dylx + this.dyl.dylsize, this.ygy); // 终点位置  
				this.ctxtwo.setStrokeStyle('#000000'); // 设置线条颜色  
				this.ctxtwo.setLineWidth(2); // 设置线条宽度  
				this.ctxtwo.stroke(); // 绘制线条  
 
				this.ctxtwo.drawImage(this.dyl.yg.image, this.dyl.dylx + this.dyl.dylsize - this.dyl.yg.size / 3,
					this.ygy, this.dyl.yg.size,
					this.dyl.yg.size);
 
				// 将绘图上下文的内容绘制到 canvas 中  
				this.ctxtwo.draw(true);
 
 
			},
			drawyu: function() {
				// 设置填充颜色
				this.ctx.setFillStyle('#1E90FF');
 
				// 绘制一个填充的长方形，参数分别为：x坐标，y坐标，宽度，高度  
				this.ctx.fillRect(0, this.canvasHeight - this.shuishen, this.canvasWidth, this.shuishen);
 
				// 将绘制内容绘制到画布上  
 
				for (var i = 0; i < this.ylist.length; i++) {
					var bean = this.ylist[i]
 
					this.ctx.drawImage(bean.image, bean.x, bean.y, bean.size, bean.size);
 
				}
				this.ctx.draw(); // 绘制到 canvas 上
			},
			ydy: function() {
 
 
 
				let that = this;
				let pzcount = 0
				// 在x轴上反弹  
				this.ytimerX = setInterval(() => {
 
					for (var i = 0; i < this.ylist.length; i++) {
						var bean = this.ylist[i]
						if (bean.isbdd) {
							if (bean.y > 100) {
								bean.y = this.ygy - this.dyl.yg.sxspeedy
 
							} else {
								this.ydlist.push(JSON.parse(JSON.stringify(bean)))
 
								console.log("收线完成", this.ydlist.length)
								this.dyl.yg.sxspeedy = 5
								this.iswddl = false
								this.ylist.splice(i, 1)
								this.addy()
							}
						} else {
							bean.x = bean.x + bean.speedx
							if (bean.x < 0 || bean.x + bean.size > that.canvasWidth) {
								bean.speedx = -bean.speedx;
								// bean.isReversed = !bean.isReversed
							}
						}
 
					}
 
 
 
 
					that.drawyu();
				}, 100); // 每100毫秒更新一次位置 
 
			},
			yddyl: function() {
 
				let that = this;
				let pzcount = 0
				// 在x轴上反弹  
				this.ydtimerX = setInterval(() => {
 
					if (!that.isxg) {
						that.dyl.dylx = that.dyl.dylx + that.dyl.speedx;
 
 
						if (that.dyl.dylx < 0 || that.dyl.dylx + that.dyl.dylsize > that.canvasWidth) {
							that.dyl.speedx = -that.dyl.speedx;
						}
					} else {
						if (that.ygy > 100) {
							that.ygy = that.ygy - that.dyl.yg.sxspeedy
 
							if (!that.iswddl) {
								console.log("没调到")
								that.iswddl = that.isColliding()
 
							} else {
								console.log("调到")
							}
						} else {
							that.isxg = false
							that.ygy = 100
							that.iswddl = false
 
						}
					}
 
 
 
 
 
 
					that.drawdyl();
				}, 100); // 每100毫秒更新一次位置  
 
 
			},
 
			isColliding: function() {
				let ygx = this.dyl.dylx + this.dyl.dylsize
				let ygy = this.ygy
				let ygsize = this.dyl.yg.size
 
				for (var i = 0; i < this.ylist.length; i++) {
					let bean = this.ylist[i]
 
					if (ygx < bean.x + bean.size && ygx + ygsize > bean.x && ygy < bean.y + bean
						.size && ygy + ygsize > bean.y) {
 
						if (this.dyl.dqjl + bean.dqjl >= 100) {
							bean.isbdd = true
							this.dyl.yg.sxspeedy = 45 - bean.size
							return true
						}
 
					}
 
				}
 
 
				return false
			},
 
 
 
		}
	};
</script>
 
<style scoped>
	.contentone {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 80rpx;
		display: flex;
		justify-content: center;
	}
 
	.contenttwo {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 80rpx;
		display: flex;
		justify-content: center;
	}
 
	.canvas_cla {
		width: 100vw;
		height: 100vh;
	}
 
 
	.top_linear {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		display: flex;
		flex-direction: row;
		height: 80rpx;
 
	}
 
	.top_mean_left {
		margin-left: 32rpx;
 
	}
 
	.top_mean_right {
		margin-right: 32rpx;
 
	}
 
	.top_mean_tv {
		color: #07a5a6;
	}
 
 
	.page_main {
		width: 100vw;
		height: 100vh;
		background-color: #efefef;
	}
</style>