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

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量83 收藏
点赞数
分类专栏： 移动软件开发课程作业 文章标签： javascript 前端 css 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61336760/article/details/132686379
版权

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

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；2.能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

1.创建项目

2.删除和修改模板文件

3.创建其他文件

(1)添加图片文件夹(images)和其内二级文件夹(icons)

(2)创建公共JS文件夹(utils)

4.根据个人喜好设置导航栏样式（app.json）

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#E64340",
    "navigationBarTitleText": "推箱子游戏",
    "navigationBarTextStyle": "white"
  },

5.首页设计

<!--index.wxml-->
<view class='container'>
  <!--标题-->
  <view class='title'>游戏选关</view>

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

/**index.wxss**/
/* 关卡列表区域 */
.levelBox{
  width:100%;
}

/* 单个关卡区域 */
.box{
  width:50%;
  float:left;
  margin:20rpx 0;
  display:flex;
  flex-direction:column;
  align-items: center;
}

/* 选关图片 */
image{
  width:300rpx;
  height:300rpx;
}

6.公共样式设计

/**app.wxss**/
.container {
  height: 100%;
  color:#E64340;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
} 

.title{
  font-size:18pt;
}

7.游戏界面设计

<!--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' size="mini">↑</button>
    <view>
      <button type='warn' bindtap='left' size="mini">←</button>
      <button type='warn' bindtap='down' size="mini">↓</button>
      <button type='warn' bindtap='right' size="mini">→</button>
    </view>
  </view>

  <!-- “重新开始”按钮 -->
  <button type='warn' bindtap='restartGame'>重新开始</button>
</view>

/* pages/game/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:70rpx;
}

/* 所有按钮样式 */
button{
  margin:10rpx;
}

8.首页逻辑实现

需要完成游戏选关和跳转到游戏界面的逻辑

Page({

  /**
   * 页面的初始数据
   */
  data: {
    levels:[
      'level01.png',
      'level02.png',
      'level03.png',
      'level04.png'
    ]
  }
  
  /**
   * 自定义函数--游戏选关
   */
  chooseLevel: function (e) {
    let level=e.currentTarget.dataset.level;
    wx.navigateTo({
      url:'../game/game?level='+level
    })
  }
})

9.游戏界面逻辑实现

// pages/game/game.js

// 地图图层数据
var map=[
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0]
]
// 箱子图层数据
var box=[
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0]
]
// 方块的宽度
var w=40
// 初始化游戏主角（小鸟）的行与列
var row=0
var col=0

var data=require('../../utils/data.js')

