网站开发 微信 支付,微信推广软件,wordpress站点如何添加百度分享代码,网页设计需要学什么软件知乎最近姑娘喜欢玩那个餐厅游戏里的钓鱼 #xff0c;经常让看广告#xff0c;然后就点点点...
自己写个吧。小鱼的图片自己搞。 有问题自己改#xff0c;不要私信我
templateview classpage_mainview classtop_linearv…最近姑娘喜欢玩那个餐厅游戏里的钓鱼 经常让看广告然后就点点点...
自己写个吧。小鱼的图片自己搞。 有问题自己改不要私信我
templateview classpage_mainview classtop_linearview classtop_mean_lefttext以钓到 /texttext classtop_mean_tv{{ydlist.length}} /text/viewview classtop_mean_centertext /texttext classtop_mean_tv/text/viewview classtop_mean_righttext /texttext classtop_mean_tv/text/viewview classtop_mean_righttext /texttext classtop_mean_tv /text/view/viewview classcontentonecanvas classcanvas_cla canvas-idmyCanvas idmyCanvas/canvas/viewview classcontenttwocanvas classcanvas_cla canvas-idmyCanvass touchstarttouchstart touchendtouchendidmyCanvass touchmovetouchmove/canvas/view/view
/templatescriptexport 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},}};
/scriptstyle 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
