OpenHarmony-基于ArkUI（JS）的数字排序游戏
时间：2023-03-12 10:59:24
科技观察
了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言中的数字拼数字游戏其实是借鉴了很多前人写的案例，然后自己写的。主要是学习使用OpenHarmony开发相关知识，包括一些需要自己去踩的API。小游戏还有很多不足之处。以后有时间我会尝试做一个类型的突破，包括统计分数做排行榜等功能。效果展示是一个简单的演示，因为是4*4的，可能需要花一些时间来拼凑。布置成功后的效果是这样的！实现原理创建一个4*4的表格方阵，在方阵中随机打乱一个空白方格和1到15的数字，使其随机分布。桌子上方放置一个计时器，以秒为单位记录游戏时间，桌子下方放置一个“开始游戏”按钮，点击后开始游戏。点击控制鼠标，在方阵上上下左右任意方向移动，计时器开始计时，空白方块周围对应的方块会随着鼠标移动的方向相应方向移动一个框架。多次走棋，所有数字按顺序排列后，会弹出提示游戏完成的界面“你真棒！”。官方API使用了getContextgetContext(type:'2d',options:ContextAttrOptions):CanvasRendering2dContext。获取画布绘图上下文——不支持调用onInit和onReady。参数参数名称参数类型必填说明typestring设置为'2d'，返回值为二维绘图对象，可用于在canvas组件上绘制矩形、文字、图片等。optionsContextAttrOptions否目前只支持配置是否开启抗锯齿功能，默认关闭。表1ContextAttrOptions。参数名type表示antialiasboolean是否开启抗锯齿功能，默认为false。返回值类型说明CanvasRenderingContext2D用于在画布组件上绘制矩形、文字、图片等。fillRectfillRect(x:number,y:number,width:number,height:number):无效。填充一个矩形。参数参数类型说明xnumber指定矩形左上角的x坐标。ynumber指定矩形左上点的y坐标。widthnumber指定矩形的宽度。heightnumber指定矩形的高度。fillTextfillText(text:string,x:number,y:number):无效。绘制填充文字。参数参数类型描述了textstring需要绘制的文本内容。xnumber要绘制的文本左下角的x坐标。ynumber要绘制的文本左下角的y坐标。代码实现1.HTML代码游戏时间：{{currentTime}}秒你真棒！
2、css代码。container{flex-方向：列；证明内容：居中；对齐项目：居中；宽度：100%；高度：100%；margin:0auto;}.times{font-size:25px;文本对齐：居中；宽度：300px;字母间距：0px;}.canvas{宽度：100%;高度：100%；背景色：#FFEFD5;}.tip{width:150px;高度：35px；背景色：#20B2AA；:25px;边距顶部：10px；底部边距：5px;}.stack{宽度：305px；高度：305px；margin-top:10px;}.success{left:50px;顶部：95px；宽度：220px；高度：130px；证明内容：居中；#E9C2A6;}.gameOver{字体大小：38px;color:black;}3.js代码vargrids;varcontext;vartimer;constsideLen=70;//网格的边长constmargin=5;//网格间距exportdefault{data:{currentTime:'0.0',//游戏时间isShow:false,//控制'你真棒'弹框的显示或隐藏},onInit(){//二维数组gridsgrids=[[1,2,3,4],[5,6,7,8],[9,10,11,12],[13,14,15,0]];},isInitGrids(){letarray=["left","up","right","down"];for(leti=0;i<100;i++){letrandomIndex=Math.地板（数学。随机（）*4）；//生成一个随机整数letdirection=array[randomIndex];//获取上下左右方向值this.changeGrids(direction);}},onReady(){this.isInitGrids();},onShow(){context=this.$refs.canvas.getContext('2d');//获取画布绘图上下文this.drawGrids();},drawGrids(){for(letrow=0;row<4;row++){for(letcolumn=0;column<4;column++){letgridStr=grids[row][column].toString();context.fillStyle="#87CEEB";//上下文网格的颜色letleftTopX=column*(margin+sideLen)+margin;//X坐标letleftTopY=row*(margin+sideLen)+margin;//y坐标context.fillRect(leftTopX,leftTopY,sideLen,sideLen);//填充上下文。textBaseline='top'context.font="30px";if(gridStr!="0"){//除了空白之外的其他网格context.fillStyle="#000000";//数字的颜色letoffsetX=(4-gridStr.length)*(sideLen/8);让offsetY=(sideLen-30)/2;context.fillText(gridStr,leftTopX+offsetX,lefttTopY+偏移Y);//绘制填充文字}}}},//点击开始游戏后计时的方法runIt(){this.currentTime=(Math.floor(parseFloat(this.currentTime)*10+1)/10).toString();如果(parseFloat(this.currentTime)%1==0){this.currentTime=this.currentTime+".0";}},//滑动事件方法onSwipeGrids(e){this.changeGrids（e.direction）；这个.drawGrids();//如果this.gameOver()返回true，则清除计时器并显示“Youareawesome”以指示游戏结束if(this.gameOver()){clearInterval(timer);this.isShow=true;}},//判断游戏结束的函数gameOver(){//定义一个成功的二维数组oriGridsletoriGrids=[[1,2,3,4],[5,6,7,8],[9,10,11,12],[13,14,15,0]];for(letrow=0;row<4;row++){for(letcolumn=0;column<4;column++){//如果二维数组grids不等于二维数组oriGrids返回false如果(grids[row][column]!=oriGrids[行][列]){返回假;}}}返回真；//结束游戏},//点击移动网格changeGrids(direction){letx;让你；for(letrow=0;row<4;row++){for(letcolumn=0;column<4;column++){if(grids[row][column]==0){//获取坐标x=row;y=列；休息;}}}让临时工；if(this.isShow==false){if(direction=='up'&&(x+1)<4){//向上移动（x+1必须小于四）temp=grids[x+1][y];网格[x+1][y]=网格[x][y]；网格[x][y]=温度；}elseif(direction=='down'&&(x-1)>-1){//向下移动（x-1必须大于负一）temp=grids[x-1][y];网格[x-1][y]=网格[x][y]；网格[x][y]=温度；否则如果(direction=='left'&&(y+1)<4){//向左移动（y+1必须小于四）temp=grids[x][y+1];网格[x][y+1]=网格[x][y]；网格[x][y]=温度；}elseif(direction=='right'&&(y-1)>-1){//向右移动（y-1必须大于负一）temp=grids[x][y-1];网格[x][y-1]=网格[x][y]；网格[x][y]=温度；}}},startGame(){timer=setInterval(this.runIt,100);//1秒定时执行this.isInitGrids();this.currentTime="0.0";//初始化游戏时间this.isShow=false;这个.onShow();}}总结H5中使用的一些样式或方法在OpenHarmony开发过程中是无法使用的。FA开发，需要多看OpenHarmony文档，也需要在后续开发中多踩坑，多总结，多实践！了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com