Page({

  /**
   * 页面的初始数据
   */
  data: {

    level:1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 获取关卡
    let level=options.level
    // 更新页面关卡标题
    this.setData({
      level:parseInt(level)+1
    })
    // 创建画布上下文
    this.ctx=wx.createCanvasContext('myCanvas')
    // 初始化地图数据
    this.initMap(level)
    // 绘制画布内容
    this.drawCanvas()
  },

  /**
   * 自定义函数--初始化地图数据
   */
  initMap:function(level) {
    // 读取原始的游戏地图数据
    let mapData = data.maps[level]
    // 使用双重for循环记录地图数据
    for(var i=0;i<8;i++){
      for(var j=0;j<8;j++){
        box[i][j]=0
        map[i][j]=mapData[i][j]

        if(mapData[i][j]==4){
          box[i][j]=4
          map[i][j]=2
        }else if(mapData[i][j]==5){
          map[i][j]=2
          // 记录小鸟当前行和列
          row=i
          col=j
        }
      }
    }
  },

  /**
   * 自定义函数--绘制地图
   */
  drawCanvas:function() {
    let ctx = this.ctx
    // 清空画布
    ctx.clearRect(0,0,320,320)
    // 使用双重for循环绘制8*8的地图
    for(var i=0;i<8;i++)
    {
      for(var j=0;j<8;j++)
      {
        // 默认是道路
        let img='ice'
        if(map[i][j]==1){
          img='stone'
        }else if(map[i][j]==3){
          img='pig'
        }

        // 绘制地图
        ctx.drawImage('/images/icons/'+img+'.png',j*w,i*w,w,w)

        if(box[i][j]==4){
          // 叠加绘制箱子
          ctx.drawImage('/images/icons/box.png',j*w,i*w,w,w)
        }
      }
    }

    // 叠加绘制小鸟
    ctx.drawImage('/images/icons/bird.png',col*w,row*w,w,w)

    ctx.draw()
  },

  /**
   * 自定义函数--方向键上
   */
  up:function() {
    // 不在最顶端才考虑上移
    if(row>0){
      // 如果上方不是墙或者箱子，可以移动小鸟
      if(map[row-1][col]!=1 && box[row-1][col]!=4){
        // 更新当前小鸟坐标
        row=row-1
      }
      // 如果上方是箱子
      else if(box[row-1][col]==4){
        // 箱子不在最顶端才能考虑推动
        if(row-1>0){
          // 如果箱子上方不是墙或箱子
          if(map[row-2][col]!=1 && box[row-2][col]!=4){
            box[row-2][col]=4
            box[row-1][col]=0
            // 更新当前小鸟的坐标
            row=row-1
          }
        }
      }
      // 重新绘制地图
      this.drawCanvas()
      // 检查游戏是否成功
      this.checkWin()
    }
  },

  /**
   * 自定义函数--方向键下
   */
  down:function() {
    // 不在最底端才考虑下移
    if(row<7){
      // 如果下方不是墙或箱子，可以移动小鸟
      if(map[row+1][col]!=1 && box[row+1][col]!=4){
        // 更新当前小鸟的坐标
        row=row+1
      }
      // 如果下方是箱子
      else if(box[row+1][col]==4){
        // 箱子不在最底端才能考虑推动
        if(row+1<7){
          // 如果箱子下方不是墙或箱子
          if(map[row+2][col]!=1 && box[row+2][col]!=4){
            box[row+2][col]=4
            box[row+1][col]=0
            // 更新当前小鸟的坐标
            row=row+1
          }
        }
      }
      // 重新绘制地图
      this.drawCanvas()
      // 检查游戏是否成功
      this.checkWin()
    }
  },

  /**
   *自定义函数--方向键左
   */
  left:function() {
    // 不在最左侧才考虑左移
    if(col>0){
      // 如果左侧不是墙或者箱子，可以移动小鸟
      if(map[row][col-1]!=1 && box[row][col-1]!=4){
        // 更新当前小鸟坐标
        col=col-1
      }
      // 如果左侧是箱子
      else if(box[row][col-1]==4){
        // 箱子不在最左侧才能考虑推动
        if(col-1>0){
          // 如果箱子左侧不是墙或箱子
          if(map[row][col-2]!=1 && box[row][col-2]!=4){
            box[row][col-2]=4
            box[row][col-1]=0
            // 更新当前小鸟坐标
            col=col-1
          }
        }
      }
      // 重新绘制地图
      this.drawCanvas()
      // 检查游戏是否成功
      this.checkWin()
    }
  },

  /**
   * 自定义函数--方向键：右
   */
  right: function () {
    //如果不在最右侧才考虑右移
    if (col < 7) {
      //如果右侧不是墙或箱子,可以移动小鸟
      if (map[row][col + 1] != 1 && box[row][col + 1] != 4) {
        //更新当前小鸟坐标
        col = col + 1
      }
      //如果右侧是箱子
      else if (box[row][col + 1] == 4) {
        //如果箱子不在最右侧才能考虑推动
        if (col + 1 < 7) {
          //如果箱子右侧不是墙或箱子
          if (map[row][col + 2] != 1 && box[row][col + 2] != 4) {
            box[row][col + 2] = 4
            box[row][col + 1] = 0
            //更新当前小鸟坐标
            col = col + 1
          }
        }
      }
      //重新绘制地图
      this.drawCanvas()
      //检查游戏是否成功
      this.checkWin()
    }
  },

  /**
   * 自定义函数--判断游戏是否成功
   */
  isWin:function() {
    // 使用双重for循环遍历整个数组
    for(var i=0;i<8;i++)
    {
      for(var j=0;j<8;j++)
      {
        // 如果有箱子没在终点
        if(box[i][j]==4 && map[i][j]!=3)
        {
          // 返回false，表示游戏尚未成功
          return false
        }
      }
    }
    //返回true，表示游戏成功
    return true
  },

  /**
   * 自定义函数--游戏成功处理
   */
  checkWin:function() {
    if(this.isWin()){
      wx.showModal({
        title:'恭喜',
        content:'游戏成功!',
        showCancel:false
      })
    }
  },

  /**
   * 自定义函数--重新开始游戏
   */
  restartGame:function(){
    // 初始化地图数据
    this.initMap(this.data.level-1)
    // 绘制画布内容
    this.drawCanvas()
  }
})

