微信小程序--推箱子小游戏

最新推荐文章于 2024-09-19 16:39:47 发布
最新推荐文章于 2024-09-19 16:39:47 发布
阅读量722 收藏 14
点赞数 13
文章标签： 微信小程序 游戏 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73805090/article/details/141860146
版权
新建项目

新建一个空的微信小程序项目。

配置文件

  1. 在pages页面下配置home、game相关页面文件；

  2. 在app.js、app.json和app.wxss文件中进行全局配置；

  3. 新建images文件夹，在文件夹下导入所需图片素材；

  4. 在utils文件夹下的data.js文件夹中配置关卡数据。

功能分析
基础功能：

(1) 首页需要包含标题和关卡列表。 (2) 关卡至少要有4个关卡选项，每个关卡显示预览图片和第几关。 (3) 点击关卡列表可以打开对应的游戏画面。

添加功能：

(1) 为每个关卡添加倒计时功能，限时60秒，超时后若没有通关则提醒用户选择继续游戏或者重新开始。

(2) 为每个关卡添加步数记录功能，每移动一步步数加1。

(3) 为全局添加背景音乐。

(4) 为每个关卡添加撤回功能，用户可以撤回每一步，撤回时计时不暂停，步数不增加。

(5) 为全局添加背景，进一步优化界面。

页面设计与实现
首页

  1. 使用view、image和text标签实现首页标题和关卡列表展示及点击跳转功能：

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

    对应JavaScript函数实现功能：

    Page({
  data: {
    levels: [
      '../../images/level01.png',
      '../../images/level02.png',
      '../../images/level03.png',
      '../../images/level04.png'
    ]
  },
  chooseLevel: function(e) {
    let level = e.currentTarget.dataset.level
    wx.navigateTo({
      url: '../game/game?level=' + level
    })
  },

关卡页面

  1. 使用view，image和text标签实现新闻内容的显示。

  <image id="lb" src="../../images/喇叭.png"></image>
  <view class='title'>第 {{level}} 关</view>
  <view class="container2">  
    <view class="timer">还剩 {{timeLeft}} 秒</view>  
    <text class="walk">步数: {{steps}}</text>
  </view> 
 onLoad: function(options) {
    //获取关卡
    const backgroundAudioManager = wx.getBackgroundAudioManager();  
    backgroundAudioManager.src = '../../music/back.mp3';
    backgroundAudioManager.play();  
  
    //监听背景音频播放结束事件  
    backgroundAudioManager.onEnded(() => {  
      console.log('背景音乐播放结束');  
    });  
  
    //监听背景音频播放错误事件  
    backgroundAudioManager.onError((res) => {  
      console.error('背景音乐播放出错', res.errMsg);  
    });  
    let level= options.level
    //更新页面关卡标题
    this.setData({
      level: parseInt(level) + 1
    })
    //创建画布上下文
    this.ctx = wx.createCanvasContext('myCanvas')
    //初始化地图数据
    this.initMap(level)
    //绘制画布内容
    this.drawCanvas(),
    // 开始倒计时  
    this.startTimer(); 
  },
  startTimer: function() {    
    let timeLeft = this.data.timeLeft;    
    let timerId = setInterval(() => {    
      if (timeLeft > 0) { 
        timeLeft--;    
        this.setData({    
          timeLeft: timeLeft    
        });    
      } else {  // 当timeLeft不大于0时，停止倒计时  
        this.timeOut();    
      }    
    }, 1000);    
    // 将timerId保存到页面的data中，以便可以在其他地方访问它  
    this.setData({  
      timerId: timerId  
    });  
  },   
  timeOut: function() {  
    clearInterval(this.data.timerId);  
    wx.showModal({  
      title: '超时',  
      content: '时间耗尽，您没有过关！是否重新开始？',  
      success: (res) => {  
        if (res.confirm) {  
          this.restartGame();  
        } else if (res.cancel) {  
          console.log('用户点击取消');  
        }  
      }  
    });  
  },

  1. 使用canvas标签实现游戏画布可视化功能。

  <canvas canvas-id='myCanvas'></canvas>

通过addFavorites和addFavorites函数，结合if判断语句和isAddsc的状态实现收藏和取消收藏功能。

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,
    timeLeft: 60, // 初始倒计时60秒  
    steps: 0,
    history: [],
  },
  updateSteps: function() {  
    this.setData({  
      steps: this.data.steps + 1  
    });  
  }, 
​
  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()
  },
