小程序：推箱子游戏

已于 2023-09-18 15:39:35 修改
阅读量235 收藏 1
点赞数
文章标签： 游戏
于 2023-09-05 16:27:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75450113/article/details/132695019
版权

一、实验目标

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

2、熟练掌握canvas和绘图API。

二、实验步骤

2.1 项目准备

  1. 创建项目并创建游戏页面（将app.json文件内pages属性中的“pags/logs/logs改成“pages/game/game”，ctrl+S保存）。
  2. 删除utils和logs目录及其内部所有内容。
  3. 删除index.wxml、index.wxss和app.wxss全部代码。
  4. 删除index.js和app.js中全部代码。并分别输入page和app回车补全函数。

2.2 页面设计

  1. 在app.wxss中设置页面窗口和顶端标题的公共样式
  2. 顶端标题：view容器；关卡列表：view容器，内部使用数组循环。
  3. 效果如图所示，具体代码见2.4。

请添加图片描述

  1. 游戏页面设计view，整体容器和顶端标题；canvas，游戏画布。具体代码见2.4。

请添加图片描述

2.3 逻辑实现

2.3.1 公共逻辑和首页逻辑

功能实现：展示关卡列表

  1. 在utils/data.js中配置游戏地图的数据，使用module.exports语句暴露数据接口。

  2. index.js中data 录入关卡图片的数据信息

  3. 关卡对应的view组件添加wx:for属性循环显示关卡列表数据和图片。

  4. 为关卡列表项目添加点击事件。利用bindtap绑定chooseLevel函数，并且使用data-level属性携带关卡图片下标信息。

  5. 效果如图所示，相关代码件2.4代码。
    请添加图片描述

2.3.2 游戏页逻辑

功能实现：显示当前是第几关；游戏地图的绘制；4个方向键可以移动游戏主角；点击重新开始按钮可以是游戏页面还原为最初状态。

  1. 显示提示图。首页逻辑中已经实现页面跳转并携带关卡对应的图片信息,游戏页面需接收关卡信息,并显示对应的图片内容。此时从首页点击不同的关卡图片就可以实现跳转。

  2. 游戏逻辑实现。首先在game.js文件的顶端记录一些游戏初始数据信息。其后，初始化游戏画面。首先根据当前第几关读取对应游戏信息，并更新到初始游戏数据中。在game.js中添加initMap函数，用于初始化游戏地图数据；添加自定义函数drawCanvas,用于地图信息绘制到画布上；在onLoad函数中调用自定义函数initMap和drawCanvas。

请添加图片描述

  1. 绑定方向键。修改game.wxml页面中的4个方向键，为其绑定点击事件。在game.js文件添加自定义函数up,down,left,right，用于实现小鸟的移动。

  2. 在game.js文件中的data中添加自定义函数isWin，用于判断游戏成功与否。添加自定义函数checkWin，要求一旦游戏成功就弹出游戏提示对话框。

  3. 重新开始游戏，添加自定义restartGame函数，用于重新开始游戏。具体代码见2.4。

2.4 代码

2.4.1 html
<!--pages/index/index.wxml-->
<view class="container">
    <view class="title">游戏选关</view>
    <view class="levelBox">
        <view class="box" wx:for="{{levels}}" wx:key="levels{{index}}" bind:tap="chooseLevel" data-level = '{{index}}'>
            <image src="/images/{{item}}" mode=""/>
            <text>第{{index+1}}关</text>
        </view>
    </view>
</view>
<!--pages/game/game.wxml-->
<view class="container">
    <view class="title">游戏选关</view>
    <view class="levelBox">
        <view class="box" wx:for="{{levels}}" wx:key="levels{{index}}" bind:tap="chooseLevel" data-level = '{{index}}'>
            <image src="/images/{{item}}" mode=""/>
            <text>第{{index+1}}关</text>
        </view>
    </view>
</view>
2.4.2 css
/* pages/index/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;
}

/* pages/game/game.wxss */
canvas{
  border: 1rpx solid;
  width: 304px;
  height: 304px;
}

.btnBox{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btnBox view{
  display: flex;
  flex-direction: row;
}

.btnBox button{
  height: 38px;
}

button{
  margin: 10rpx;
}
2.4.3 js
// pages/index/index.js
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,
    })
  }
    /**
   * 系统默认函数省略
   */
})

