一款简单的JS鸿蒙小游戏——JigsawPuzzle（一起冬奥）
时间：2023-03-13 02:25:30
科技观察
更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com前言最近有看冬奥会吗？运动员们在冰天雪地中驰骋，争得了赛场上的名次。冬奥冰墩墩、雪蓉蓉这些可爱的角色也深受大家喜爱。虽然不能给你真正的冰盾，但是可以带你学习用JS写一个简单的拼图游戏，用拼图的方式再现运动员帅气英姿，拼出一个完整的冰盾。新建项目，在DevEcoStudio中点击File->NewProject->EmptyAbility->Next，Projecttype选择Application，Language选择JS，这里使用API??version6，最后点击Finish完成项目创建.在项目结构页面构建的首页设置背景图：使用通用样式background-image设置背景图。.container{显示：flex;弹性方向：列；宽度：100%；高度：100%；背景图片：url('/common/images/bg.png');background-size:cover;}添加两个游戏模式进入按钮：跳转到游戏页面，拼图格式根据传值不同。
游戏页面顶部计时器：用于显示游戏时间。
当前秒数：{{mytime}}s中间有两个画布：左边是原图，供参考；右边是拼图和默认隐藏的弹窗。使用两个canvas组件显示原图和n×n拼图，使用stack布局方便设置游戏完成时显示的弹窗。 底部功能按钮：用于返回首页、切换图片、重启和切换提示。
游戏逻辑首页游戏??模式传值跳转，选择游戏模式4×4或5×5playgame(num){router.replace({uri:"pages/jigsaw/jigsaw",params:{block:num,},})}游戏页面网格格式计算：根据页面路由的传值计算拼图网格的大小和间距，然后绘制。//网格初始化onInit(){CUT_SID=360/this.block-(this.block+1);SIDELEN=240/this.block-(this.block+1);MARGIN=this.block;这个.img.src=list[this.index%list.length].src;},//页面显示onShow(){if(4==this.block){grids=[[1,2,3,4],[5,6,7,8],[9,10,11,12],[13,14,15,0]];}else{网格=[[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15],[16,17,18,19,20],[21,22,23,24,0]];}计时器=空；这个.initGrids();这个.drawGrids();timer=setInterval(()=>{this.mytime+=1;},1000);this.refer();//参考canvas，可替换},游戏页面网格绘制：使用canvas组件的drawImage方法裁剪源图并绘制网格。//画网格drawGrids(){context=this.$refs.canvas.getContext('2d');for(letrow=0;row
-1){temp=grids[x-1][y];网格[x-1][y]=网格[x][y]；网格[x][y]=温度；}elseif(direction=='left'&&(y+1)-1){temp=grids[x][y-1];网格[x][y-1]=网格[x][y]；网格[x][y]=温度；}}},Jigsawpuzzlenumberhint:设置提示标识符，为真时开启数字提示//Numberhintswitchgethelp(){this.tip=!this.tip;这个.drawGrids();},拼图完成判断：当前拼图序列与初始状态相同时拼图完成。//游戏结束判断gameover(){letoriginalgrids;if(4==this.block){originalgrids=[[1,2,3,4],[5,6,7,8],[9,10,11,12],[13,14,15,0]];}else{originalgrids=[[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15],[16,17,18,19,20],[21,22,23,24,0]];}for(letrow=0;row
