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.dylsizethis.dyl.dyly = this.canvasHeight - this.shuishen - this.dyl.dylsizethis.dyl.yxstarty = this.dyl.dyly + this.dyl.dylsize - 10console.log(JSON.stringify(this.ylist))},onReady() {const ctx = uni.createCanvasContext('myCanvas');const ctxtwo = uni.createCanvasContext('myCanvass');this.ctx = ctxthis.ctxtwo = ctxtwoconst canvas = uni.createSelectorQuery().select('#myCanvas');canvas.boundingClientRect(rect => {this.canvasWidth = rect.widththis.canvasHeight = rect.heightthis.shuishen = rect.height - 100this.addy()}).exec();this.drawyu()this.drawdyl()this.yddyl()this.ydy()},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},methods: {/*** 触摸屏幕开始 记录开始坐标*/touchstart: function(e) {let startx = e.touches[0].xlet starty = e.touches[0].yconsole.log(startx, starty)if (starty < this.canvasHeight - this.shuishen) {if (!this.isxg) {console.log("拖动钓鱼老")this.istddyl = trueclearInterval(this.ydtimerX);this.dyl.dylx = startxthis.drawdyl();}} else {if (!this.isxg) {this.ygy = startythis.isxg = truethis.dyl.dqjl = this.getRandomInt(40, 100)}}},/*** 触摸屏幕结束 计算*/touchend: function(e) {let x = e.changedTouches[0].xlet y = e.changedTouches[0].yif (!this.isxg) {if (this.istddyl) {this.istddyl = falsethis.yddyl()}} else {}},/*** 触摸屏幕移动  画框*/touchmove: function(e) {let x = e.touches[0].xlet y = e.touches[0].yif (!this.isxg) {if (this.istddyl) {this.dyl.dylx = xthis.drawdyl();}}},addy: function() {console.log("添加" + this.ylist.length)let count = 10 - this.ylist.lengthconsole.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 = falsethis.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.dylsizethis.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 = 5this.iswddl = falsethis.ylist.splice(i, 1)this.addy()}} else {bean.x = bean.x + bean.speedxif (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.sxspeedyif (!that.iswddl) {console.log("没调到")that.iswddl = that.isColliding()} else {console.log("调到")}} else {that.isxg = falsethat.ygy = 100that.iswddl = false}}that.drawdyl();}, 100); // 每100毫秒更新一次位置  },isColliding: function() {let ygx = this.dyl.dylx + this.dyl.dylsizelet ygy = this.ygylet ygsize = this.dyl.yg.sizefor (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 = truethis.dyl.yg.sxspeedy = 45 - bean.sizereturn 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/542014.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

1.2 课程架构介绍：STM32H5 芯片生命周期管理与安全调试

1.2 课程架构介绍：STM32H5 芯片生命周期管理与安全调试

1.2 课程架构介绍&#xff1a;STM32H5 芯片生命周期管理与安全调试 下面开始学习课程的第二节&#xff0c;简单介绍下STM32H5芯片的生命周期和安全调试&#xff0c;具体课程大家可以观看STM32官方录制的课程&#xff0c;链接&#xff1a;1.2. 课程架构介绍&#xff1a;STM32H5…
阅读更多...
使用IDEA2023创建传统的JavaWeb项目并运行与调试

使用IDEA2023创建传统的JavaWeb项目并运行与调试

日期：2024-0312 作者：dusuanyun 文档环境说明： OS：Deepin 20.9(Linux) JDK: OpenJDK21 Tomcat：10.1.19 IDEA: 2023.3.4 (Ultimate Edition) 本文档默认已经安装JDK及环境变量的配置。 关键词…
阅读更多...
PytorchAPI的使用及在GPU的使用和优化

PytorchAPI的使用及在GPU的使用和优化

API 调用API&#xff1a;和手动实现的思路是一样的。#1&#xff0c;#2这两个步骤是通用的步骤&#xff0c;相当于建立一个模型&#xff0c;之后你具体的数据直接丢进去就行了。只需要按着这样的样式打代码就行&#xff0c;死的东西&#xff0c;不需要你自己创造。 import torc…
阅读更多...
一款Jenkins的综合漏洞利用工具-JenkinsExploit-GUI

一款Jenkins的综合漏洞利用工具-JenkinsExploit-GUI

一、使用 jdk版本 在windows或linux使用jdk8的哪一个版本应该都可以,在macOS里需要jdk8u较高的版本,比如jdk8u321 二、外置payload 从release下载windows_tools,linux_tools或macOS_tools并放在与JenkinsExploit-GUI-*-SNAPSHOT.jar相同的目录,或者可以自行打包tools_source…
阅读更多...
fs模块 之 文件读取

fs模块 之 文件读取

fs 文件读取&#xff1a; 利用文件读取而不是直接打开文本查看的目的是为了实现自动化 读取文件的应用场景:电脑开机/程序运行/播放视频音乐/上传文件... 一、异步读取 &#xff08;1&#xff09;语法&#xff1a;fs.readFile(path,[options],callback); 以之前写的文件写…
阅读更多...
idea maven 项目融合

idea maven 项目融合

背景 &#xff1a;项目A 和项目B 是两个独立的多模块项目&#xff0c;项目A 和项目B &#xff0c;均为独立的数据源 。其中项目B 有两个数据原。 需要将项目B 以多模块的方式融合进项目A。 解决版本。建立项目C&#xff0c;只含有pom的&#xff0c;空项目&#xff0c;项目A和项…
阅读更多...
C++_学习String

C++_学习String

1.标准库中的string类 1. 字符串是表示字符序列的类 2. 标准的字符串类提供了对此类对象的支持&#xff0c;其接口类似于标准字符容器的接口&#xff0c;但添加了专门用于操作单字节字符字符串的设计特性 3. string 类是使用 char( 即作为它的字符类型&#xff0c;使用它的默…
阅读更多...
MySQL—redo log、undo log以及MVCC

MySQL—redo log、undo log以及MVCC

MySQL—redo log、undo log以及MVCC 首先回忆一下MySQL事务的四大特性&#xff1a;ACID&#xff0c;即原子性、一致性、隔离性和持久性。其中原子性、一致性、持久性实际上是由InnoDB中的两份日志保证的&#xff0c;一份是redo log日志&#xff0c;一份是undo log日志&#xff…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：List）

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：List）

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据&#xff0c;例如图片和文本。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。该组件内容区小于一屏时&#xff0c;默认没有回弹效果。…
阅读更多...
16.WEB渗透测试--Kali Linux（四）

16.WEB渗透测试--Kali Linux（四）

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;15.WEB渗透测试--Kali Linux&#xff08;三&#xff09;-CSDN博客 1.crunch简介与使用 C…
阅读更多...
构建通用机器人模型

构建通用机器人模型

构建通用机器人模型需要涉及到机器人的机械设计、控制系统设计以及相应的软件开发。这样的过程涉及到许多专业知识&#xff0c;包括机械工程、电子工程、计算机科学等。以下是一个简化的通用机器人模型构建过程&#xff1a; 定义机器人需求&#xff1a;首先&#xff0c;你需要…
阅读更多...
【SRE系列之docker容器】--dockerfile镜像优化

【SRE系列之docker容器】--dockerfile镜像优化

dockerfile镜像优化 1.1 镜像优化方法 系统镜像采用ubuntu或者alpine&#xff0c;会比centos少1G左右编写业务镜像时从官网拉取镜像&#xff0c;其余配置根据业务需求再配置编写dockerfile时把不用的安装包卸载或者删除尽量减少run命令的使用&#xff08;一个run命令&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023