陈家奇-实验六

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

一、实验目标

1、综合应用所学的知识创建完整的箱子小游戏

2、熟练掌握和绘图API

二、实验步骤

1.创建项目并修改相应的文件

按照实验报告的要求删除utils文件中的内容，删除logs文件夹，修改.wxml和.wxss的内容，创建images文件夹存放相对应的图像，创建utils文件夹存放公共数据，并创建game文件夹

2.页面的设计

1. 导航栏的设计：

   修改app.json文件的内容，修改导航栏的颜色和小程序的名字

2. 首页的设计

   使用view标签来写标题，使用循环设计我们的关卡，并修改我们的.wxss文件，来修改页面的样式，效果图如下：

   

   觉得颜色有点单调，于是加上了一个背景图，效果图如下

   

3. 游戏页面的设计

   主要分为游戏关卡、游戏画布、游戏方向案件、重新开始按钮，想过图如下：

   

   也加入相应的背景

   

3.逻辑实现

1. 公共逻辑：将公共使用的矩阵放在utils文件夹中，并设置相对应的export；（矩阵数据比较多，我把数据放到最后面，有需要的可以自取！）

2. 首页逻辑：实现关卡列表和点击图片跳转到游戏页面；功能1效果图：

   

   功能2效果图（做的过程中没有截图，所以截图都是包含画布的）

   

   3. 游戏页面逻辑的实现：

      我们需要一次实现功能显示第几关，初始游戏画面，方向逻辑实现，判断游戏是否成功，重新开始游戏（效果图，我放在了第三部分了）

三、程序运行结果

选择关卡：

移动小鸟：

重新开始

成功过关：

四、问题总结与体会

问题1： 在设计游戏页面的时候，发现修改wxss文件不能改变button的宽度，后来在网上查询发现，button有许多隐含的属性，写在WXSS文件里面的属性的优先级远小于button自带的属性值，所以button会展现出默认值，而不是WXSS写的属性，后来在网上也发现可能是小程序渲染引擎的问题，在学习小程序开发的时候也遇到过这样的问题，针对这个问题，我也查询过相关的资料，写的有一个博客，博客地址为：https://mp.csdn.net/mp_blog/creation/editor/132118372

在本实验中有一点自己的修改，第一个是觉得本实验是一个小游戏，但是游戏的看起来有些许单调，虽然游戏很好玩，如果给我们的游戏加上背景，会使我们的游戏显的更有意思，所有我给主页和进游戏页面加上了愤怒的小鸟的背景图，第二个我觉得游戏关卡难度的设计有些许不合理，把第二关和第一关进行了修改

附录：data.js 文件：

var map2 = [
  [0,1,1,1,1,1,0,0],
  [0,1,2,2,1,1,1,0],
  [0,1,5,4,2,2,1,0],
  [1,1,1,2,1,2,1,1],
  [1,3,1,2,1,2,2,1],
  [1,3,4,2,2,1,2,1],
  [1,3,2,2,2,4,2,1],
  [1,1,1,1,1,1,1,1]
]

var map1 = [
  [0,0,1,1,1,0,0,0],
  [0,0,1,3,1,0,0,0],
  [0,0,1,2,1,1,1,1],
  [1,1,1,4,2,4,3,1],
  [1,3,2,4,5,1,1,1],
  [1,1,1,1,4,1,0,0],
  [0,0,0,1,3,1,0,0],
  [0,0,0,1,1,1,0,0]
]

var map3 = [
  [0,0,1,1,1,1,0,0],
  [0,0,1,3,3,1,0,0],
  [0,1,1,2,3,1,1,0],
  [0,1,2,2,4,3,1,0],
  [1,1,2,2,5,4,1,1],
  [1,2,2,1,4,4,2,1],
  [1,2,2,2,2,2,2,1],
  [1,1,1,1,1,1,1,1]
]

var map4 = [
  [0,1,1,1,1,1,1,0],
  [0,1,3,2,3,3,1,0],
  [0,1,3,2,4,3,1,0],
  [1,1,1,2,2,4,1,1],
  [1,2,4,2,2,4,2,1],
  [1,2,1,4,1,1,2,1],
  [1,2,2,2,5,2,2,1],
  [1,1,1,1,1,1,1,1]
]
module.exports ={
  maps:[map1,map2,map3,map4]
}