背景

1.最近有个私活需要做个小游戏,但是还没有开始谈需求。

2.之前带领团队做过小程序开发,自己也做过小程序开发(我的小程序:为了考PMP,我做了一个刷题小程序),但是没做过小游戏。

3.在谈需求之前,肯定得把小游戏开发文档先过一遍,2个小时把所有文档都过了一遍。

4.试玩过很多小游戏,发现这些创意小游戏做得非常好,唯一不好的地方就是各种广告

5.广告类似这样:游戏中被人干掉了,需要复活,看个15s广告,免费复活一次;游戏结束后,看广告可以奖励翻倍,底部还有广告,跳转其他app应用,而且是三个app应用。

6.正面来看,小游戏的营收模式还是挺不错的,可以通过购买道具+广告投放来获取现金+流量分成。

7.除开做私活,如果我做了一个小游戏也能实现现金+流量分成,是不是就可以挣一份奶粉钱?

8.基于以上几点,我是不是该开始动手开发了?

 

一、代码下载

 先来个简单的小游戏demo吧

代码下载: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本书籍赠送~~