Outline

Now games revenue profits are high ah, it's time to wave the development of the game!

Download: https://github.com/Jackson0714/minigame-example point of a Star ~ ~ ~ ~ Thank you

First, apply a small micro-channel game account

There has been little game account can be skipped

1. Registration applet

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

2. Activate registered mail

After successful registration, you will receive an e-mail Tencent issue a registration confirmation email to activate

3. Set the service category

Log public platform -> Settings -> Service Category -> Mail -> Casual Games

Second, download and install the developer tools

New small game project, AppID public platform in the background can get to

Second, how to develop

FIG look under the effect of

1.images folder to add two aircraft picture

2.game.js create canvas

First you need to create canvas

Canvas wx.createCanvas = const () 
const = canvas.getContext context ( '2D') // Create a 2d context

3. Create the enemy

//创建敌机
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. whereabouts of the enemy

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资料！回复悟空，领取架构师资料！

作　　者：悟空聊架构
出　　处：http://www.cnblogs.com/jackson0714/
关于作者：专注于移动开发。如有问题或建议，请多多赐教！
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！

悟空聊架构

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

还有111本书籍赠送~~

1. I heard that you are doing the game? ?