当前位置: 首页 > news >正文

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>

相关文章:

uni app 钓鱼小游戏

最近姑娘喜欢玩那个餐厅游戏里的钓鱼 &#xff0c;经常让看广告&#xff0c;然后就点点点... 自己写个吧。小鱼的图片自己搞。 有问题自己改&#xff0c;不要私信我 <template><view class"page_main"><view class"top_linear"><v…...

openssl3.2 - note - Decoders and Encoders with OpenSSL

文章目录 openssl3.2 - note - Decoders and Encoders with OpenSSL概述笔记编码器/解码器的调用链OSSL_STORE 编码器/解码器的名称和属性OSSL_FUNC_decoder_freectx_fnOSSL_FUNC_encoder_encode_fn官方文档END openssl3.2 - note - Decoders and Encoders with OpenSSL 概述 …...

分享几个 Selenium 自动化常用操作

最近工作会用到selenium来自动化操作一些重复的工作&#xff0c;那么在用selenium写代码的过程中&#xff0c;又顺手整理了一些常用的操作&#xff0c;分享给大家。 常用元素定位方法 虽然有关selenium定位元素的方法有很多种&#xff0c;但是对于没有深入学习&#xff0c;尤…...

【Python】【数据类型】List (列表) 的常见操作

1. 创建 使用内置函数list()将字符串创建为列表 list1 [a, b, c, d] print(list1 , list1) # list1 [a, b, c, d] list1 list(abcd) print(list1) # [a, b, c, d]使用列表推导式创建列表 list1 [x for x in range(1, 10)] print(list1) # [1, 2, 3, 4, 5, 6, 7, 8, 9]多…...

【C语言】病人信息管理系统

本设计实现了一个病人信息管理系统,通过链表数据结构来存储和操作病人的信息。用户可以通过菜单选择录入病人信息、查找病人信息、修改病人信息、删除病人信息、查看所有病人信息和查看专家信息等操作,还可以根据病人的科室、姓名、性别和联系方式进行查找,以及支持修改病人…...

Java Spring Boot 接收时间格式的参数

报错 JSON parse error: Cannot deserialize value of type java.time.LocalDateTime from String “2024-03-14 12:30:00”: Failed to deserialize java.time.LocalDateTime: (java.time.format.DateTimeParseException) Text ‘2024-03-14 12:30:00’ could not be parsed a…...

【C++】实现红黑树

目录 一、认识红黑树1.1 概念1.2 定义 二、实现红黑树2.1 插入2.2 与AVL树对比 一、认识红黑树 1.1 概念 红黑树是一个二叉搜索树&#xff0c;与AVL树相比&#xff0c;红黑树不再使用平衡因子来控制树的左右子树高度差&#xff0c;而是用颜色来控制平衡&#xff0c;颜色为红色…...

爬虫(六)

复习回顾: 01.浏览器一个网页的加载全过程1. 服务器端渲染html的内容和数据在服务器进行融合.在浏览器端看到的页面源代码中. 有你需要的数据2. 客户端(浏览器)渲染html的内容和数据进行融合是发生在你的浏览器上的.这个过程一般通过脚本来完成(javascript)我们通过浏览器可以…...

最长连续序列 - LeetCode 热题 3

大家好&#xff01;我是曾续缘&#x1f49d; 今天是《LeetCode 热题 100》系列 发车第 3 天 哈希第 3 题 ❤️点赞 &#x1f44d; 收藏 ⭐再看&#xff0c;养成习惯 最长连续序列 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素…...

运营模型—RFM 模型

运营模型—RFM 模型 RFM 是什么其实我们前面的文章介绍过,这里我们不再赘述,可以参考运营数据分析模型—用户分层分析,今天我们要做的事情是如何落地RFM 模型 我们的数据如下,现在我们就开始进行数据处理 数据预处理 因为数据预处理没有一个固定的套路,都是根据数据的实…...

YOLOv9|加入2023Gold YOLO中的GD机制!遥遥领先!

