微信小程序开发—推箱子小游戏

最新推荐文章于 2025-09-10 16:05:08 发布
原创 最新推荐文章于 2025-09-10 16:05:08 发布 · 2.5k 阅读 · 18 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#微信小程序 #小程序

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

 姓名：林舒坦   学号：22020007056
         课程名称：中国海洋大学24夏 《移动软件开发》
实验6：推箱子游戏             

一、实验目标

1、综合应用所学的知识创建完整的推箱子游戏
2、熟练掌握和绘图API。

二、实验步骤

1.预先准备

 本次实验所要使用的图片素材下载链接如下

https://gaopursuit.oss-cn-beijing.aliyuncs.com/course/mobileDev/boxgame_images.zip

 解压后将images文件夹替换到新建的项目中的images文件夹相应位置即可

2.创建微信小程序项目以及内部文件修改配置

使用微信开发者工具创建一个新项目，并进行如下操作：

(1)删除utils文件夹及其内部所有内容。
(2)删除 pages文件夹下的 logs目录及其内部所有内容。
(3)删除index. wxml和 index. wxss中的全部代码。
(4)删除 index. js中的全部代码,并且输入关键词“page”找到第二个选项按回车键让其自动补全函数。
(5)删除app. wxss中的全部代码。
(6)删除 app.js 中的全部代码,并且输入关键词“app”找到第一个选项按回车键让其自动补全函数。
(7)添加一个新文件夹，命名为images，用下载的文件夹替换其内容。
(8)添加一个新文件夹，命名为images，在内部新建一个data.js文件。

在这里插入图片描述

3.初始化配置

(1)导航栏设计
在app.json中添加代码如下:

{
  "pages": [
    "pages/index/index",
    "pages/game/game"
  ],
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#e64340",
    "navigationBarTitleText": "推箱子游戏"
  }
}

在app.WXSS添加代码如下：

/**app.wxss**/
.container {
  height: 100vh;
  color:#e64340;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  font-weight: bold;
} 
.text{
    font-size: 18pt;
}

在这里插入图片描述

4.页面设计

(1)首页设计
index.WXML代码片段修改如下：

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

index.WXSS修改如下：

/*关卡列表*/

.levelBox{
    width: 100%;
}
/*单个关卡*/
.title{
    font-size: 50rpx;
}
.box{
    width: 50%;
    float:left;
    margin: 20rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*选关图片*/
image{
    width: 300rpx;
    height: 300rpx;
}

效果如图
在这里插入图片描述

(2)游戏页面设计
同时对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>

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;
}

效果如图
在这里插入图片描述

5.逻辑实现

(1)首先在每个文件夹的js中最上方添加如下代码引用存在utils里面的数据和函数

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

(2)初始化utils/data
首先先初始化四张地图
将utils/data.js文件添加代码如下：

//地图数据：1=墙，2=路，3=终点，4=箱子，5=人 ，0=墙外围

//关卡1
var map1=[
    [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 map2=[
    [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],
}

(3)首页逻辑
将index.js文件添加代码如下：

Page({    //将之前images中的地图图片导入出来，用于页面的展示
    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,
        })
    },
})

在这里插入图片描述

(4)游戏页面逻辑
在game.js文件中代码如下：

var data=require('../../utils/data.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,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,0,0,0,0,0,0,0,0],
]
var w = 40
var row = 0
var col = 0
Page({

  /**
   * 页面的初始数据
   */
  data: {
    level:1
  },

  initMap:function(level){       //对地图数据运用两层for循环进行赋值
    let mapData = data.maps[level]
    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(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]!=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-1]!=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+1]!=1&&box[row][col+2]!=4){
                    box[row][col+2]=4
                    box[row][col+1]=0
                    col=col+1
                }
            }
        }
        this.drawCanvas()
        this.checkWin()
    }
},
restartGame:function(){        //重新开始游戏，即重新初始化地图并渲染
    this.initMap(this.data.level-1)
    this.drawCanvas()
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let level = options.level
    this.setData({
      level: parseInt(level) + 1
    })
    this.ctx = wx.createCanvasContext('myCanvas')
    this.initMap(level)
    this.drawCanvas()
  },
  isWin:function(){          //判断是否所有箱子都在猪上，即游戏是否成功
      for(var i=0;i<8;i++){
          for(var j=0;j<8;j++){
              if(box[i][j]==4&&map[i][j]!=3){
                  return false
              }
          }
      }
      return true
  },
  checkWin:function(){
      if(this.isWin()){
          wx.showModal({             //如果成功就展示成功页面
            title: '恭喜',
            content: '游戏通关',
            showCancel:false,
            success (res) {
                if (res.confirm) {
                    wx.redirectTo({          //点击确定后跳转回关卡页
                        url: '../index/index',
                      })
                } 
            }
      })
    }
  },
})

三、程序运行结果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

