通過寫一個簡單的東方系彈幕入門微信小遊戲

lichddd發表於2018-02-07
遊戲

瞭解微信小遊戲

官方文件有詳細的介紹

小遊戲的檔案結構

####我們以新建一個官方示例說明####

如圖 最外層除了readme外 有3個檔案

  • game.js 程式入口
  • game.json小遊戲配置檔案
  • project.config.json 專案設定檔案

具體配置可以檢視官方文件，只有這幾個檔案需要按照檔名格式來寫，其他檔案的內容和

這個檔案是官方示例中用於模擬瀏覽器環境的介面卡，如有需要可以自己寫，我們這裡沿用這個。

入口檔案 game.js

import './js/libs/weapp-adapter'
import './js/libs/symbol'

import Main from './js/main'

new Main()

複製程式碼

整個微信小遊戲實際上是執行在微信框架中一個原生canvas中，沒有瀏覽器頁面環境如document（這就是為什麼有一個模擬瀏覽器環境的介面卡），啟動時小遊戲框架執行game.js，然後在main.js中基本上都是對微信小遊戲api的呼叫及原生canvas的操作了。如果之前使用過原生canvas或者其他canvas庫的同學 馬上就可以上手開發0成本，官方開發工具也有es6=》es5的轉換所以如果專案比較小都不用其他東西，直接文字編輯器修改 儲存 檢視 即可。

開工

  1. 音訊使用原來的程式碼

  2. 幀定時也使用wx的回撥函式

    window.requestAnimationFrame(
      this.TimerHandel.bind(this),
      canvas
    )
複製程式碼

  3. 引入一個canvas2d庫createjs中的ease 和一個自己寫的工具庫

    import './js/libs/weapp-adapter'
import './js/libs/ease'
import './js/plugin/Math'

import Main from './js/main'
window.main = new Main();

複製程式碼

  4. 保留原來的觸控移動飛機並且新增重力感應移動飛機

    this.initEvent();
wx.startAccelerometer({ success:()=>{console.log('開始監聽加速計')}});
wx.onAccelerometerChange((res)=>{
  this.player.speedx = Math.floor(res.x*100)/10;
  this.player.speedy = Math.floor(-res.y * 100)/10;
})
複製程式碼

  5. 其他全部刪除 基於create.js庫重寫；所有子彈繼承一個父類

    export default class Bullet_Super {

    constructor(cantiner, SHOOT_FRAME = 10,sprite_sheet) {
        this.cantiner = cantiner;
        this.shoot_frame = SHOOT_FRAME;
        this.list = [];
        this.deletelist = [];
        this.y = 0;
        this.x = 0;

        this.spriteSheet = new createjs.SpriteSheet(sprite_sheet);
    }
    outOfScreen(s, test) {
        if (test) {
            if (s.y > window.innerHeight + 100 || s.x > window.innerWidth + 100 || s.x < -100) {
                this.deletelist.push(s);
                s.visible = false;
                return false;
            }
        }
        return true;
    }
    createSprite(anime, option, die_option) {
        let isnew = true;
        let sprite = this.deletelist.length > 0
            ? (isnew = false, this.deletelist.shift())
            : new createjs.Sprite(this.spriteSheet, anime);
        sprite.isdie = false;
        sprite.dieing_frame=0;
        sprite.diecount = 0;
        Object.assign(sprite, option);
        sprite.die = sprite.die || (() => {
            sprite.isdie = true;
            Object.assign(sprite, die_option);
        });
        !isnew
            ? (sprite.visible = true, sprite.gotoAndPlay(anime))
            : this.cantiner.addChild(sprite);
        this.list.push(sprite);
    }
    update(timeFunc, dieFunc, diedFunc, test) {
        this.list = this.list.filter((s) => {
            if (s.isdie) {
                s.diecount++;
                dieFunc(s);
                if (s.diecount > (s.dieing_frame)) {
                    diedFunc(s);
                    this.deletelist.push(s);
                    s.visible = false;
                    return false;
                }
                return true;
            }
            timeFunc(s);
            return this.outOfScreen(s, test);
        });
    }
}
複製程式碼

  6. 之後就是實現各種彈幕，計分顯示等

具體移步github https://github.com/lichddd/weixin_game_test1 b站演示https://www.bilibili.com/video/av19046982/

不知道為啥上傳不了圖啊

相關文章