2020论文征集-看神鸿大会深圳大学群：HarmonyOS看游戏-数字华融道

2.index.css中描述刚刚添加的页面组件的样式：先写容器Style，flex-direction为容器的主轴方向，选择column（从上到下垂直），justify-content为主轴对齐容器当前行的格式，选择center（item位于容器的中心），align-items为容器当前行横轴对齐格式，selectcenter（元素居中于横轴），width和height是容器的宽度和高度，以像素为单位，它们都设置为450px；然后写seconds的样式，font-size是设置文字大小，设置为18px，text-align是设置文字的文字对齐方式，选择center（文字居中对齐），width和height设置为300px和分别为20px，letter-spacing是设置文字的字符间距，设置为0px，margin-top是设置上边距，设置为10px；然后写canvas的样式，宽高设置为320px，background-color是设置背景色，设置为#FFFFFF；最后写样式bit，width，height分别设置为150px和30px，background-color设置为#AD9D8F，font-size设置为24px，margin-top设置为10px.container{flex-direction:column;调整内容：中心；对齐项目：中心；宽度：450px；高度：450px；}.seconds{字体大小：18px；文本对齐：中心；宽度：300px；高度：20px；字母间距：0px；margin-top:10px;}.canvas{width:305px;height:305px;background-color:#FFFFFF;}.bit{width:150px;height:30px;background-color:#AD9D8F;font-size:24px;保证金顶部：10px;}3。在index.js中描述页面上组件的交互：首先在data:{currentSeconds:'0.0',}中给当前秒数currentSeconds赋值为0.0然后在文件开头定义一个全局变量context，并定义全局变量二维数组grids，其值为1到15和0，定义全局常量网格边长SIDELEN为70，网格间距MARGIN为5，创建onReady()函数定义2d绘图工具vargrids=[[1,2,3,4],[5,6,7,8],[9,10,11,12],[13,14,15,0]];varcontext;constSIDELEN=70;constMARGIN=5;onReady(){context=this.$refs.canvas.getContext('2d');}然后创建drawGrids()函数，首先使用toString()函数，fillStyle是绘图工具上下文网格的颜色，网格的背景色定义为#BBADA0，数字的颜色定义为#000000，fillRect是绘图工具上下文的绘图矩形的大小，有四个参数，第一个参数指定矩形左上角的x坐标，第二个参数指定矩形左上角的y坐标，第三个参数指定矩形的高度，第四个参数指定矩形字体的宽度是绘图工具上下文的字体大小，定义为30pxHYQiHei-65S，因为需要出现一个空白方块，所以需要添加一个判断语句，当数字为0时不显示数字。fillText是文本字体大小绘图工具上下文，它有三个参数，第一个参数是绘制的文本，第二个参数指定文本左上角的x坐标，第三个参数指定文本的y坐标文本的左上角，最后创建onShow()函数，用于调用drawGrids()函数onShow(){this.drawGrids();},drawGrids(){for(letrow=0;row<4;row++){for(letcolumn=0;column<4;column++){letgridStr=grids[row][column].toString();context.fillStyle="#BBADA0";letleftTopX=column*(MARGIN+SIDELEN)+MARGIN;letleftTopY=row*(MARGIN+SIDELEN)+MARGIN;context.fillRect(leftTopX,leftTopY,SIDELEN,SIDELEN);context.font="30pxHYQiHei-65S";if(gridStr!="0"){context.fillStyle="#000000";letoffsetX=(4-gridStr.length)*(SIDELEN/8);letoffsetY=(SIDELEN-30)/2;context.fillText(gridStr,leftTopX+offsetX,leftTopY+offsetY);}}}}至此，运行得到如上界面布局。实现数字的随机打乱和方块的移动。其次，我们需要在屏幕上随机生成一个数字随机打乱的4*4方阵，向任意方向滑动屏幕。空白方块周围相应的方块会相应地向相应的方向移动一格。1.在index.hml中添加对应的页面组件：我们需要在canvas中添加一个swipe属性来响应滑动事件，并分配一个自动调用的函数swipeGridscanvasclass="canvas"ref="canvas"onswipe="swipeGrids">2。在index.css中描述刚刚添加的页面组件的样式：这部分不需要添加或修改页面组件的样式3.在index.js中描述组件在页面上的交互：首先，我们要实现格子的移动，创建一个函数changeGrids(direction)，接受一个参数direction表示滑动的方向，先找到空白格子位置对应的二维数组下标，然后判断参数direction是'left'，'right'，'up'或'down'，当isShow为false时，将对应方块和空白方块对应的二维数组的值进行交换，创建响应滑动事件自动调用函数swipeGrids(event)，参数为滑动事件，调用函数changeGrids(direction)，并传入滑动方向，最后调用函数drawGrids()swipeGrids(event){this.changeGrids（事件。方向）；这.drawGrids();},changeGrids(方向){letx;lety;for(letrow=0;row<4;row++){for(letcolumn=0;column<4;column++){if(grids[row][column]==0){x=row;y=column;break;}}}lettemp;if(this.isShow==false){if(direction=='left'&&(y+1)<4){temp=网格[x][y+1];grids[x][y+1]=grids[x][y];grids[x][y]=temp;}elseif(direction=='right'&&(y-1)>-1){temp=grids[x][y-1];grids[x][y-1]=grids[x][y];grids[x][y]=temp;}elseif(direction=='up'&&(x+1)<4){temp=grids[x+1][y];grids[x+1][y]=grids[x][y];grids[x][y]=temp;}elseif(direction=='down'&&(x-1)>-1){temp=grids[x-1][y];grids[x-1][y]=grids[x][y];grids[x][y]=temp;}}然后添加一个函数initGrids()，用来随机打乱排列规则的个数，先创建一个一维数组变量array，在其中赋值“left”上、下、左、右四个方向，“上”、“右”、“下”，Math.random()函数是[0,1]内的随机小数，Math.random()*4是[0,4]中的随机小数,Math.floor(x)获取小于等于x的最大整数，随机生成一个数，读取array数组对应的值，调用函数this.changeGrids(direction)并传入刚才数组对应的值，然后移动一次方格，重复此步骤数次随机打乱正则数，生成一个4*4的方阵initGrids(){letarray=["left","向上","向右","向下"];for(leti=0;i<100;i++){letrandomIndex=Math.floor(Math.random()*4);letdirection=array[randomIndex];这.changeGrids(direction);}}最后在函数onShow中调用函数ini()tGrids()onShow(){this.initGrids();this.drawGrids();}至此，运行即可得到以上界面布局实现定时器、重启和游戏成功最后我们在方阵上方动态显示从游戏开始到当前时间的时间，当数字依次排列后，会弹出“游戏成功”界面，点击“重启”按钮可以随机生成一个新的数字随机打乱的4*4方阵，当前秒设置为0，可以重新开始计时，如图：1.添加对应的页面index.hml中的组件：为了让数字有序显示“游戏成功”界面后，需要添加一个栈，类名设置为stack，使画布前进到栈中，“游戏success”入栈，使得“游戏成功”界面显示在画布上方；在stack的stack组件中，为成功的游戏容器添加一个名为subcontainer的div类，并使用isShow控制是否将容器压入栈中。当isShow为真时，它将被压入堆栈。添加一个文本组件text，类名gameover，赋值“gamesuccess”；最后为“重启”按钮添加点击事件click，调用的函数为restartGame当前秒数：{{currentSeconds}}游戏结束