前言

这次博客是学完鸿蒙应用开发之后，自行开发的鸿蒙小游戏——数字华容道，这篇博客详细地讲了数字华容道的开发思路。

概述

本个demo将从零基础开始完成鸿蒙小游戏APP在可穿戴设备上的编译，此处以运动手表为例，在项目中我们所使用到的软件为DevEco Studio。

1.在初始界面中显示4*4的方阵，方阵中分布有随意打乱的1至15的数字和一个空白方格，方阵上方增加一个计时器，显示游戏进行的时间，单位为秒，方阵下方显示一个“重新开始”的按钮，为用户提供重新开始游戏的机会。

2.向上、下、左、右任一方向滑动，空白方格周围对应位置的方格便会随之向对应的方向移动一格，计时器也会显示游戏开始到当前的时间。

3.经过若干次移动后，当所有的数字按顺序排列后，则会弹出游戏成功的界面，再滑动也不会有任何变化，此时方阵上方的计时器停止计时，点击“重新开始”的按钮后则会重新返回步骤1界面所示。

主要源代码：

index.html如下：

     当前秒数：{{currentSeconds}}          
       游戏成功      
        

 index.css如下：

.container {    flex-direction: column;    justify-content: center;    align-items: center;    width:450px;    height:450px;}.seconds{    font-size: 18px;    text-align:center;    width:300px;    height:20px;    letter-spacing:0px;    margin-top:10px;}.canvas{    width:305px;    height:305px;    background-color: #FFFFFF;}.bit{    width:150px;    height:30px;    background-color:#AD9D8F;    font-size:24px;    margin-top:10px;}.stack{    width: 305px;    height: 305px;    margin-top: 10px;}.subcontainer {    left:50px;    top:95px;    width: 220px;    height: 130px;    justify-content: center;    align-items: center;    background-color: #E9C2A6;}.gameover {    font-size: 38px;    color: black;}

index.js如下：

var grids;var context;var timer;const SIDELEN = 70;const MARGIN = 5;export default {    data: { currentSeconds: '0.0', isShow: false    },    onInit() { grids=[[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 0]]; this.initGrids(); this.drawGrids();    },    initGrids(){ let array=["left","up","right","down"]; for (let i = 0; i < 100; i++){     let randomIndex = Math.floor(Math.random() * 4);     let direction = array[randomIndex];     this.changeGrids(direction); }    },    onReady() { context = this.$refs.canvas.getContext('2d');    },    onShow() { this.initGrids(); this.drawGrids(); timer = setInterval(this.run, 100);    },    drawGrids() { for (let row = 0; row < 4; row++) {     for (let column = 0; column < 4; column++) {  let gridStr = grids[row][column].toString();  context.fillStyle = "#BBADA0";  let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;  let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;  context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);  context.font = "30px HYQiHei-65S";  if (gridStr != "0") {      context.fillStyle = "#000000";      let offsetX = (4 - gridStr.length) * (SIDELEN / 8);      let offsetY = (SIDELEN - 30) / 2;      context.fillText(gridStr, leftTopX + offsetX, leftTopY + offsetY);  }     } }    },    run(){ this.currentSeconds = (Math.floor(parseFloat(this.currentSeconds) * 10+ 1) / 10).toString(); if(parseFloat(this.currentSeconds) % 1 == 0){     this.currentSeconds = this.currentSeconds + ".0"; }    },    swipeGrids(event) { this.changeGrids(event.direction); this.drawGrids(); if(this.gameover()){     clearInterval(timer);     this.isShow = true; }    },    gameover(){ let originalgrids=[[1, 2, 3, 4],      [5, 6, 7, 8],      [9, 10, 11, 12],      [13, 14, 15, 0]]; for (let row = 0; row < 4; row++) {     for (let column = 0; column < 4; column++) {  if (grids[row][column] != originalgrids[row][column]){      return false;  }     } } return true;    },    changeGrids(direction) { let x; let y; for (let row = 0; row < 4; row++) {     for (let column = 0; column < 4; column++) {  if (grids[row][column] == 0) {      x = row;      y = column;      break;  }     } } let temp;if(this.isShow==false){     if (direction == 'left' && (y + 1)  -1) {  temp = grids[x][y - 1];  grids[x][y - 1] = grids[x][y];  grids[x][y] = temp;     } else if (direction == 'up' && (x + 1)  -1) {  temp = grids[x - 1][y];  grids[x - 1][y] = grids[x][y];  grids[x][y] = temp;     } }    },    restartGame(){ this.currentSeconds = "0.0"; this.isShow = false; this.onShow();    }}

心得体会

本个demo整体难度不高，涉及的组件或样式都是很常见的，需要掌握栈、按钮、画布、计时器、滑动等组件即可完成编写，组件交互采用二维数组串连整个项目。通过本次项目实战，我学到了很多，之前在课堂上面讲的一些不理解的知识全部都融会贯通，并且有了更好的理解。

588库千库资源网