四、问题总结与体会

 在本次实验中按照实验方案进行微信小程序推箱子小游戏的制作，在实验过程中遇见的主要问题在于还是微信更新后Canvas接口函数无法调用，这里我调整了工具的版本为2.20.3.才能够调用接口
 通过本次实验能够让我在开发过程中熟练掌握绘图相关API和游戏设计判读逻辑过程， 为我后期的项目的逻辑判读编写提供了经验，收获颇丰。

Sslyda
关注
微信休闲小游戏-推箱子-包含源码-说明文档-演示视频.zip
05-01
现在有很多的休闲类游戏，而我们所实现的这类游戏应该是玩法最热门的一种，这款休闲类游戏是当下比较流行的推箱子，是一款很容易让人着迷的游戏，点击开始后，通过控制我方的人物进行移动，并且需要将三个位置的空箱子搬到指定的位置上，一单箱子搬到墙角的话，则游戏宣告失败。 3.2需求分析 游戏用户包括开发者和游戏玩家。 游戏玩家通过微信打开游戏，点击开始按钮，开始游戏。根据游戏提示的玩法开始游戏，并且随时查看自己的步数情况。 首先先设计游戏界面，界面是游戏给玩家的第一印象，对于本项目实例来说大致可以分为游戏前台和游戏后台。前台负责游戏的界面与接受玩家发出的指令，前台还负责游戏音效，游戏初始化以及将玩家的单击触发事件发送给后台，并接受后台所发送的分数数据。后台则负责处理数据，将数据反馈给前台，还负责将玩家的得分情况排行情况输入数据库中。
微信小程序制作工具gamemaker（积木式游戏）入门案例——飞机大战
Y2807593076的博客
09-12 5255
本游戏是基于微信小程序制作工具微信小游戏官网的入门教学视频完成的。游戏制作所见即所得,快速上手、无需代码丰富的官方组件,排行榜、性能调优一键完成个性化素材、自定义组件,高级画板工具该游戏的制作是基于微信小程序制作工具中的经典飞小游戏的基础之上的，同时添加了战机与敌机的碰撞，提高了敌机发射子弹的速度，增加了小游戏的难度。首先让我们来看一下该游戏（飞机大战）的演示视频飞机大战演示视频接下来让我们开始我们的游戏创作之旅吧！以上就是我们使用微信小程序基于积木式游戏制作飞机大战的基本过程。
微信小程序｜推箱子小游戏
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
01-29 2381
推箱子游戏是一种经典的益智游戏，通过移动箱子将其推到指定位置，完成关卡的过程。随着小程序的发展，越来越多的人开始在手机上玩推箱子游戏。本文将介绍如何利用小程序实现推箱子游戏，并分享一些技术实现的方法。
2023暑假小程序开发 实验6：推箱子游戏
zhangyihuai123的博客
09-05 706
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。1、问题：①运行代码后发现按钮部分 没有显示完全，根据询问老师和查阅资料，找到问题，并解决。发现删除 "style": "v2",即可。具体原因可能是因为：小程序一直以来采用的都是 AppService 和 WebView 的双线程模型，基于 WebView 和原生控件混合渲染的方式，小程序优化扩展了 Web 的基础能力，保证了在移动端上有良好的性能和用户体验。
基于微信小程序实现推箱子休闲小游戏项目设计演示【附项目源码+论文说明】
螺旋翻转大大雄
11-09 751
跳一跳”的出现，让人们在碎片的时间里让自己得到休息，满足了人们在休息和生活的间隙中的娱乐需要，游戏小程序不会占据你很长的时间，也不会让你在游戏的过程中感到费劲，甚至连安装都不需要，触手可及，让用户在使用场景当下就能够得到即时性地满足和反馈，成为了人们娱乐以及社交需求的扩展，很多的人喜欢上了微信游戏小程序。移动互联网时代，人们使用手机的频率和时间都在增加，大家玩游戏的时间也逐渐被分割变得更加破碎，在零碎的短时间内，基于移动终端的便利性，用户对于移动端手游的要求往往就是易于理解，操作简便，容易上手。
微信小程序实战进阶————推箱子游戏
y_y_z_y_y_z的博客
09-03 3014
推箱子 微信小程序 自定义组件 倒计时 模块化
微信小程序实现推箱子游戏
恩爸编程
12-06 771
下载项目到本地使用微信开发者工具打开项目编译运行即可。
微信小程序——推箱子小游戏
流楚丶格念的博客
04-23 8801
文章目录项目展示项目链接项目设计配置首页游戏界面 项目展示 项目链接 https://download.csdn.net/download/weixin_45525272/17061639 项目设计 配置 地图数据 /utils/data.js //================================================ //地图数据map1-map4 //地图数据：1墙，2路，3终点，4箱子，5人物，0墙的外围 //================================
微信小程序--推箱子小游戏
m0_73805090的博客
09-03 1275
第 {{level}} 关
2025夏《移动软件开发》实验六
最新发布
2301_79776834的博客
09-10 1471
通过该实验，我学习到了< canas >和绘图API，熟练掌握了真机预览、调试等操作。
微信小程序实验(二)
Annzz123的博客
12-07 3008
通过本实验，学生将了解和掌握一般微信小程序的复杂页面结构设计方法，其中包括页面结构.wxml文件中元素的flex布局方法、轮播图实现、slider组件使用，以及在.js文件中的代码里编写具体的事件处理函数。通过本实验，学生将了解和掌握一般微信小程序的复杂页面结构设计方法，其中包括页面结构.wxml文件中元素的flex布局方法和条件渲染+列表渲染方法，以及在.js文件中的代码里编写具体的事件处理函数。3.3 修改主页面样式文件index.wxss，从而实现底部播放器和播放页面的样式。硬件：个人笔记本电脑。
《移动软件开发》实验1：第一个微信小程序 实验报告
Bluzy's BLOG
08-17 4711
我们发现获取到的用户信息为”微信用户，并非自己个人的用户信息。故我在CSDN上查询相关问题，得知微信在2021年就弃用了bindgetuserInfo函数，故出现了此问题。我们改用getUserProfile得以解决。改动代码部分如下：WXML的button部分和SJ的getMyInfo函数：​正在上传…重新上传取消​。...
简易微信小程序开发——推箱子
追风者
02-27 3536
没有为什么就是突然想学一下子 和前端差不多 html改成了wxml,css改成了wxss, 微信开发者有点优秀 一、开发前准备 首先要注册开发者账号 去微信公众号平台官网https://mp.weixin.qq.com/注册一个小程序账号 然后选择注册小程序 信息填写邮箱激活注册登记之后，要用管理员微信扫一个二维码，顺着来就行了 审核通过之后，你以后就可以...
移动软件开发——实验四
qq_47171671的博客
08-23 503
课程实验
微信小程序实验报告-----学生家教小程序
yh1009的博客
06-19 4667
现今家长望子成龙望女成凤的现象逐渐普遍，并且课堂学习已不满足中国式教育，家长们就愿意花费高昂的费用为自己的孩子请家教，家教市场需求量很大，但家教老师跟这个群体数量又十分短缺，而家教网站又不为大众所熟知，所以一个好的网站辅助宣传工具尤其重要。微信开发者工具是小程序开发的必备工具之一，您可以在其中实时查看小程序的效果，并且可以快速调试和修改代码。在微信小程序开发框架下使用微信开发者工具编写学生家教小程序，在传统家教小程序的基础上作出一定的改变，使得家教小程序的界面更加简洁和美观，使用户能更加快捷的操作。
实验1报告
m0_73624048的博客
08-19 2449
对于基础库2.27.1及以上版本，插件接口已经不支持，因此会出现通过接口获取用户头像统一返回默认灰色头像，昵称统一返回 “微信用户”的情况。在本次实验中，我学习并实践了两种创建微信小程序的方法：一是利用快速启动模板快速搭建小程序环境；二是从零开始手动创建小程序项目。通过这两种方式的学习，我对小程序的基本结构和开发流程有了更深入的理解。在手动创建小程序的过程中，我更加熟悉了小程序的文件结构和WXML、WXSS的编写技巧。通过对视图设计和逻辑处理的实际操作，我增强了对小程序开发细节的掌握。
2022-2023第一学期微信小程序期末实训报告
呦菜呦爱玩的博客
11-15 8196
2022-2023第一学期微信小程序期末实训报告 @[TOC](微信小程序小程实训报告) # 一、微信小程序简介 1. 简介 名称：网易云音乐 使用的技术：微信小程序，云服务
实验6：推箱子游戏
m0_74074068的博客
09-03 2120
地图初始化问题在实验初期，实现地图初始化时，遇到了地图元素无法正确加载的问题。通过检查代码，发现是二维数组的初始化未正确同步到画布上。解决方法是确保每个元素的正确定位，并在初始化后立刻调用画布绘制函数，保证地图和界面同步显示。状态管理与回退功能实现实现“回退一步”功能时，面临的最大挑战是如何有效管理游戏状态。为了解决这个问题，采用了状态栈的设计思路，每次移动或推箱子操作前都将当前状态存入栈中。这个设计保证了状态的逐步回退，避免了重置游戏的繁琐操作。多功能按钮逻辑冲突。
实验一 第一个微信小程序
2301_77303935的博客
08-19 1870
开发环境配置问题在开始实验前，配置开发环境时遇到了一些问题，特别是在安装和配置微信开发者工具时。由于缺乏相关经验，导致在初次运行时遇到了一些兼容性问题。通过查阅文档和在线社区，我了解到了如何正确配置环境，并成功解决了这些问题。手动创建小程序的困难在手动从零开始创建小程序的过程中，遇到了代码结构不清晰、组件调用错误等问题。这些问题主要是由于对小程序框架的理解不够深入。为了解决这些问题，我仔细阅读了官方文档，并逐步调试代码，最终成功完成了实验任务。调试和测试阶段的困难。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值