2023年夏季学期移动软件开发实验4

2023年夏季《移动软件开发》实验报告

​​

姓名和学号？
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称？	实验4：拼图游戏
博客地址？
Github仓库地址？

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

1、综合应用所学知识创建完整的拼图游戏项目；2、熟练掌握<canvas>组件。

二、实验步骤

页面设计

这次实现的项目比较复杂，是一个拼图游戏，这与之前的项目都不太一样。首页创建时，需要增加一个game的路径

导航栏设计：

接下来写一些公共样式：

然后开始设计选关界面，这里使用了几个view和image标签来嵌套，然后再慢慢调整样式，使其可以正常显示。

简单的选关界面就做好了，接下来做游戏内的界面。由于暂时没有做点击跳转的逻辑设计,所以可以在开发工具顶端选择“普通编译”下的“添加编译模式”,并携带临时测试参数level=pic01.jpg

接下来正式开始进行game界面设计。整个界面由三个部分组成，分别是title，提示图和画板框。

然后再调整一下每个部分的样式，最终效果如下：

至此，基础的界面设计已经完成了，接下来就是逻辑的实现。

逻辑设计

首先先给主页写点levels基础数据

然后添加wx：for属性，让标签能遍历levels数组的数据

然后添加跳转函数，使首页能点击图片跳转，

然后在游戏界面接受level参数，并选择相应的关卡

效果如下：

接下来实现最复杂的拼图逻辑，

首先需要一个二维数组来存拼图的位置，然后就需要一个函数来打乱拼图

运行这个函数之后，获得一个打乱的数组，然后写一个draw函数来把拼图画到画板上：

最后的效果：

最后一个逻辑就是移动拼图的逻辑了，具体还是比较简单的，通过判断拼图四周是否有空位，有就移动。移动效果：

三、程序运行结果

选关界面

游戏界面

成功界面：

四、问题总结与体会

这次实验的难度相较于上一个实验，可以说陡增了少。不过使用到了一些新的如canvas的组件，还有一些其他的函数和JS的知识。当然，核心逻辑都不是自己写的，我只能尝试理解一下。