三、程序运行结果

1.首页

在这里插入图片描述

2.选择关卡进入游戏界面

3.用箭头按钮控制小鸟移动

在这里插入图片描述

4.重新开始游戏

在这里插入图片描述

5.游戏成功

在这里插入图片描述

四、问题总结与体会

这次试验我学会了更多编写小程序的知识，学会了公共JS文件应该怎么使用和更加复杂的逻辑实现。

墨墨沉香
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
移动软件开发实验三——视频播放小程序
Karthus77的博客
08-20 831
移动软件开发实验三
2022年夏季《移动软件开发》实验三报告
欢迎一起来学习
08-20 368
2022年夏季《移动软件开发》实验三报告
2023年夏季《移动软件开发》实验报告——实验五
m0_61336760的博客
09-04 122
这次试验我学会了更多编写小程序的知识，可以帮助我更好的、更漂亮的写个人项目。
2023年夏季《移动软件开发》实验报告——实验4
m0_61336760的博客
08-29 93
这次实验为我的个人项目提供了新的思路，也学会了更多编写小程序的知识，对于跳转界面也有了更深的体会。
2023年夏季《移动软件开发》实验报告-实验五
qq_62314633的博客
09-04 181
本次实验较为复杂，界面设计和相关逻辑都相较于以往实验难了很多，但根据实验手册一步步配置和实现，还是能够较好的完成的。通过本次实验了解到了swiper组件实现轮播图，能够让整体界面更加美观，以及对于wx:for的用法更加熟悉。
中国海洋大学2023年夏季《移动软件开发》实验报告5
Peter1146717850的博客
09-05 101
微信小程序实验：高校新闻网
2024年夏季《移动软件开发》实验报告一
08-19
2024年夏季《移动软件开发》实验报告一
此仓库用于记录本人在2024年夏季学期的移动软件开发课程学习过程及实验~
08-29
此仓库用于记录本人在2024年夏季学期的移动软件开发课程学习过程及实验~
2022年夏季《移动软件开发》实验报告
欢迎一起来学习
08-17 228
2022年夏季《移动软件开发》实验报告
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-27 1464
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
【项目】云备份系统笔记
m0_73713491的博客
08-27 984
就包含一个类，config，是读取配置文件的类，因为配置文件只有一份，所以可以采用单例模式，把config类的构造函数私有化，只能通过一个公共成员函数getinstance（）来创建对象（new config（）），在类的内部可以调用私有化构造函数，构造函数里面再调用读取配置文件的函数，用自己实现的工具类读取配置文件，将读到的内容放到一个字符串中，然后再将字符串用Json进行序列化，然后给类中的成员变量进行赋值，类中的成员变量就包含了cloud.conf里面包含的信息，一一对应。
jQuery基础——DOM
m0_54066656的博客
08-27 1937
JQ基础——DOM操作
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 1652
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
python12 中，No module named‘distutils‘错误
热门推荐
qq_43557600的博客
08-27 1万+
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
vue ref和reactive区别
灰海
08-25 5729
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 675
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
JavaWeb——前端工程化
m0_50460160的博客
08-30 648
通过解构赋值，可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性;ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。该语句将数组 [1,2,3]中的第一个值赋值给a变量，第二个值赋值给b变量，第三个值赋值给c变量。ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序;并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动;
Vue动态表头数据
lplovewjm的博客
08-27 609
本文主要解决场景：表头不固定、从后端数据中拿取表头并渲染到页面中。
2021年夏季美股软件业复苏与观测市场趋势关键点
这份"美股软件行业：2021年夏季虚拟巴士之旅要点"的研究报告于2021年6月7日发布，由EquityResearch和Technology领域的专家撰写。报告聚焦于美国软件行业的最新动态，主要讨论了两个关键见解： 首先，管理层对行业的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值