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.mzph.cn/news/748595.shtml

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

相关文章

react-native使用FireBase实现google登陆

react-native使用FireBase实现google登陆

一、前置操作 首先下载这个包 yarn add react-native-google-signin/google-signin 二、Google cloud配置 Google Cloud 去google控制台新建一个android项目&#xff0c;这时候需要用到你自己创建的keystore的sha1值&#xff0c;然后会让你下载一个JSON文件&#xff0c;先保…
阅读更多...
C#操作MySQL从入门到精通(4)——连接MySQL数据库

C#操作MySQL从入门到精通(4)——连接MySQL数据库

前言 我们创建好数据库、建立好数据库的表以后&#xff0c;我们就需要访问数据库了&#xff0c;比如将数据插入数据库的某张表中等一系列操作&#xff0c;在进行这些操作之前我们需要连接上数据库&#xff0c;本文就是详细讲解如何连接MySQL数据库的。 1、使用Navicat Premiu…
阅读更多...
基于ssm+layui的图书管理系统

基于ssm+layui的图书管理系统

基于ssmlayui的图书管理系统 账户类型分为&#xff1a;管理员&#xff0c;用户管理员私有功能用户私有功能公共功能技术栈功能实现图 视频演示 账户类型分为&#xff1a;管理员&#xff0c;用户 图书管理系统主要登录账户类型为管理员账户与用户账户 管理员私有功能 账户管理…
阅读更多...
PHP 生成图片

PHP 生成图片

1.先确认是否有GD库 echo phpinfo(); // 创建一个真彩色图像 $image imagecreatetruecolor(120, 50);// 分配颜色 $bgColor imagecolorallocate($image, 255, 255, 255); // 白色背景 $textColor imagecolorallocate($image, 230, 230, 230); // 黑色文字// 填充背景 image…
阅读更多...
Java学习笔记（12）

Java学习笔记（12）

包 导包 Final 不能被改变的&#xff0c;修饰方法 类 变量 方法不能被重写 类不能被继承 变量&#xff0c;赋值一次&#xff0c;变成常量&#xff0c;不能再被赋值 final修饰引用数据类型&#xff0c;地址值不能变&#xff0c;里面的内容可以变 字符串是不可变的 源码中使…
阅读更多...
ThreeJs 可视化大屏地图

ThreeJs 可视化大屏地图

效果图&#xff1a; 今天给各位提供一个可视化地图的案例和源码&#xff0c;关注下吧各位&#xff01;回复"大屏地图" 获取工程 1、案例分析&#xff1a;主要使用了UI 美工图片&#xff0c;然后获取地图的json 数据绘制图形&#xff0c;贴图使用该区域的地图纹理进行…
阅读更多...
基于SpringBoot和Vue的宠物商城网站

基于SpringBoot和Vue的宠物商城网站

目录 一、 绪论1.1 研究背景1.2 研究目的1.3 研究意义 二、相关技术2.1 Spring Boot简介2.2 Vue简介2.3 前后端分离架构概述2.4 其他技术和工具 三、需求分析3.1 功能需求3.1.1 用户模块功能需求3.1.2 商品模块功能需求3.1.3 论坛模块功能需求3.1.4 留言板模块功能需求 3.2 用户…
阅读更多...
异常机制总结

异常机制总结

异常的本质_调试错误 异常是什么&#xff1f; 软件程序在运行过程中&#xff0c;非常可能遇到刚刚提到的这些问题&#xff0c;我们称之为异常&#xff0c;英文是&#xff1a;Exception&#xff0c;意思是例外。遇到这些例外情况&#xff0c;或者叫异常。 伪代码说明异常机制…
阅读更多...
会员项目定价卡css3特效

会员项目定价卡css3特效

会员项目定价卡css3特效&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 下载地址 会员项目定价卡css3特效代码
阅读更多...
谁将是RAG的头部玩家？

谁将是RAG的头部玩家？

