1.听说你也在做小游戏？？

概述

现在小游戏的营收利润很高啊，是时候来一波小游戏的开发了！

代码下载：https://github.com/Jackson0714/minigame-example 点个Star 谢谢~~~~

一、申请微信小游戏账号

已经有小游戏账号可以跳过

1.注册小程序

https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

2.激活注册邮箱

注册成功后，会收到腾讯发给注册邮箱的一封激活确认邮件

3.设置服务类目

登录公众平台->设置->服务类目->邮箱->休闲游戏

二、下载安装开发者工具

新建小游戏项目，AppID在公众平台后台可以获取到

二、如何开发

先看下效果图

1.images文件夹添加两张飞机图片

2.game.js 创建画布

首先需要创建画布

const canvas = wx.createCanvas()
const context = canvas.getContext('2d') // 创建一个 2d context

3.创建敌机

//创建敌机
const enemyImage = wx.createImage()
const enemyImgX = canvas.width / 2 - 60
let enemyImgY = 0
enemyImage.onload = function () {
  context.drawImage(image, imgX, imgY)
}
enemyImage.src = 'images/enemy.png'

4.敌机下落

setInterval(function () {
  context.clearRect(enemyImgX, enemyImgY, 120, 79); //清理敌机图片
  context.drawImage(enemyImage, enemyImgX, ++enemyImgY)
}, 16)

5.创建自己的飞机

const image = wx.createImage()
const imgX = canvas.width / 2 - 93
let imgY = 500
image.onload = function () {
  context.drawImage(image, imgX, imgY)
}
image.src = 'images/hero.png'

6.拖动自己的飞机

// 存储当前飞机左上角坐标
let touchX = imgX
let touchY = imgY

wx.onTouchMove(function (res) {
  context.clearRect(touchX, touchY, 186, 130); // 清除画布上原有的飞机
  touchX = res.changedTouches[0].clientX - 96 // 重新判断当前触摸点x坐标  左上角x坐标
  touchY = res.changedTouches[0].clientY - 65 // 重新判断当前触摸点x坐标  左上角y坐标
  context.drawImage(image, touchX, touchY);
})

7.碰撞检测

setInterval(function () {
  context.clearRect(enemyImgX, enemyImgY, 120, 79);
  context.drawImage(enemyImage, enemyImgX, ++enemyImgY)
  if (touchX >= enemyImgX - 186 && touchX <= enemyImgX + 120 && touchY >= enemyImgY - 130 && touchY <= enemyImgY + 79) { // 飞机与矩形发生碰撞
    wx.showModal({
      title: '提示',
      content: '发生碰撞，游戏结束！'
    })
  }
  if (enemyImgY >= canvas.height) {
    rectY = 0
  }
}, 16)

wx.onTouchMove(function (res) {
  context.clearRect(touchX, touchY, 186, 130); // 清除画布上原有的飞机
  touchX = res.changedTouches[0].clientX - 96 // 重新判断当前触摸点x坐标  左上角x坐标
  touchY = res.changedTouches[0].clientY - 65 // 重新判断当前触摸点x坐标  左上角y坐标
  context.drawImage(image, touchX, touchY);
  if (touchX >= enemyImgX - 186 && touchX <= enemyImgX + 100 && touchY >= enemyImgY - 130 && touchY <= enemyImgY + 100) { // 飞机与矩形发生碰撞
    wx.showModal({
      title: '提示',
      content: '发生碰撞，游戏结束！'
    })
  }
})

代码下载：https://github.com/Jackson0714/minigame-example 点个Star 谢谢~~~~

后续小游戏开发教程不断更新中~~~

关注公众号：悟空聊架构，回复pmp，领取pmp资料！回复悟空，领取架构师资料！

悟空聊架构

关注我，带你每天进步一点点！

还有111本书籍赠送~~