0基础开发第六个微信小程序：推箱子游戏

最新推荐文章于 2024-10-02 11:49:12 发布
最新推荐文章于 2024-10-02 11:49:12 发布
阅读量591 收藏 8
点赞数 12
文章标签： 微信小程序 游戏 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iahsjs/article/details/141869605
版权

一、程序运行结果

在这里插入图片描述
在这里插入图片描述

二、实验目标

1、综合应用所学的知识创建完整的推箱子游戏；2、熟练掌握 和绘图 API。
3、自己设计额外功能：计分

三、实验步骤

1.创建项目，修改app.json中的pages：

{
  "pages": [
    "pages/index/index",
    "pages/game/game"
  ],

ctrl+s保存即可

2.删除模板中自带的多余的代码

在这里插入图片描述

3.创建images文件夹，右键在资源文件中打开，复制粘贴图片素材（https://gaopursuit.oss-cn-beijing.aliyuncs.com/course/mobileDev/boxgame_images.zip）

创建utils文件夹，新建data.js文件

4.导航栏设计：

在app.json中：

 "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "推箱子",
    "navigationBarBackgroundColor": "#E64340"
  },

在这里插入图片描述

5.公共页面与首页设计：

在app.wxss中：

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

}

在index.wxml中设计首页布局：

<view class="container">
  <view class="title">游戏选关</view>
  <view class="levelBox">
    <view class="box">
      <image src="/images/level01.png"></image>
    </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.游戏页面设计：

由于暂时没有做跳转至游戏页面的逻辑，于是我们可以调整编译模式，从“普通编译”转为“添加编译模式”，调整启动页面和启动参数如下：

在这里插入图片描述

设计游戏页面布局：

在game.wxml中：

<!--pages/game/game.wxml-->
<view class='container'>
<!--关卡提示-->
<view class='title'>第1关</view>
<!--游戏画布-->
<canvas canvas-id='myCanvas'></canvas >
<!--方向键-->
<view class ='btnBox'>
  <button type= 'warn'>↑</button >
  <view>
    <button type = 'warn'>←</button >
    <button type = 'warn'>↓</button >
    <button type = 'warn'>→</button >
  </view >
</view>
  <!--重新开始-->
  <button type= 'warn'>重新开始</button >
</view>

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

编译运行如下：

在这里插入图片描述

7.公共逻辑实现：

在utils.js中配置游戏地图数据和接口:

在这里插入图片描述

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

最后在game.js中引用公共js文件，代码 为：

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

8.首页逻辑实现：

展示关卡列表：在index.js中：

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

在idnex.wxml中：

<view class="container">
  <view class="title">游戏选关</view>
  <view class="levelBox">
    <view class="box" wx:for='{{levels}}'wx:key='levels{{index}}'>
      <image src='/images/{{item}}'></image>
      <text>第{{index+1}}关</text>
    </view>
  </view>
  
</view>

编译运行效果如下：

在这里插入图片描述

点击跳转功能逻辑实现：

在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>

在js文件中实现函数：

chooseLevel:function(e){
  let level=e.currentTarget.dataset.level
  wx.navigateTo({
    url:'../game/game?level='+level
  })
}，

在game.js中接受图片信息：

  data: {
    level:1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(options) {
let level=options.level
this.setData({
  level:parseInt(level)+1
})
  },

在wxml中修改布局，设计关卡提示：

<!--pages/game/game.wxml-->
<view class='container'>
<!--关卡提示-->
<view class='title'>第{{level}}关</view>
<!--游戏画布-->

编译运行结果如下：

在这里插入图片描述
在这里插入图片描述

9.游戏逻辑实现：

在game.js中保存一些初始数据，设计初始化函数，绘制地图函数，并在onload函数中调用：

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]
  ]
  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
Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let level=options.level
    console.log('Received level:', level);

    this.setData({
      level:parseInt(level)+1
    })
    this.ctx=wx.createCanvasContext('myCanvas')
    this.initMap(this.data.level-1)
    this.drawCanvas()
  },

  initMap:function(level) {
    let mapData = data.maps[level];
    if (!mapData || !Array.isArray(mapData) || mapData.length < 8 || !Array.isArray(mapData[0])) {
        console.error('Invalid map data for level:', level);
        return;
    }

    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()
  },

编译运行结果如下：

在这里插入图片描述

10.方向键逻辑实现：

在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>

</view>

在js中设计对应的逻辑：

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()
 
    }
  },
  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()
 
    }
  },
  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()

    }
  },

  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()
 
    }
  },

11.游戏胜负检验逻辑：

