2020征文-手表鸿蒙HarmonyOS小游戏十二生肖之找到那只猪及上架

应用开发2025-11-04 06:47:086477

想了解更多内容，征文之找只猪请访问：

和华为官方合作共建的手表生肖鸿蒙技术社区

https://harmonyos.51cto.com/#zz

前言

那天在论坛里看到张荣超老师发了一个2048的游戏，后面就想到自己用2048的鸿蒙玩法写个十二生肖主题的消消乐的游戏写着玩玩。在官方文档中看到有HarmonyOS上架相关的游戏文档，并体验了下上架流程(PS:11月18号提交的到那上架现在都没有审核反馈，如果不让上其实官方可以打回的及上架。b2b供应网)

代码一直放着今天看到有征文有奖所以才想到发上来。征文之找只猪

基本布局

页面还是手表生肖用宫格布局，上方文字显示当前动物，鸿蒙宫格显示动物图片。游戏

<div ontouchstart="touchStart" ontouchend="touchEnd" class="container"> <div class="zoon"> <text> {{zoon}} </text> </div> <stack class="wins" ref="wins"> <canvas id="cantx" ref="canvas" class="cantx" focusable="true" ></canvas> </stack> <input type="button" value="重新开始" class="btn" onclick="reset"/> </div> /* index.css */ .container { flex-direction: column; width: 90%; height: 90%; background-color: black; } .wins{ width: 290px; height: 290px; margin-left: 80px; margin-top: 80px; } .cantx{ width: 290px; height: 290px; } .btn { width: 175px; height: 50px; background-color: #AD9D8F; font-size: 24px; margin-top: 10px; margin-left: 140px; } .zoon { position: absolute; margin-left: 200px; font-size: 18px; text-align: center; width: 100px; height: 50px; margin-top: 20px; }

代码结构

官方文档的到那方向滑动的回调方法由于我人品问题根本没有起作用，然后自己跟根据起始停止点位计算方法算出方向。及上架

touchStart(e){ back.touchPointX = e.touches[0].localX back.touchPointY = e.touches[0].localY },征文之找只猪 touchEnd(e){ let endxpoint = e.changedTouches[0].localX let endypoint = e.changedTouches[0].localY back.leavePointX = endxpoint - back.touchPointX back.leavePointY = endypoint - back.touchPointY if (Math.abs(back.leavePointX) > 10 || Math.abs(back.leavePointY) > 10) { if(move.CanMove()){ let fx = move.moveFx(back.leavePointX, back.leavePointY) let movereslut= move.Move(fx); if (movereslut) { this.createItem() this.addNumBlank(1); } }else{ this.reNumBlank(); this.createItem(); this.addNumBlank(2); } } }

移动后效果