实验6：推箱子小程序

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

姓名：冯欣怡 学号：22020006029

姓名和学号？	冯欣怡，22020006029
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？
博客地址？	实验6：推箱子小程序-优快云博客
Github仓库地址？	Fxinyi/6_24_summer_WeiXinMiniprogram_PushBox (gitee.com)

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

一、实验目标

1、综合所学知识创建完整的推箱子游戏；

2、能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

0. 项目准备

（1）图片

创建项目，不使用云服务，不使用模板。

然后在文件夹中创建一个空文件夹images用于存放图片，将下载的图片放入：

1. 首页展示

首页用于展示游戏选关，展示4个关卡的图片

（1）window

先在app.js中设置window样式：

 "window":{
   
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#00b5c7",
    "navigationBarTitleText": "推箱子",
    "navigationBarTextStyle":"black"
  },

(2) 关卡图片

在index.js中设置data:

  data: {
   
    levels:[
      "level01.png",
      "level02.png",
      "level03.png",
      "level04.png"
    ]
  },

在index.wxml中用wxfor循环每个都显示：

<!--index.wxml-->
<view class="container">
  <!-- 标题 -->
  <view class="title">游戏选关</view>
  <!-- 关卡列表 -->
    <view class="levelBox">
    <view class="box" wx:for="{
    {levels}}" wx:key="level{
    {index}}"data-level="{
    {index}}">
      <image src="/images/{
    {item}}"></image>
      <text>第{
  {index+1}}关</text>
    </view>
    </view>
</view>

2. 关卡页

点开每一关后是关卡页，即游戏页，包括2个部分

游戏窗口/控制区

game.wxss

/* pages/game/game.wxss */
/**game.wxss**/
/* 游戏画布样式 */
canvas {
   
  border: 1rpx solid;
  width: 320px;
  height: 320px;
}
 
/* 方向键按钮整体区域 */
.btnBox {
   
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
/* 方向键按钮第二行 */
.btnBox view {
   
  display: flex;
  flex-direction: row;
}
 
/* 所有方向键按钮 */
.btnBox button {
   
  width: 90rpx;
  height: 90rpx;
}
 
/* 所有按钮样式 */
button {
   
  margin: 10rpx;
}
 

game.wxml:

<!--pages/game/game.wxml-->
<view class="container">
  <!-- 关卡提示 -->
  <view class="title">第{
  {level}}关</view>
  <!-- 游戏画布 -->
  <canvas canvas-id="myCanvas"></canvas>
  <!-- 方向键 -->
  <view class="btnBox">
    <button type="warn" bindtap="up">↑</button>
    <view>
      <button type='warn' bindtap='left'>←</button>
      <button type='warn' bindtap='down'>↓</button>
      <button type='warn' bindtap='right'>→</button>
    </view>
  </view>
  <!-- 重新开始 -->
  <button type="warn" bindtap="restartGame">重新开始</button>
</view>

展示第level关，然后用canvas展示游戏画面，最后是控制区，上下左右箭头button对应不同的函数，最后有一个重新开始按钮。

3. 跳转关卡

给每一个index.js的图片绑定跳转函数：

<view class="box" wx:for="{
    {levels}}" wx:key="level{
    {index}}" bindtap="chooseLevel" data-level="{
    {index}}">
      <image src="/images/{
    {item}}"></image>
      <text>第{
  {index+1}}关</text>
    </view>

chooseLevel函数，获取选择的level,携带level信息跳转到相应的关卡页，

  chooseLevel:function(e){
   
    let level=e.currentTarget