在js文件中设计检验函数并在上下左右四个函数中调用（这里只写了up函数的例子）：

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
      })
    }
  },
  
  

  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()
    }
  },

12.重新开始功能的逻辑实现：

在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>

在js中实现逻辑：

  restartGame:function(){
    this.initMap(this.data.level - 1)
    this.drawCanvas()
  },

OK，到这里功能就全部实现完了

四、问题总结与体会

​ 通过本次实验，我受益匪浅，切身体会了一个游戏制作过程的各种逻辑交互以及画面的修改绘制，还有各个页面的美化与布局，大大提高了我的动手能力。即便是一个简单的推箱子，想要实现也需要莫大的努力，今后我更应该努力提高自己。

​ 额外功能，我增加了计数功能，实时记录玩家的得分状况，下面是部分代码示例：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    level: 1,
    score: 0 
  },
   // 更新分数函数
   updateScore: function() {
    let score = 0;
    for (let i = 0; i < 8; i++) {
      for (let j = 0; j < 8; j++) {
        if (box[i][j] == 4 && map[i][j] == 3) {
          score += 10;
        }
      }
    }
    if (score > 100) score = 100; // 确保得分不会超过100

    this.setData({
      score: score
    });

    this.updateScoreDisplay();
  },
  
  updateScoreDisplay: function() {
    this.setData({
      scoreText: `您的得分：${this.data.score}`
    });
  },
  
  /**
   * 生命周期函数--监听页面加载
   */

在这里插入图片描述