开篇 菩提修妙树&#xff0c;接引证法源&#xff0c;屠龙万仙阵&#xff0c;玉虚祭封神。 混战是国内技术圈的常态&#xff0c;在众仙跟风与追捧的大潮中&#xff0c;如何看清方向至关重要&#xff0c;决定谁最终将封神。 语言大模型(LLM)&#xff0c;多模态(MM)&#xff0c;…
阅读更多...
代码随想录day22（1）二叉树：左叶子之和（leetcode404）

代码随想录day22（1）二叉树：左叶子之和（leetcode404）

题目要求&#xff1a;计算二叉树所有左叶子之和 思路&#xff1a;本题应该满足两个条件&#xff0c;一是叶子节点&#xff0c;二是要求是左叶子。所以判断时&#xff0c;如果一个节点左孩子的左右孩子均为空&#xff0c;且其右孩子也为空&#xff0c;此节点的左孩子就为左叶子…
阅读更多...
编程语言常识

编程语言常识

看图区别编程语言 什么是强类型、弱类型语言&#xff1f;哪种更好&#xff1f; 强类型语言 强类型语言是一种强制类型定义的语言&#xff0c;即一旦某一个变量被定义类型&#xff0c;如果不经强制转换&#xff0c;那么它永远就是该数据类型。 在强类型语言中&#xff0c;变量的…
阅读更多...
【Eviews实战】——时序的平稳性检验

【Eviews实战】——时序的平稳性检验

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…
阅读更多...
C++ 入门篇

C++ 入门篇

目录 1、了解C 2、C关键字 2、命名空间 2.1 命名空间的定义 2.2 命名空间的使用 3. C输入与输出 4.缺省参数 4.1 缺省参数的概念 4.2 缺省参数的分类 5. 函数重载 5.1 函数重载的概念 5.2 C中支持函数重载的原理--名字修饰 6. 引用 6.1 引用概念 6.2 引用…
阅读更多...
SQLiteC/C++接口详细介绍之sqlite3类（四）

SQLiteC/C++接口详细介绍之sqlite3类（四）

快速跳转文章列表&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;三&#xff09; 下一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;五&#xff09; 编写不易&#xff0c;有用的朋友点个赞或加粉一下万分感…
阅读更多...
day05-SpringBootWeb请求响应

day05-SpringBootWeb请求响应

请求响应&#xff1a; 请求&#xff08;HttpServletRequest&#xff09;&#xff1a;获取请求数据响应&#xff08;HttpServletResponse&#xff09;&#xff1a;设置响应数据 BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xf…
阅读更多...
Python环境安装及Selenium引入

Python环境安装及Selenium引入

Python环境安装 环境下载 Download Python | Python.org 环境安装 需使用管理员身份运行 查看环境是否安装成功 python --version 如果未成功则检查环境变量配置 安装 Selenium 库 pip install selenium Selenium 可以模拟用户在浏览器中的操作&#xff0c;如点击按钮、填写…
阅读更多...
轻松玩转消息通信：SimpleAmqpClient 和 RabbitMQ 在C++中的终极指南

轻松玩转消息通信：SimpleAmqpClient 和 RabbitMQ 在C++中的终极指南

Rabbmq服务端 安装 这里我使用docker安装rabbitmq服务端,没有安装的就先去看其他的博客安装rabbitmq或者docker #拉取rabbitmq docker pull rabbitmq:management #运行rabbitmq,记得打开防火墙端口 docker run -d --hostname rabbitsrv --name rabbit -p 5672:5672 -p 15672…
阅读更多...
前端和后端权限控制【笔记】

前端和后端权限控制【笔记】

前端权限设置【笔记】 前言版权推荐前端权限设置需求效果实现资源 后端权限控制1.给所有前端请求都携带token2.添加拦截器3.配置到WebMvcConfiguration4.更多的权限验证 最后 前言 2024-3-15 18:27:26 以下内容源自《【笔记】》 仅供学习交流使用 版权 禁止其他平台发布时删…
阅读更多...
Seata 2.x 系列【11】多数据源分布式事务

Seata 2.x 系列【11】多数据源分布式事务

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Seata 版本 2.0.0 本系列Spring Boot 版本 3.2.0 本系列Spring Cloud 版本 2023.0.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-seata-demo 文章目录 1. 概述2. 多数据…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023