// pages/game/game.js
var data = require('../../utils/data')
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 = 38
var row = 0
var col = 0
Page({

  /**
   * 页面的初始数据
   */
  data: {
    level:1,
    ctx:"",
  },
  initMap:function(level){
    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][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(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
      })
    }
  },
  restartGame:function(){
    this.initMap(this.data.level - 1)
    this.drawCanvas()
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let level = options.level
    this.setData({
      level:parseInt(level)+1
    })
    this.ctx = wx.createCanvasContext('myCanvas')
    this.initMap(level)
    this.drawCanvas()
  }
     /**
   * 系统默认函数省略
   */
})
// utils/data.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]
}

三、程序运行结果

  1. 以第二关为例，进入第二关后，页面效果如下，使用方向按钮控制小鸟推动箱子。
    请添加图片描述

  2. 箱子全部盖住小猪后，弹出游戏成功面板，效果如下所示。

请添加图片描述

  1. 如若像重开游戏，点击重新开始，刷新页面，效果如下。

请添加图片描述

Rankle°ß
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Java小游戏项目：推箱子游戏
N_01040709的博客
04-26 2521
下面本次课程为大家带来，经典游戏：“推箱子” 有多少人至今 还没又完全 通关呢？现在不妨来自己做一下，体验一下还没有通关的噩梦，嘿~嘿~~ 推箱子，游戏中玩家只需通过点击方向键上下左右操纵一个小人在不碰撞墙体的情况下吧箱子全部推到终点，那么如何用java编写一款属于自己的推箱子游戏呢？
推箱子小程序
05-30
自己无聊的时候编译的一个小程序，工具用的vs2015 图形库使用的easyx，其中包含知识为循环结构，分支结构，数组，二维数组，二维数组函数传参
推箱子小程序，努力完成ing。
chifensong1138的博客
04-16 264
转载于:https://my.oschina.net/u/3823941/blog/1796489
C语言推箱子小程序
LuvLucifer的博客
04-02 274
前言 在大一上程序设计基础课期末的时候，想着能不能做个游戏玩玩。一开始打算写象棋，后来还是觉得推箱子更经典一点。由于当时水平太差，还用的是DEV，结果肝了一天一夜才赶出来。。。各位将就着看，就图一乐就行。 代码部分 //注意本程序直接复制运行是无法实现的。原因是需要自己插入一些音乐文件，还要做一些小调整来把文件放到指定位置。具体可参考代码内部。此外需要在编译选项的“在连接器命令行输入以下命令”中添加"-static-libgcc" #include <stdio.h> #include &l
解决推箱子问题的小程序BC源码
05-06
穷举法寻找答案，过到了68关受阻。上传源码以抛砖引玉。
基于微信小程序的推箱子小游戏
11-25
推箱子游戏是一种经典的逻辑益智游戏，玩家需要通过推动箱子到达指定位置来完成关卡。在微信小程序平台上实现这样的游戏，需要掌握一系列的IT知识，主要包括数据结构、算法以及微信小程序的开发技术。 1. **数据...
微信小程序实现推箱子游戏
11-01
微信小程序是一种轻量级的应用开发...总的来说，实现微信小程序推箱子游戏需要掌握微信小程序的基础语法、逻辑编程以及游戏设计原则。通过这样的项目实践，开发者不仅能提升编程技能，还能锻炼问题解决和逻辑思维能力。
vue.js推箱子小游戏代码
07-31
在这个推箱子游戏中，Vue.js被用来管理游戏状态、渲染界面以及处理用户输入。例如，游戏地图、箱子和玩家的位置等数据都可以存储在Vue.js的数据模型中，当这些数据发生变化时，Vue.js会自动更新相应的视图。此外，...
推箱子-微信小游戏-项目源码
07-07
这是一个微信小游戏项目源码，是经典怀旧的推箱子游戏，共100关卡，以下还有↓ 请用微信开发者工具选小游戏导入即可，可正常编译运行，请放心下载， 类似解锁关卡，一种益智解密的游戏，适合新手入门参考学习，能学...
C++实现推箱子小游戏
01-21
本文实例为大家分享了C++实现推箱子小游戏的具体代码，供大家参考，具体内容如下 功能尚为完善。 // ConsoleApplication2.cpp : 定义控制台应用程序的入口点。 // #include stdafx.h #include #include #define KEY...
微信简易小程序------推箱子
03-28
微信小程序 使用大学生 玩闹 微信开发者工具 微信公众平台申请小程序账号 获取appid
简易微信小程序开发——推箱子
01-03
GitHub项目地址：https://github.com/18110581023/BoxGame 没有为什么就是突然想学一下子 和前端差不多 html改成了wxml,css改成了wxss, 微信开发者有点优秀 一、开发前准备 首先要注册开发者账号 去微信公众号平台官网https://mp.weixin.qq.com/注册一个小程序账号 然后选择注册小程序 信息填写邮箱激活注册登记之后，要用管理员微信扫一个二维码，顺着来就行了 审核通过之后，你以后就可以通过自己的账号进入自己的小程序管理界面了。 通过填写信息来完善小程序 二、开发工具 下载网址：https://developers.w
堆箱子微信小游戏源码
11-18
堆箱子是一款非常有创意的益智小游戏，游戏中会有各种有趣的多边形，比如正方形、长方形、三角形甚至是圆球。 游戏方法：触摸屏幕，图形会随着你的手指而移动，你将图形移动到你认为合理的地方，然后松开手指，它就堆放在一起了。
微信小程序——推箱子小游戏
流楚丶格念的博客
04-23 7934
文章目录项目展示项目链接项目设计配置首页游戏界面 项目展示 项目链接 https://download.csdn.net/download/weixin_45525272/17061639 项目设计 配置 地图数据 /utils/data.js //================================================ //地图数据map1-map4 //地图数据：1墙，2路，3终点，4箱子，5人物，0墙的外围 //================================
基于微信小程序实现推箱子休闲小游戏项目设计演示【附项目源码+论文说明】
螺旋翻转大大雄
11-09 402
跳一跳”的出现，让人们在碎片的时间里让自己得到休息，满足了人们在休息和生活的间隙中的娱乐需要，游戏小程序不会占据你很长的时间，也不会让你在游戏的过程中感到费劲，甚至连安装都不需要，触手可及，让用户在使用场景当下就能够得到即时性地满足和反馈，成为了人们娱乐以及社交需求的扩展，很多的人喜欢上了微信游戏小程序。移动互联网时代，人们使用手机的频率和时间都在增加，大家玩游戏的时间也逐渐被分割变得更加破碎，在零碎的短时间内，基于移动终端的便利性，用户对于移动端手游的要求往往就是易于理解，操作简便，容易上手。
image 微信小程序flex_微信小程序：游戏推箱子
weixin_31111015的博客
12-23 979
一、需求分析首页index:1.首页需要包含标题和关卡列表2.至少包括4个关卡选项，每个关卡显示预览图和第几关3.关卡列表点击可以跳转到对应的游戏画面如以下图：游戏页game:1.游戏页需要显示第几关，游戏画面，方向键和重新开始按钮2.点击方向键可以使游戏主角自行移动或推动箱子前进3.游戏画面为8x8小方块组成，包括地板，围墙，箱子，游戏主角小鸟和目的地4.点击重新开始按钮可以使游戏回归到初始位置...
2023暑假小程序开发 实验6：推箱子游戏
zhangyihuai123的博客
09-05 327
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。1、问题：①运行代码后发现按钮部分 没有显示完全，根据询问老师和查阅资料，找到问题，并解决。发现删除 "style": "v2",即可。具体原因可能是因为：小程序一直以来采用的都是 AppService 和 WebView 的双线程模型，基于 WebView 和原生控件混合渲染的方式，小程序优化扩展了 Web 的基础能力，保证了在移动端上有良好的性能和用户体验。
简单易学的推箱子源代码大放送
m0_65334415的博客
03-16 1667
c语言必备项目推箱子来了
FairGuard游戏加固入选《嘶吼2024网络安全产业图谱》
最新发布
FairGuard手游加固(企业官方博客)
07-19 425
FairGuard游戏加固作为游戏安全行业领先的第三方服务商，凭借技术创新、产品服务及市场反馈等多方面优异表现获得业界认可，实力入选移动应用安全细分领域。
推箱子游戏程序开发：绘制游戏局面
"本文主要介绍了如何在Android平台上编写推箱子游戏程序，重点在于绘制游戏局面。游戏局面由矩阵表示，每个单元格用特定字符代表不同的游戏元素，如箱子（B）、墙体（W）等。文章详细阐述了如何利用数据类存储游戏...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值