• uni app 钓鱼小游戏

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

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

    1. <template>
    2. 	<view class="page_main">
    3.  
    4. 		<view class="top_linear">
    5. 			<view class="top_mean_left">
    6. 				<text>以钓到 </text>
    7. 				<text class="top_mean_tv">{{ydlist.length}} </text>
    8. 			</view>
    9. 			<view class="top_mean_center">
    10. 				<text> </text>
    11. 				<text class="top_mean_tv"></text>
    12. 			</view>
    13. 			<view class="top_mean_right">
    14. 				<text> </text>
    15. 				<text class="top_mean_tv"></text>
    16. 			</view>
    17.  
    18. 			<view class="top_mean_right">
    19. 				<text> </text>
    20. 				<text class="top_mean_tv"> </text>
    21. 			</view>
    22.  
    23. 		</view>
    24. 		<view class="contentone">
    25. 			<canvas class="canvas_cla" canvas-id="myCanvas" id="myCanvas"></canvas>
    26.  
    27. 		</view>
    28. 		<view class="contenttwo">
    29. 			<canvas class="canvas_cla" canvas-id="myCanvass" @touchstart="touchstart" @touchend="touchend"
    30. 				id="myCanvass" @touchmove="touchmove"></canvas>
    31.  
    32. 		</view>
    33.  
    34.  
    35.  
    36.  
    37.  
    38.  
    39.  
    40. 	</view>
    41. </template>
    42.  
    43. <script>
    44. 	export default {
    45. 		data() {
    46. 			return {
    47. 				canvasWidth: 0,
    48. 				canvasHeight: 0,
    49. 				shuishen: 0,
    50. 				ydlist: [],
    51. 				dyl: {
    52. 					dylimg: '../static/ship.png',
    53. 					dylx: 0,
    54. 					dyly: 0,
    55. 					dylsize: 50,
    56. 					dqjl: 100,
    57. 					speedx: 2,
    58. 					yg: {
    59. 						image: "../static/yg.png",
    60. 						size: 15,
    61. 						sxspeedy: 5
    62. 					}
    63.  
    64. 				},
    65. 				ydtimerX: '',
    66. 				ytimerX: '',
    67. 				ylist: [],
    68. 				yimages: ['../static/yu1.png', '../static/yu2.png', '../static/yu3.png',
    69. 					'../static/yu4.png', '../static/yu5.png', '../static/yu6.png',
    70. 					'../static/yu7.png', '../static/yu8.png', '../static/yu9.png',
    71. 					'../static/yu10.png', '../static/yu11.png', '../static/yu12.png', '../static/yu13.png',
    72. 					'../static/yu14.png', '../static/yu15.png', '../static/yu16.png', '../static/yu17.png',
    73. 					'../static/yu18.png'
    74. 				],
    75. 				ygy: 100,
    76. 				istddyl: false,
    77. 				isxg: false,
    78. 				iswddl: false,
    79.  
    80.  
    81.  
    82.  
    83.  
    84.  
    85. 			};
    86. 		},
    87. 		onLoad() {
    88.  
    89.  
    90. 			this.dyl.yxstartx = this.dyl.dylx + this.dyl.dylsize
    91. 			this.dyl.dyly = this.canvasHeight - this.shuishen - this.dyl.dylsize
    92. 			this.dyl.yxstarty = this.dyl.dyly + this.dyl.dylsize - 10
    93. 			console.log(JSON.stringify(this.ylist))
    94. 		},
    95.  
    96. 		onReady() {
    97. 			const ctx = uni.createCanvasContext('myCanvas');
    98. 			const ctxtwo = uni.createCanvasContext('myCanvass');
    99. 			this.ctx = ctx
    100. 			this.ctxtwo = ctxtwo
    101. 			const canvas = uni.createSelectorQuery().select('#myCanvas');
    102. 			canvas.boundingClientRect(rect => {
    103.  
    104. 				this.canvasWidth = rect.width
    105. 				this.canvasHeight = rect.height
    106. 				this.shuishen = rect.height - 100
    107. 				this.addy()
    108. 			}).exec();
    109.  
    110.  
    111. 			this.drawyu()
    112. 			this.drawdyl()
    113. 			this.yddyl()
    114. 			this.ydy()
    115. 		},
    116.  
    117. 		/**
    118. 		 * 生命周期函数--监听页面卸载
    119. 		 */
    120. 		onUnload: function() {
    121.  
    122. 		},
    123. 		methods: {
    124.  
    125. 			/**
    126. 			 * 触摸屏幕开始 记录开始坐标
    127. 			 */
    128. 			touchstart: function(e) {
    129.  
    130. 				let startx = e.touches[0].x
    131. 				let starty = e.touches[0].y
    132. 				console.log(startx, starty)
    133. 				if (starty < this.canvasHeight - this.shuishen) {
    134. 					if (!this.isxg) {
    135. 						console.log("拖动钓鱼老")
    136. 						this.istddyl = true
    137. 						clearInterval(this.ydtimerX);
    138. 						this.dyl.dylx = startx
    139.  
    140.  
    141. 						this.drawdyl();
    142. 					}
    143. 				} else {
    144. 					if (!this.isxg) {
    145. 						this.ygy = starty
    146. 						this.isxg = true
    147. 						this.dyl.dqjl = this.getRandomInt(40, 100)
    148. 					}
    149.  
    150. 				}
    151.  
    152.  
    153.  
    154. 			},
    155. 			/**
    156. 			 * 触摸屏幕结束 计算
    157. 			 */
    158. 			touchend: function(e) {
    159. 				let x = e.changedTouches[0].x
    160. 				let y = e.changedTouches[0].y
    161. 				if (!this.isxg) {
    162. 					if (this.istddyl) {
    163. 						this.istddyl = false
    164. 						this.yddyl()
    165. 					}
    166. 				} else {
    167.  
    168. 				}
    169. 			},
    170. 			/**
    171. 			 * 触摸屏幕移动  画框
    172. 			 */
    173. 			touchmove: function(e) {
    174. 				let x = e.touches[0].x
    175. 				let y = e.touches[0].y
    176. 				if (!this.isxg) {
    177. 					if (this.istddyl) {
    178. 						this.dyl.dylx = x
    179. 						this.drawdyl();
    180. 					}
    181. 				}
    182.  
    183. 			},
    184. 			addy: function() {
    185. 				console.log("添加" + this.ylist.length)
    186. 				let count = 10 - this.ylist.length
    187. 				console.log("添加" + count)
    188. 				console.log(this.canvasHeight, this.shuishen, this.canvasHeight)
    189. 				// console.log(this.canvasHeight - this.shuishen + 50, this.canvasHeight - 50)
    190. 				for (var i = 0; i <= count; i++) {
    191. 					let bean = {}
    192. 					bean.size = this.getRandomInt(20, 40)
    193. 					bean.x = [0, this.canvasWidth - bean.size][this.getRandomInt(0, 1)]
    194.  
    195. 					bean.y = this.getRandomInt(this.canvasHeight - this.shuishen + 50, this.canvasHeight - 80)
    196. 					bean.image = this.yimages[this.getRandomInt(0, this.yimages.length - 1)]
    197. 					bean.dqjl = this.getRandomInt(0, 100)
    198. 					bean.speedx = this.getRandomInt(1, 3)
    199. 					bean.isbdd = false
    200.  
    201.  
    202.  
    203.  
    204. 					this.ylist.push(bean)
    205. 				}
    206. 			},
    207.  
    208. 			getRandomInt: function(min, max) {
    209. 				min = Math.ceil(min);
    210. 				max = Math.floor(max);
    211. 				return Math.floor(Math.random() * (max - min + 1)) + min;
    212. 			},
    213.  
    214.  
    215.  
    216.  
    217. 			drawdyl: function() {
    218. 				this.ctxtwo.drawImage("../static/shanshui.png", 0,
    219. 					0, this.canvasWidth, this.canvasHeight - this.shuishen);
    220. 				var dyly = this.canvasHeight - this.shuishen - this.dyl.dylsize
    221. 				this.ctxtwo.drawImage(this.dyl.dylimg, this.dyl.dylx, dyly, this
    222. 					.dyl.dylsize, this.dyl.dylsize);
    223. 				this.ctxtwo.draw(); // 绘制到 canvas 上
    224.  
    225. 				// 绘制鱼线（假设是简单的直线）  
    226. 				this.ctxtwo.beginPath();
    227. 				this.ctxtwo.moveTo(this.dyl.dylx + this.dyl.dylsize, dyly + this.dyl.dylsize - 10); // 起点位置  
    228. 				this.ctxtwo.lineTo(this.dyl.dylx + this.dyl.dylsize, this.ygy); // 终点位置  
    229. 				this.ctxtwo.setStrokeStyle('#000000'); // 设置线条颜色  
    230. 				this.ctxtwo.setLineWidth(2); // 设置线条宽度  
    231. 				this.ctxtwo.stroke(); // 绘制线条  
    232.  
    233. 				this.ctxtwo.drawImage(this.dyl.yg.image, this.dyl.dylx + this.dyl.dylsize - this.dyl.yg.size / 3,
    234. 					this.ygy, this.dyl.yg.size,
    235. 					this.dyl.yg.size);
    236.  
    237. 				// 将绘图上下文的内容绘制到 canvas 中  
    238. 				this.ctxtwo.draw(true);
    239.  
    240.  
    241. 			},
    242. 			drawyu: function() {
    243. 				// 设置填充颜色
    244. 				this.ctx.setFillStyle('#1E90FF');
    245.  
    246. 				// 绘制一个填充的长方形，参数分别为：x坐标，y坐标，宽度，高度  
    247. 				this.ctx.fillRect(0, this.canvasHeight - this.shuishen, this.canvasWidth, this.shuishen);
    248.  
    249. 				// 将绘制内容绘制到画布上  
    250.  
    251. 				for (var i = 0; i < this.ylist.length; i++) {
    252. 					var bean = this.ylist[i]
    253.  
    254. 					this.ctx.drawImage(bean.image, bean.x, bean.y, bean.size, bean.size);
    255.  
    256. 				}
    257. 				this.ctx.draw(); // 绘制到 canvas 上
    258. 			},
    259. 			ydy: function() {
    260.  
    261.  
    262.  
    263. 				let that = this;
    264. 				let pzcount = 0
    265. 				// 在x轴上反弹  
    266. 				this.ytimerX = setInterval(() => {
    267.  
    268. 					for (var i = 0; i < this.ylist.length; i++) {
    269. 						var bean = this.ylist[i]
    270. 						if (bean.isbdd) {
    271. 							if (bean.y > 100) {
    272. 								bean.y = this.ygy - this.dyl.yg.sxspeedy
    273.  
    274. 							} else {
    275. 								this.ydlist.push(JSON.parse(JSON.stringify(bean)))
    276.  
    277. 								console.log("收线完成", this.ydlist.length)
    278. 								this.dyl.yg.sxspeedy = 5
    279. 								this.iswddl = false
    280. 								this.ylist.splice(i, 1)
    281. 								this.addy()
    282. 							}
    283. 						} else {
    284. 							bean.x = bean.x + bean.speedx
    285. 							if (bean.x < 0 || bean.x + bean.size > that.canvasWidth) {
    286. 								bean.speedx = -bean.speedx;
    287. 								// bean.isReversed = !bean.isReversed
    288. 							}
    289. 						}
    290.  
    291. 					}
    292.  
    293.  
    294.  
    295.  
    296. 					that.drawyu();
    297. 				}, 100); // 每100毫秒更新一次位置 
    298.  
    299. 			},
    300. 			yddyl: function() {
    301.  
    302. 				let that = this;
    303. 				let pzcount = 0
    304. 				// 在x轴上反弹  
    305. 				this.ydtimerX = setInterval(() => {
    306.  
    307. 					if (!that.isxg) {
    308. 						that.dyl.dylx = that.dyl.dylx + that.dyl.speedx;
    309.  
    310.  
    311. 						if (that.dyl.dylx < 0 || that.dyl.dylx + that.dyl.dylsize > that.canvasWidth) {
    312. 							that.dyl.speedx = -that.dyl.speedx;
    313. 						}
    314. 					} else {
    315. 						if (that.ygy > 100) {
    316. 							that.ygy = that.ygy - that.dyl.yg.sxspeedy
    317.  
    318. 							if (!that.iswddl) {
    319. 								console.log("没调到")
    320. 								that.iswddl = that.isColliding()
    321.  
    322. 							} else {
    323. 								console.log("调到")
    324. 							}
    325. 						} else {
    326. 							that.isxg = false
    327. 							that.ygy = 100
    328. 							that.iswddl = false
    329.  
    330. 						}
    331. 					}
    332.  
    333.  
    334.  
    335.  
    336.  
    337.  
    338. 					that.drawdyl();
    339. 				}, 100); // 每100毫秒更新一次位置  
    340.  
    341.  
    342. 			},
    343.  
    344. 			isColliding: function() {
    345. 				let ygx = this.dyl.dylx + this.dyl.dylsize
    346. 				let ygy = this.ygy
    347. 				let ygsize = this.dyl.yg.size
    348.  
    349. 				for (var i = 0; i < this.ylist.length; i++) {
    350. 					let bean = this.ylist[i]
    351.  
    352. 					if (ygx < bean.x + bean.size && ygx + ygsize > bean.x && ygy < bean.y + bean
    353. 						.size && ygy + ygsize > bean.y) {
    354.  
    355. 						if (this.dyl.dqjl + bean.dqjl >= 100) {
    356. 							bean.isbdd = true
    357. 							this.dyl.yg.sxspeedy = 45 - bean.size
    358. 							return true
    359. 						}
    360.  
    361. 					}
    362.  
    363. 				}
    364.  
    365.  
    366. 				return false
    367. 			},
    368.  
    369.  
    370.  
    371. 		}
    372. 	};
    373. </script>
    374.  
    375. <style scoped>
    376. 	.contentone {
    377. 		width: 100vw;
    378. 		height: 100vh;
    379. 		position: absolute;
    380. 		top: 80rpx;
    381. 		display: flex;
    382. 		justify-content: center;
    383. 	}
    384.  
    385. 	.contenttwo {
    386. 		width: 100vw;
    387. 		height: 100vh;
    388. 		position: absolute;
    389. 		top: 80rpx;
    390. 		display: flex;
    391. 		justify-content: center;
    392. 	}
    393.  
    394. 	.canvas_cla {
    395. 		width: 100vw;
    396. 		height: 100vh;
    397. 	}
    398.  
    399.  
    400. 	.top_linear {
    401. 		display: flex;
    402. 		flex-direction: row;
    403. 		justify-content: space-between;
    404. 		display: flex;
    405. 		flex-direction: row;
    406. 		height: 80rpx;
    407.  
    408. 	}
    409.  
    410. 	.top_mean_left {
    411. 		margin-left: 32rpx;
    412.  
    413. 	}
    414.  
    415. 	.top_mean_right {
    416. 		margin-right: 32rpx;
    417.  
    418. 	}
    419.  
    420. 	.top_mean_tv {
    421. 		color: #07a5a6;
    422. 	}
    423.  
    424.  
    425. 	.page_main {
    426. 		width: 100vw;
    427. 		height: 100vh;
    428. 		background-color: #efefef;
    429. 	}
    430. </style>

  • 相关阅读:
    Vue3.0 VCA语法糖 ＜script setup＞ :VCA模式
    08 MyBatis 注解开发
    spring boot 集成EasyExcel
    Leetcode.712 两个字符串的最小ASCII删除和
    Prometheus & Grafana 的安装
    C++ 内存模型
    【无标题】
    Kotlin高仿微信-第22篇-个人信息-修改昵称
    RobotFramework 自动化测试实战基础篇
    Windows 环境下的 Socket 编程 2 - 地址族与数据序列
  • 原文地址：https://blog.csdn.net/yuehua_zhang/article/details/136740812