目录：
前言
那天在论坛里看到张荣超老师发了一个2048的游戏，后面就想到自己用2048的玩法写个十二生肖主题的消消乐的游戏写着玩玩。在官方文档中看到有HarmonyOS上架相关的文档，并体验了下上架流程（PS:11月18号提交的上架现在都没有审核反馈，如果不让上其实官方可以打回的。）
代码一直放着今天看到有征文有奖所以才想到发上来。
基本布局
页面还是用宫格布局，上方文字显示当前动物，宫格显示动物图片。
/* 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);
}
}
}
移动后效果
作者：wx5f978b58097b1
想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区harmonyos.51cto.com/
【免费鸿蒙公开课-让鸿蒙智能家居开发板与AWS IoT云完美连通】
