微信小游戏之旅1. 起步
背景
1.最近有个私活需要做个小游戏，但是还没有开始谈需求。
2.之前带领团队做过小程序开发，自己也做过小程序开发（我的小程序：为了考PMP，我做了一个刷题小程序），但是没做过小游戏。
3.在谈需求之前，肯定得把小游戏开发文档先过一遍，2个小时把所有文档都过了一遍。
4.试玩过很多小游戏，发现这些创意小游戏做得非常好，唯一不好的地方就是各种广告。
5.广告类似这样：游戏中被人干掉了，需要复活，看个15s广告，免费复活一次；游戏结束后，看广告可以奖励翻倍，底部还有广告，跳转其他app应用，而且是三个app应用。
6.正面来看，小游戏的营收模式还是挺不错的，可以通过购买道具+广告投放来获取现金+流量分成。
7.除开做私活，如果我做了一个小游戏也能实现现金+流量分成，是不是就可以挣一份奶粉钱？
8.基于以上几点，我是不是该开始动手开发了？
如何开发
先来个简单的小游戏demo吧
代码下载：https://github.com/Jackson0714/minigame-example 点个Star 谢谢~~~~
效果图
1.需要准备两张飞机图片，可以自己定义
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资料！回复悟空，领取架构师资料！
作 者：悟空聊架构
出 处：http://www.cnblogs.com/jackson0714/
关于作者：专注于移动开发。如有问题或建议，请多多赐教！
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！
悟空聊架构
关注我，带你每天进步一点点！
还有111本书籍赠送~~
