微信小遊戲之旅1. 起步 爲了考PMP，我做了一個刷題小程序

背景

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本書籍贈送~~