一、开发前准备

首先要注册开发者账号

去微信公众号平台官网https://mp.weixin.qq.com/注册一个小程序账号

然后选择注册小程序

信息填写邮箱激活注册登记之后，要用管理员微信扫一个二维码，顺着来就行了

审核通过之后，你以后就可以通过自己的账号进入自己的小程序管理界面了。

通过填写信息来完善小程序

二、开发工具

下载网址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

软件名为微信开发者工具

然后界面是这个样子的，可以创建你的小程序工程

开发界面是酱紫的

后续学习可以去官方文档查阅资料，放心，都是中文

三、开发

学习过程是通过书圈的清华科技大讲堂学习的

大家感兴趣可以去看看

嗯

咳咳咳

当当当当~

项目最终效果

因为是个工程，所以只分享游戏页面的js源码了

// pages/game/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]
]
//箱子图层数据
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 = 30//游戏主角小鸟所在的行和列
var row = 0
var col = 0Page({/*** 页面的初始数据*/data: {},/*** 自定义函数--初始化地图数据*/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 pen = this.pen;//先清空画布pen.clearRect(0, 0, 240, 240)//使用双重for循环绘制地图for (var i = 0; i < 8; i++) {for (var j = 0; j < 8; j++) {//默认都是道路let img = 'ice'; //这let怕是相当于const，汗//如果当前位置是墙if (map[i][j] == 1) {img = 'stone';}//如果当前位置是重点else if (map[i][j] == 3) {img = 'pig';}//从图片文件夹选择图片绘制地图pen.drawImage('/images/icons/' + img + '.png', j * w, i * w, w, w)//叠加绘制箱子if (box[i][j] == 4) {pen.drawImage('/images/icons/box.png', j * w, i * w, w, w)}}}//叠加绘制小鸟pen.drawImage('/images/icons/bird.png', col * w, row * w, w, w)//渲染画布，重要！！,相当于一个结尾pen.draw()},/*** 自定义函数--方向键：上*/up: function() {//如果小鸟不在最顶端才考虑上移if (row != 0) {//如果上方不是墙也不是箱子if (map[row - 1][col] != 1 && box[row - 1][col] != 4) {row--;}//如果上方是箱子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--;}}}//重新绘制地图this.drawCanvas();//检查游戏是否成功this.checkWin();}},/*** 自定义函数--方向键：左*/left: function() {//如果小鸟不在最左端才考虑左移if (col != 0) {//如果左方不是墙也不是箱子if (map[row][col - 1] != 1 && box[row][col - 1] != 4) {col--;}//如果左方是箱子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--;}}}//重新绘制地图this.drawCanvas();//检查游戏是否成功this.checkWin();}},/*** 自定义函数--方向键：下*/down: function() {//如果小鸟不在最底端才考虑下移if (row != 7) {//如果上方不是墙也不是箱子if (map[row + 1][col] != 1 && box[row + 1][col] != 4) {row++;}//如果下方是箱子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++;}}}//重新绘制地图this.drawCanvas();//检查游戏是否成功this.checkWin();}},/*** 自定义函数--方向键：右*/right: function() {//如果小鸟不在最右端才考虑右移if (col != 7) {//如果右方不是墙也不是箱子if (map[row][col + 1] != 1 && box[row][col + 1] != 4) {col++;}//如果右方是箱子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++;}}}//重新绘制地图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) {//返回假，游戏尚未成功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: function(options) {console.log(options.level)//获取关卡let level = options.level//更新关卡标题this.setData({level: parseInt(level) + 1})//创建画布上下文this.pen = wx.createCanvasContext('myCanvas');//初始化地图this.initMap(level)//绘制地图this.drawCanvas()},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {}
})

简易微信小程序开发——推箱子相关推荐

初学者一学就会的小程序开发——推箱子
最经典的推箱子游戏,类似的游戏你一定早就玩过.要控制搬运工上下左右移动,来将箱子推到指定地点. 经典的推箱子是一个来自日本的古老游戏,目的是在训练你的逻辑思考能力.在一个狭小的仓库中,要求把木箱放到指 ...
微信小程序开发工具将已存在的Git项目在新开发者下拉取推送
微信小程序开发工具将已存在的Git项目在新开发者下拉取推送前言流程完事前言最近有同事离职了,交接了一个微信小程序的项目下来,源码放在了公司内部的GIT上面,当我下载下来维护之后发现,在微信 ...
微信小程序开发消息推送配置教程
微信小程序开发消息推送配置教程微信小程序开发消息推送配置这一块网上都是PHP居多,由于用egg.js写了一套验证方法. 第一步:填写服务器配置登录微信小程序官网后,在小程序官网的"设置- ...
从零开发简易微信小程序
** 从零开发简易微信小程序 ** 某日,心血来潮,想捣鼓下微信小程序,尝试微信的云开发功能,于是就有了下面简单的成品: 本小程序的包含三部分的功能: 1.商品banner图片的展示 2.商品列表的展 ...
微信小程序开发简易计算器改进版
微信小程序开发计算器有多种方法,但是大部分代码比较复杂.不容易理解.本案例进行了改进,主要是组件bindtap属性绑定的自定义函数clickBtn(),采用了switch语句,使得代码结构更加清晰,学 ...
微信小程序开发—消息推送
微信小程序的消息推送简单的说就是发送一条微信通知给用户,用户点开消息可以查看消息内容,可以链接进入到小程序的指定页面. 微信小程序消息推送需要用户触发动作才能发送消息,比如用户提交订单.支付成功.一次 ...
微信小程序开发总结与心得
0 前言最近的工作重心一直在小程序,也开发了几个小程序,对小程序开发的流程及相关技术相对比较熟悉,在开发过程中也总结了一些心得经验.了解一些小程序文档上没有的东西.踩了一些坑.所以想着写篇文章记录下 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
【微信小程序宝典】从零开始做微信小程序开发NO.2
2019独角兽企业重金招聘Python工程师标准>>> 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习: 首先感谢几位给予建议的同学, ...

简易微信小程序开发——推箱子