专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;助力高效涨点&#xff01;&#xff01;&#xff01; 一、Gold YOLO摘要 在过去的几年里&#xff0c;YOLO系列模型已经成为实时目标检测领域的领先方法。许多研究通过修改体系结构、增加数据和设计新的损…...

WRF模型运行教程(ububtu系统)--III.运行WRF模型(官网案例)

零、创建DATA目录 # 1.创建一个DATA目录用于存放数据&#xff08;一般为fnl数据&#xff0c;放在Build_WRF目录下&#xff09;。 mkdir DATA # 2.进入 DATA cd DATA 一、WPS预处理 在模拟之前先确定模拟域&#xff08;即模拟范围&#xff09;,并进行数据预处理&#xff08…...

html和winform webBrowser控件交互并播放视频(包含转码)

1、 为了使网页能够与winform交互 将com的可访问性设置为真 [System.Security.Permissions.PermissionSet(System.Security.Permissions.SecurityAction.Demand, Name "FullTrust")][System.Runtime.InteropServices.ComVisibleAttribute(true)] 2、在webBrow…...

Neo4j 批量导入数据 从官方文档学习LOAD CSV 命令 小白可食用版

学习LOAD CSV&#x1f680; 在使用Neo4j进行大量数据导入的时候&#xff0c;发现如果用代码自动一行一行的导入效率过低&#xff0c;因此明白了为什么需要用到批量导入功能&#xff0c;在Neo4j中允许批量导入CSV文件格式&#xff0c;刚开始从网上的中看了各种半残的博客或者视频…...

Day43-2-企业级实时复制intofy介绍及实践

Day43-2-企业级实时复制intofy介绍及实践 1. 企业级备份方案介绍1.1 利用定时方式&#xff0c;实现周期备份重要数据信息。1.2 实时数据备份方案1.3 实时复制环境准备1.4 实时复制软件介绍1.5 实时复制inotify机制介绍1.6 项目部署实施1.6.1 部署环境准备1.6.2 检查Linux系统支…...

2024年AI辅助研发趋势深度解析:科技革新与效率提升的双重奏

随着人工智能技术的迅猛发展&#xff0c;AI辅助研发正逐渐成为科技界和工业界的热门话题。特别是在2024年&#xff0c;这一趋势将更加明显&#xff0c;AI辅助研发将在各个领域展现出强大的潜力和应用价值。 首先&#xff0c;AI辅助研发将进一步提升研发效率。传统的研发模式往…...

bash: mysqldump: command not found

问题&#xff1a;在linux上执行mysql备份的时候&#xff0c;出现此异常 mysqldump命令找不到 解决&#xff1a; 1、找到mysql目录&#xff08;找到mysql可执行命令目录&#xff09; which mysql 有图可知&#xff0c;mysql安装在&#xff1a; /usr1/local/java/mysql 2、my…...

hcie数通和云计算选哪个好?

1. 基础知识与技能要求 数通技术是网络技术的核心&#xff0c;它涉及到网络协议、路由交换、网络安全等多个方面。如果你是一名网络工程师或开发者&#xff0c;想要在数通领域有所建树&#xff0c;你需要具备扎实的基础知识和丰富的实战经验。 云计算则更注重于虚拟化、存储、网…...

浅易理解:非极大抑制NMS

什么是非极大抑制NMS 非极大值抑制&#xff08;Non-Maximum Suppression&#xff0c;简称NMS&#xff09;是一种在计算机视觉和图像处理领域中广泛使用的后处理技术&#xff0c;特别是在目标检测任务中。它的主要目的是解决目标检测过程中出现的重复检测问题&#xff0c;即对于…...

C语言如何进⾏字符数组的复制?

一、问题 有两个字符数组a和b&#xff0c;a的值是“Good Bye” &#xff0c;b的值是 “Bye Bye”&#xff0c;现在要把b 复制到a中&#xff0c;使a变成“Bye Bye”&#xff0c;应该怎么做&#xff1f; 二、解答 在字符串操作中&#xff0c;字符串复制是⽐较常⽤的操作之⼀。在…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

字符串哈希+KMP

P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...