碎碎念

不知道为什么，最近很想学微信小程序开发，因为有一些游戏开发的基础，所以决定做一个微信小游戏练练手——至于能不能坚持到底发布上线，那就是另一回事了，2333333。管它是不是三分钟热度，只要有这个想法了，那就去做，哪怕最后因为种种困难放弃了，也比只停留在想法阶段要好。
作为一个从零开始的小白，首先当然是去看微信公众平台的官方文档，本文就是参照微信官方文档的快速上手教程，照着里面的步骤一步步走下去，并附上一些自己踩的坑和心得体会。
以下是微信官方文档链接：
微信官方文档·小游戏
好了，废话不多说，开始搞事情。

搞事情

首先需要注册一个小游戏账号，然后安装并启用开发者工具。这两步就不赘述了，官方文档中也都有，照着网页提示一步步走下去就好。
打开微信开发者工具后，需要扫码登录，登录后的界面如下图所示：
在这里插入图片描述
这里选择了小游戏并点击新建项目，新建项目需要填写以下内容：

我在这里主要修改了三个地方：项目名称，目录以及AppID（注册小游戏账号后可以登录微信开放平台查看自己的AppID）
因为完全是参照官方文档练手，我就没有使用刚刚注册的AppID，而是点击了测试号，然后后端服务也不需要选择了，直接被整没了2333
点击新建后，可以见到开发者工具的界面，除了上面的菜单栏，主要就分为模拟器、编辑器、调试器三块，点击对应的绿色按钮可以将它们隐藏/重现。
开发者工具还自己整了个范例出来，在左边的模拟器窗口下可以直接玩；
编辑器分为两块，左边是文件浏览器，右边查看和编辑文件内容；
调试器会输出调试信息，还可以查看性能之类。
在这里插入图片描述
这个范例下的编辑器中有很多文件，但其中对于小游戏来说必要的只有两个文件：game.js和game.json
game.js：小游戏的程序入口文件
game.json：小游戏的配置文件
因为打算照着开发文档自己实践一遍，所以这些东西都不需要，但毕竟是官方自带范例，能学习的地方应该挺多，我没有删除，而是整了个BackUp文件夹把原本的东西都移了进去，复制了一份game.js和game.json留下。（移动文件需要关闭开发工具，到相应目录下操作，在开发工具下只能增删、不能移动）
现在我的文件树变成了这样：
在这里插入图片描述
game.js中的内容被我清空了，接下来，开始手撸代码。

const canvas = wx.createCanvas() //创建画布

const context = canvas.getContext('2d') //创建一个2d context
context.fillStyle = '#1aad19' //矩形颜色

function drawRect(x, y){
  context.clearRect(x, y - 1, 100, 100) //清除原有矩形
  context.fillRect(x, y, 100, 100)
}

const rectX = canvas.width / 2 -50
let rectY = 0
setInterval(function(){
  drawRect(rectX, rectY++)
},16) //定时器函数，每16ms执行一次function()

//使用的图片像素为186*130
const image = wx.createImage()
const imgX = canvas.width / 2 - 93
const imgY = 500
image.onload = function() {
  context.drawImage(image, imgX, imgY)
}
image.src = 'img/hero.png'

let touchX = imgX
let touchY = imgY

wx.onTouchMove(function(res){
  context.clearRect(touchX, touchY, 186, 130);
  touchX = res.changedTouches[0].clientX
  touchY = res.changedTouches[0].clientY
  context.drawImage(image, touchX, touchY);

  if (touchX >= rectX - 186 && touchX <= rectX + 186 && touchY >= rectY - 130 && touchY <= rectY + 130)
  { // 飞机与矩形发生碰撞
	  wx.showModal({
	    title: '提示',
	    content: '发生碰撞，游戏结束！'
	  })
  }
})

按照官方上手教程，game.js中所有的代码就这么多，主要实现了一个矩形下落，玩家控制飞机躲避矩形，如果飞机与矩形发生碰撞则游戏结束。
按下Ctrl+S保存代码后，开发工具就会自动进行编译，完成后左侧的模拟器窗口下就会自动运行游戏。
代码中需要注意的地方有：
（1） image.src = ‘img/hero.png’
这里是加载飞机的图片，我创建了一个img文件夹并在下面放了一张名为hero.png的图片
在这里插入图片描述
（2）图片的像素
因为在官方的上手教程中指定的图片大小是100100像素，而我使用的图片像素是186130像素，因此在这些语句中将原本适用于100*100大小的图像的数据进行了修改：
const imgX = canvas.width / 2 - 93
context.clearRect(touchX, touchY, 186, 130);
if (touchX >= rectX - 186 && touchX <= rectX + 186 && touchY >= rectY - 130 && touchY <= rectY + 130)
对于第二句，clearRect如果大小设置不正确，就会在拖动时产生残影：
在这里插入图片描述
这是context.clearRect(touchX, touchY, 100, 100);的情况下，因为没有将整个图片区域清除，而导致出现了图片残留。
（3）在wx.onTouchMove中结束游戏
讲道理不应该在触摸事件中来结束游戏，这应该算是上手教程中的Bug吧，导致出现了以下两个问题：
a) 如果没有触摸，那么就算是矩形撞击了飞机，也不会触发游戏结束；
b) 因为这里是弹出一个窗口提示游戏失败，而不是真正结束游戏，如果碰撞时长时间触摸，就会多次弹出窗口（下图中的提示窗口有很多个重叠在一起，点都点不完）
在这里插入图片描述
等阅读了相关的API文档之后，相信能有办法解决这个问题
因为我用的是测试号，而不是自己注册的AppId，所以没办法上传至体验版，但是手机上还是可以测试的：

因为是测试号，这个二维码所有的微信号都可以扫描并游玩其中的游戏（在失效之前）。
测试号相关详见：微信开放文档·申请测试号

来源：https://blog.csdn.net/ACwawayu/article/details/100063364

标签

微信开发