04年码农
关注
2023暑假小程序开发 实验6：推箱子游戏
zhangyihuai123的博客
09-05 415
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。1、问题：①运行代码后发现按钮部分 没有显示完全，根据询问老师和查阅资料，找到问题，并解决。发现删除 "style": "v2",即可。具体原因可能是因为：小程序一直以来采用的都是 AppService 和 WebView 的双线程模型，基于 WebView 和原生控件混合渲染的方式，小程序优化扩展了 Web 的基础能力，保证了在移动端上有良好的性能和用户体验。
微信小程序开发—推箱子小游戏
Sslyda的博客
09-03 1920
在本次实验中按照实验方案进行微信小程序推箱子小游戏的制作，在实验过程中遇见的主要问题在于还是微信更新后Canvas接口函数无法调用，这里我调整了工具的版本为2.20.3.才能够调用接口通过本次实验能够让我在开发过程中熟练掌握绘图相关API和游戏设计判读逻辑过程， 为我后期的项目的逻辑判读编写提供了经验，收获颇丰。
实验6：推箱子游戏
whyz666的博客
09-03 1709
在本次实验中，我综合运用了所学的前端开发知识，成功创建了一个完整的推箱子游戏。通过这个项目，我不仅巩固了对微信小程序开发的理解，还提升了实际操作能力。在项目开始之前，我首先进行了详细的规划和设计。明确了项目的功能需求，包括地图布局、玩家移动、箱子推送、碰撞检测和胜利条件等。通过绘制游戏流程图和界面原型图，我对项目的整体结构有了清晰的认识。这一步骤帮助我在开发过程中有条不紊地进行，避免了不必要的返工。在代码编写过程中，我充分利用了微信小程序提供的各种组件。例如，使用<view>和<button>
OUC 2024夏 移动软件开发 实验六：推箱子游戏
m0_73384012的博客
09-06 1228
新增上下关按钮添加了上下关按钮的功能，用户点击“上一关”按钮时，会跳转到上一关，第一关没有上一关，按钮镂空；“下一关”按钮类似。-- 按钮容器 --> < view class = " button-container " > <!-- 上一关 --> < button class = " custom-btn {{level == 1?
微信小程序实验报告六
m0_74307531的博客
09-03 764
本次实验，在初始化游戏画面的时候老是出现错误，level值无法传输。后来发现是双重循环中j 被错写为i，导致循环出错。写代码一定要认真仔细，出现错误不要怕，根据错误的情况找到出错的部分，对症下药。
实验6 推箱子小游戏
m0_62135967的博客
09-05 355
在编写推箱子游戏微信小程序代码的过程中，我遇到了一些问题，同时也学到了一些有关编程的知识和经验。首先，我需要学习如何设计游戏的逻辑和界面。通过阅读相关教程和参考示例代码，我了解到推箱子游戏需要设计地图、角色和箱子等元素，并通过用户的操作来移动角色和推动箱子。这个过程让我对游戏设计有了更深入的了解。其次，我遇到了如何处理用户操作和游戏逻辑的问题。我需要学习如何监听用户的按键事件，并根据用户的操作来移动角色和箱子。同时，我也学到了如何判断游戏胜利的条件，即箱子是否都被推到目标位置。
微信小程序源码打包合集 游戏商城抽奖转盘预约点餐等-1
热门推荐
chenhao0568的专栏
06-13 1万+
下载 2019.06.13更新 2.16 GB共1,848 个文件，487 个文件夹。 文件夹 PATH 列表 卷序列号为 0FEA-0BC6 E:. │ 001各种结构文件列表生成.bat │ 目录列表_树2019.06.13更新.txt │ ├─20190612后收集游戏 │ │ 小程序版转盘游戏 &&一款解决生活分歧的小程序BifurcationTermin...
2024年夏季《移动软件开发》实验报告——实验六：推箱子游戏
yvmanqi的博客
09-03 564
首页呈现关卡菜单，玩家可以自由选择4个游戏关卡 游戏关卡页面可以通过点击上下左右4个按钮实现小鸟的移动 在游戏关卡页面游戏成功后会弹出提示框，并且可以选择重新开始游戏
微信小程序实现推箱子游戏
11-01
微信小程序是一种轻量级的应用开发...总的来说，实现微信小程序推箱子游戏需要掌握微信小程序的基础语法、逻辑编程以及游戏设计原则。通过这样的项目实践，开发者不仅能提升编程技能，还能锻炼问题解决和逻辑思维能力。
2021级中国海洋大学移动软件开发项目6实验报告
09-05
本次实验是2021级中国海洋大学移动软件开发项目的第六次实验，专注于构建一个完整的推箱子游戏。实验的目标是让学生能够综合运用所学的软件工程知识，特别是移动应用开发技术，来设计和实现一个交互性强、功能完备的...
第6-1课：A* 算法
oRbIt 的专栏
09-22 684
在第3-7课：推箱子游戏中，我们已经应用了 A* 算法，但是并没有展开介绍该算法的原理，这一课来补上。A（A-Star）算法和 Dijkstra 算法一样，都是求最短路径的搜索算法，不过 Dijkstra 算法比较直接，上来就是 BFS 搜索；A 算法则用了一点“启发”技术，所谓的启发，其实都是很简单的距离向量的判断。但是不要小看这一点“启发”，会使得 A* 算法在搜索效率上优于 Dijks...
分享40个Python游戏源代码总有一个是你想要的
adendean的博客
10-18 1071
分享40个Python游戏源代码总有一个是你想要的
微信小程序：一个小程序跳转至另一个小程序
snowball的博客
09-30 715
这个 API 接受一个对象参数，其中可以包含目标小程序的 appId、path（目标小程序内的页面路径）、extraData（传递给目标小程序的参数）等。1.1、目标小程序需开放被跳转：目标小程序需要在其 app.json 文件中配置 navigateToMiniProgramAppIdList，将源小程序的 AppID 加入其中。在目标小程序的 app.json 文件中，添加 navigateToMiniProgramAppIdList 字段，并包含源小程序的 AppID。
微信小程序中的 `＜block＞` 元素：高效渲染与结构清晰的利器
everfoot的博客
10-01 1400
总的来说，是否使用<block>取决于具体的应用场景。如果你的循环不需要额外的样式或者DOM结构，那么使用<block>会更加合适。如果循环项需要独立的样式或者事件绑定，那么使用<view>可能会更加合适。通过合理使用<block>，你可以保持WXML结构的清晰和简洁，同时避免不必要的DOM层级和性能开销。在微信小程序的开发中，掌握<block>的用法和优势将帮助你更高效地构建和维护你的应用。
基于微信小程序的健康管理系统(源码+定制+文档）
程序员阿龙的博客
09-30 1355
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
微信小程序常见问题
最新发布
2301_76246515的博客
10-02 645
app.json 文件内容错误] app.json: 在项目根目录未找到 app.json。
开发微信小程序 基础03
2201_75454657的博客
09-28 906
WXSS
微信小程序使用picker，数组怎么设置默认值
肖肖肖丽珠的博客
09-30 609
planIndex是选中的下标。默认如果数组没有-1.你让他默认等于-1以达到显示请选择的字样。结果就会导致弹框变成这样的状态。默认先显示请选择XXX。如果默认value是0的话，他就直接默认显示数组的第一个了。.label : '请选择'//试了默认给了-1.结果点开选项列表第一个之前多了一个空的选项。{ label: "生效", value: 0 },{ label: "完结", value: 1 },{ label: "中断", value: 2 },
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值