微信小遊戲筆記

源代碼目錄介紹：

 

 

 

 

 

 

模塊分解:

 

Director.js             

 

DataStore.js       

 

ResoureLoader.js

 

Resources.js      

 

 

Sprite.js             

 

background.js          

 

總結 ：  Sprite 精靈類是小遊戲核心的概念。能夠進行旋轉 、變換 、縮放，能夠處理不少動做，包含不少內部邏輯，建立一個父類，讓全部元素都繼承住它。 Director ：邏輯的變化，場景的切換。 ResoureLoader ：若是沒加載好就循環，畫面會是一張白布。

map語法   

 

        this.map = new Map(Resources)//初始化資源

 

 將          初始化成===>     

 

 

 

 

 

未踩的坑：

weapp-adapter.js 由於適配器文件已經  建立了canvas 因此你本身再去建立的話沒有效果，也實現不了任何的動做。

踩到的坑：

1.  這是由於沒有給script 添加type='module'(ES6)

2.  這是由於文件導入的時候沒有加.js完整後綴名。然而在微信開發者工具裏 不加後綴名是對的。

 3.  沒有提供一個名爲Resources的導出  跑過去一看 .............. Resources少了個s...

extends基於Sprite.js 的構造器是不能使用this的 只能使用super

4.地板不動怎麼辦：  

 //requestAnimationFrame() 告訴瀏覽器——你但願執行一個動畫，而且要求瀏覽器在下次重繪以前調用指定的回調函數更新動畫。該方法須要傳入一個回調函數做爲參數，該回調函數會在瀏覽器下一次重繪以前執行
        requestAnimationFrame(()=>{this.run()})

5.手機調試報錯： 見區別 三、4

與H5區別：

//直接報錯

區別1 ：this.canvas =document.getElementById('game_canvas') ==> this.canvas = wx.createCanvas();

區別2.：const image = new Image() ==>   const image = wx.createImage();

//手機調試纔會報錯

區別3 ：this.canvas.addEventListener ==> wx.onTouchStart

區別4 ：window.innerWidth/Height ==> DateStore.getInstance().canvas.width/height  (有個前提 這裏要把 wx.createCanvas()賦值給this.dataStore.canvas )

底層封裝：

1.wx.setPreferredFramesPerSecond(number fps) 能夠修改渲染幀率。默認渲染幀率爲 60 幀每秒。修改後，requestAnimationFrame 的回調頻率會發生改變。 低於60幀肉眼能夠看見

能夠修改原生    number requestAnimationFrame(function callback) 在下次進行重繪時執行

 ES6： 外部文件想要引用類Class或者是類中的方法乃至變量的話，咱們必定要在前面加上export關鍵字 

要注意的地方：

1.extends中的 constructor中的super 方法 