​

  1. 使用button组件实现移动功能。

<view class='btnBox'>
    <button type='warn' bindtap='up'>↑</button>
    <view>
      <button type='warn' bindtap='left'>←</button>
      <view class="noUse"> </view>
      <button type='warn' bindtap='down'>↓</button>
      <view class="noUse"> </view>
      <button type='warn' bindtap='right'>→</button>
    </view>
  </view>
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.updateSteps();
      this.saveState();
      //重新绘制地图
      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.updateSteps();
      this.saveState();
      //重新绘制地图
      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.updateSteps();
      this.saveState();
      //重新绘制地图
      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.updateSteps();
      this.saveState();
      //重新绘制地图
      this.drawCanvas()
      //检查游戏是否成功
      this.checkWin()
    }
  },
​

  1. 使用button组件实现重新开始和撤回功能。

  <button type='warn' bindtap='restartGame'>重新开始</button>
  <button bindtap="undo">撤回</button> 
restartGame: function() {
    this.setData({  
      timeLeft: 60, // 假设初始时间为60秒  
      // 重置其他游戏状态...  
    }); 
    //初始化地图数据
    this.initMap(this.data.level - 1)
    //绘制画布内容
    this.drawCanvas();
    this.startTimer();  
  },
saveState: function() {  
    // 假设 getState 是一个函数，返回当前游戏状态的对象  
    let state = this.getState();  
    // 将当前状态添加到历史记录中  
    this.data.history.push(state);  
    // 更新当前步骤  
    this.setData({  
      currentStep: this.data.history.length - 1  
    });  
  },  
    
  // 获取当前游戏状态  
getState: function() {  
    return {  
      map: JSON.parse(JSON.stringify(map)),  // 深拷贝地图  
      box: JSON.parse(JSON.stringify(box)),  // 深拷贝箱子  
      row: row,  
      col: col  
    };  
  },

  1. 检测游戏是否结束。

  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) {
          //返回假，游戏尚未成功
          return false
        }
      }
    }
    //返回真，游戏成功
    return true
  },
​
  checkWin: function() {
    if (this.isWin()) {
      wx.showModal({
        title: '恭喜',
        content: '游戏成功！',
        showCancel: false
      })
    }
  },

效果：

