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

時間 2019-11-11

標籤經過一個簡單東方入門微信遊戲欄目遊戲简体版

原文原文鏈接

瞭解微信小遊戲

官方文檔有詳細的介紹html

小遊戲的文件結構

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

如圖最外層除了readme外有3個文件git

game.js 程序入口
game.json小遊戲配置文件
project.config.json 項目設置文件

具體配置能夠查看官方文檔，只有這幾個文件須要按照文件名格式來寫，其餘文件的內容和es6

這個文件是官方示例中用於模擬瀏覽器環境的適配器，若有須要能夠本身寫，咱們這裏沿用這個。github

入口文件 game.jsjson

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的轉換因此若是項目比較小都不用其餘東西，直接文本編輯器修改保存查看便可。canvas

開工

音頻使用原來的代碼

幀定時也使用wx的回調函數api

window.requestAnimationFrame(
      this.TimerHandel.bind(this),
      canvas
    )

引入一個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();

保留原來的觸摸移動飛機而且新增重力感應移動飛機微信

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;
})

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

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);
        });
    }
}