在 constructor 中必須調用 super 方法，由於子類沒有本身的 this 對象，而是繼承父類的 this 對象，而後對其進行加工,而 super 就表明了父類的構造函數。super 雖然表明了父類 A 的構造函數，可是返回的是子類 B 的實例，即 super 內部的 this 指的是 B，所以 super() 在這裏至關於 ```A.prototype.constructor.call(this, props)``

2.使用wx.triggerGC（）垃圾回收觸發器 加快觸發JS Garbage Collection（垃圾回收），由於JS的解釋器不能保證調用後立刻觸發GC
3. 計分器：  HTML5 canvas fillText() 方法

4.背景音樂  wx.createInnerAudioContext 

5.下載資源到本地 wx.downLoadFile(Object) ; 　給用戶下載APK 宣傳文件

 

子類

import { Sprite } from "../base/Sprite.js";
//循環渲染三隻小鳥,實際上是    循環渲染圖片的三個部分（canvas特性） 不用精靈圖(能夠省去resource 和resourceloader)是爲了提升開發效率 
export class Birds extends Sprite{
    constructor() {
        const image = Sprite.getImage('birds');
        super(image,
            0, 0,
            image.width, image.height,
            0, 0,
            image.width, image.height);
        //小鳥上下邊距 左右邊距是9 寬34 高24
        this.clippingX = [
            9,
            9 + 34 + 18,
            9 + 34 + 18 + 34 + 18];//沒有第三個是翅膀
        this.clippingY = [10, 10, 10];
        this.clippingWidth = [34, 34, 34];
        this.clippingHeight = [24, 24, 24];
        //const 對外不可見
        const birdX = window.innerWidth / 4;//單隻小鳥初始X座標 
        this.birdsX = [birdX, birdX, birdX];//三隻小鳥初始X座標
        this.birdY = window.innerHeight / 2;//初始Y座標
        this.birdsY = [this.birdY, this.birdY, this.birdY];
        this.y = [this.birdY, this.birdY, this.birdY];//每隻小鳥的Y座標
        //判斷小鳥屬於第幾只
        this.index = 0;
        this.count = 0; //循環小鳥個數 小鳥從0位=> 1位 => 2位 => 0位
        this.time = 0;//自由落體公式會涉及到時間.
    }
    draw() {
        //切換三隻小鳥的速度 
        const speed = 0.2;
        this.count = this.count + speed;
        if (this.index >= 2) {
            this.count = 0;
        }
        //減速器的做用 向下取整
        this.index = Math.floor(this.count);
        //受重力做用
        const offsetUp = 30;
        const g = 0.98 / 2.5;
        const offsetY = (g * this.time * (this.time - offsetUp) ) / 2;
        for (let i = 0; i <= 2; i++){
            this.birdsY[i] = this.y[i] + offsetY;
        }
        this.time++;
        console.log('test====',this.y[0],this.birdsY[0]);
        //渲染小鳥
        super.draw(
            this.img,
            this.clippingX[this.index], this.clippingY[this.index],
            this.clippingWidth[this.index], this.clippingHeight[this.index],
            this.birdsX[this.index], this.birdsY[this.index],
            this.clippingWidth[this.index], this.clippingHeight[this.index]);
    }
}

子類Birds.js

 

父類

// 精靈的基類,負責初始化精靈加載的資源的大小以及位置.
import { DataStore } from './DataStore.js'
export class Sprite{
    constructor(img = null,//默認值
                srcX = 0,// 
                srcY = 0,// 
                srcW = 0,// 
                srcH = 0,// 
                x = 0, y = 0,//
                width = 0 , height = 0) {//
        this.dataStore = DataStore.getInstance()            
        this.ctx = this.dataStore.ctx;
        this.img = img;//要繪製的圖片對象
        this.srcX = srcX;// 剪裁的X座標
        this.srcY = srcY;// 剪裁的Y座標
        this.srcW = srcW;// 剪裁的寬度
        this.srcH = srcH;// 剪裁的高度
        this.x = x;
        this.y = y;//資源在canvas上的擺放位置
        this.width = width;
        this.height = height;
    }
    
    /**
     * img 傳入Image對象
     * srcX 要剪裁的起始X座標
     * srcY 要剪裁的起始Y座標
     * srcW 剪裁的寬度
     * srcH 剪裁的高度
     * x 放置的x座標
     * y 放置的y座標
     * width 要使用的寬度
     * height 要使用的高度
     */
    //讓Sprite獲取Image 靜態方法直接獲取實例 不須要this了
    static getImage(key) {
        return DataStore.getInstance().res.get(key);
    } 
//動畫循環 每秒60幀 60次
    draw(img = this.img,
        srcX = this.srcX,
        srcY = this.srcY,
        srcW = this.srcW,
        srcH = this.srcH,
        x = this.x,
        y = this.y,
        width = this.width,
        height = this.height) {
        this.ctx.drawImage(
           img,
           srcX,
           srcY,
           srcW,
           srcH,
           x,
           y,
           width,
           height
        )
    }
}
// let image = new Image();
// image.src = '../resource/background.png';
// image.onload = () => {
//     this.ctx.drawImage(
//         image,
//         0,//起始位置
//         0,//起始位置
//         image.width,//裁剪的大小
//         image.height,//裁剪的大小
//         0,//放置在畫布上的位置
//         0,//放置在畫布上的位置
//         image.width,//使用的圖片大小
//         image.height,//使用的圖片大小
//     );
// }

父類Sprite.js

 .