mmmkkkkk0102
关注
Java小游戏项目：推箱子游戏
N_01040709的博客
04-26 2537
下面本次课程为大家带来，经典游戏：“推箱子” 有多少人至今 还没又完全 通关呢？现在不妨来自己做一下，体验一下还没有通关的噩梦，嘿~嘿~~ 推箱子，游戏中玩家只需通过点击方向键上下左右操纵一个小人在不碰撞墙体的情况下吧箱子全部推到终点，那么如何用java编写一款属于自己的推箱子游戏呢？
推箱子小程序
05-30
自己无聊的时候编译的一个小程序，工具用的vs2015 图形库使用的easyx，其中包含知识为循环结构，分支结构，数组，二维数组，二维数组函数传参
微信小程序开发—推箱子小游戏
Sslyda的博客
09-03 1925
在本次实验中按照实验方案进行微信小程序推箱子小游戏的制作，在实验过程中遇见的主要问题在于还是微信更新后Canvas接口函数无法调用，这里我调整了工具的版本为2.20.3.才能够调用接口通过本次实验能够让我在开发过程中熟练掌握绘图相关API和游戏设计判读逻辑过程， 为我后期的项目的逻辑判读编写提供了经验，收获颇丰。
小程序：推箱子游戏
2201_75450113的博客
09-05 272
微信程序小游戏
C语言推箱子小程序
LuvLucifer的博客
04-02 298
前言 在大一上程序设计基础课期末的时候，想着能不能做个游戏玩玩。一开始打算写象棋，后来还是觉得推箱子更经典一点。由于当时水平太差，还用的是DEV，结果肝了一天一夜才赶出来。。。各位将就着看，就图一乐就行。 代码部分 //注意本程序直接复制运行是无法实现的。原因是需要自己插入一些音乐文件，还要做一些小调整来把文件放到指定位置。具体可参考代码内部。此外需要在编译选项的“在连接器命令行输入以下命令”中添加"-static-libgcc" #include <stdio.h> #include &l
推箱子小程序，努力完成ing。
chifensong1138的博客
04-16 279
转载于:https://my.oschina.net/u/3823941/blog/1796489
推箱子-微信小游戏-项目源码
07-07
这是一个微信小游戏项目源码，是经典怀旧的推箱子游戏，共100关卡，以下还有↓ 请用微信开发者工具选小游戏导入即可，可正常编译运行，请放心下载， 类似解锁关卡，一种益智解密的游戏，适合新手入门参考学习，能学...
推箱子-经典游戏-微信小程序-项目源码
07-07
这是一个微信小程序源码【推箱子】游戏项目完整例子，共100关卡，以下还有↓ 通过微信开发工具小程序方式打开，可编译运行，请放心下载， 一个类似解密的玩法，值得参考学习研究，请看相关配套的文章学习...
微信小程序实现推箱子游戏
11-01
微信小程序是一种轻量级的应用开发...总的来说，实现微信小程序推箱子游戏需要掌握微信小程序的基础语法、逻辑编程以及游戏设计原则。通过这样的项目实践，开发者不仅能提升编程技能，还能锻炼问题解决和逻辑思维能力。
MemFire Cloud之微信小程序开发小游戏推箱子
07-31
推箱子游戏是一个经典的益智游戏，玩家需要控制角色将箱子推到指定的位置，以完成关卡任务。游戏场景通常是二维平面，玩家需要通过移动角色来推动箱子，避免箱子被卡住或推错位置。此示例一共有四个关卡，难度不一，...
微信小程序｜推箱子小游戏
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
01-29 1825
推箱子游戏是一种经典的益智游戏，通过移动箱子将其推到指定位置，完成关卡的过程。随着小程序的发展，越来越多的人开始在手机上玩推箱子游戏。本文将介绍如何利用小程序实现推箱子游戏，并分享一些技术实现的方法。
解决推箱子问题的小程序BC源码
05-06
穷举法寻找答案，过到了68关受阻。上传源码以抛砖引玉。
微信小程序-用微信小程序的canvas做的一个小游戏
08-05
微信小程序demo 试验性质的一个微信小程序，用canvas做的一个类似flappy-bird的小游戏。 包含一些基本的功能：躲避障碍物、计分、排行榜等等。后端的工程也一并上传了，在java目录中，很简单的一个SpringMVC工程。 游戏原型见这里。 截图 使用说明 直接git clone下来，用微信开发者工具导入即可。 导入的时候，最好填上appid，原因下方说明。 注意事项 小程序目前还在公测状态，个人可以去公众平台上申请，但无法认证，最终的程序也无法发布。不过对于demo而言，有appid，能在手机上预览就可以了。 如果不填写appid，小程序无法在手机上预览，只能在开发者工具里使用。 小程序要求后端接口都是https的（必须事先在公众平台上配置好），对个人而言搞https证书实在太麻烦了。有两个办法绕过去：不填写appid，就不会有https的限制，但这样就不能在手机上预览；或者使用代理，将针对https://xxx的请求都代理到http://localhost:8080。我的做法是使用神器Charles的SSL Proxy和Map Remote功能，实现对https请求
基于微信小程序非Canvas的五子棋小游戏demoWXApp-FiveStone-master.zip
09-25
基于微信小程序非Canvas的五子棋小游戏demoWXApp-FiveStone-master.zip
微信小游戏开发Canvas资源汇总
aifupi7268的博客
05-04 316
Demo： 微信小程序demo组件：股票分时图 微信小程序小组件：仿直播点赞气泡效果，基于Canvas 优质demo推荐：二维码生成器；使用canvas与纯JS版二维码生成 微信小程序学习用完整demo：canvas涂鸦（含node后端） 微信小程序canvas demo：黑客帝国metrix效果、渐变时钟 微信小程序优质demo推荐：转盘抽奖：Canvas绘制可配置(已...
canvas在小程序里写小游戏
郊眠寺
12-31 1718
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
【微信_小游戏_canvas_基础_笔记9】
adminwxs的博客
11-15 171
微信_小游戏_canvas_基础_笔记9
【无标题】微信小程序的一些关于Canvas用法(实战篇)
最新发布
qq_43271846的博客
09-19 1241
微信小程序Canvas画圆控制数字
使用小程序制作一个飞机大战小游戏
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
11-17 5256
此文主要基于微信小程序制作一个飞机大战小游戏，上手即用，操作简单。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值