1：單例模式實現 //data類，director類實現，
2：靜態方法實現 //精靈類
3：es6物件導向，類本身是乙個函式，方法和屬性作為原型鏈的方法存在的。
4：es5物件導向，es6物件導向
//寄生組合繼承
functionperson(name,age)
person.prototype.say =function()
lets =newperson("張",12)
lets2 =
s.say.call(s2)
5：遊戲實現
1：封裝，資源封裝（datastore）,資源的載入（fristload）,背景圖的繪製，地面的繪製
2：重繪api requestanimationframe(()=>this.run());
//在遊覽器重新整理之前進行重新整理，效能比較高
3：小遊戲實現原理：整張圖重繪（本質就是不斷的重繪重新整理）
//了解一下export export
default的區別乙個引人加{}，export default則不需要
4：繪製：
（1）背景圖繪製
（2）地板繪製
解決問題：1：繪製位置問題，不停移動位置
(3)鉛筆繪製 解決問題：隨機的高度，繪製的高度，2組鉛筆同時的顯示（x座標要一致），鉛筆要被地板蓋住（canvas繪製圖形的位置問題），鉛筆要能重複繪製，
//隨機高度問題：top值設定乙個中間數值，最高不能有一半高度，
constmintop =window.innerheight/8;//鉛筆同時對於，上下就是x座標相同，重複繪製也就是，在進行建立一組鉛筆進入陣列，在前面繪製的陣列超過邊界的時候把其銷毀。constmaxtop =window.innerheight/2;
consttop = mintop +math.random() * (maxtop - mintop);
constpencils =this.datastore.get('pencils');
//判斷陣列是否越界,x橫座標，初始值在視窗的右側
if((pencils[0].x+ pencils[0].width)
<=0&&
pencils.length ===4 )
//建立
if(pencils[0].x<=(window.innerwidth - pencils[0].width)/2 && pencils.length
=== 2 )
記憶體釋放功能：新增乙個gameover屬性
//用來清除定時器。釋放記憶體
(4)小鳥的三種狀態的繪製，剪裁的寬高，加速度重力下落的效果（這個很關鍵），點選事件會上公升的效果，小鳥和鉛筆模型的建立過程以及碰撞檢測。
const speed = 0.2; //模擬切換的速度
this.count = this.count + speed;
//模擬的速度
if(this.index >=2)
鉛筆碰撞檢測：
//繪製出小鳥的邊框模型：小鳥的上下左右的位置，不是css的定位的屬性，是canvas，原點的相對位置
const birdsborder = {
top: birds.y[0],
bottom: birds.birdsy[0] + birds.birdsheight[0],
left: birds.birdsx[0],
right: birds.birdsx[0] + birds.birdswidth[0]
//繪製鉛筆的位置。
//鉛筆是迴圈裡面的數值，因為鉛筆的模型很多，上下一對，一共2租，鳥只有乙個
for (let i = 0; i < length; i++) {
const pencil = pencils[i];
const pencilborder = {
top: pencil.y,
bottom: pencil.y +
pencil.height,
left: pencil.x,
right: pencil.x + pencil.width
if (director.isstrike(birdsborder, pencilborder)) {
console.log('撞到水管啦');
this.isgameover = true;
return;
//判斷條件，小鳥的頭部撞到鉛筆的頭部，小鳥的地步撞到下鉛筆的地步，小鳥的左部分撞到鉛筆的右部分，小鳥的右部分撞到鉛筆的左部分。
(5)計分分數類
1：什麼時候加分，在越過鉛筆的時候開始加分（不能發生碰撞的時候進行檢測）
2：控制加分的速度，因為canvas重新整理評率很快所以需要設計乙個flag來標誌能否加分。
//經過檢測之後，如果小鳥的左邊超過了鉛筆的右邊沒有碰撞上就可以算加分成功，
微信小遊戲解包
安裝夜神模擬器 並開啟root 找到目錄下的.wxapkg檔案，通過qq傳到pc上 由於訪問許可權問題，有可能會傳送失敗，這時候可以把.wxapkg壓縮成zip檔案再通過qq傳輸 安裝nodejs 安裝依賴 npm install esprima npm install css tree npm i...
微信小遊戲2
建立畫布 const canvas wx.createcanvas 在 game.js 中輸入以上 並儲存 外鏈轉存失敗 img raz17njs 1564146105342 橫向居中 外鏈轉存失敗 img uk8ya6v8 1564146105344 context.fillrect canvas...
微信小遊戲資源載入
ccc已經幫我們做好了資源載入的大部分處理，我們只要用就好了。這裡教大家怎麼用本地伺服器來測試。ccc官方教程。安裝開啟cmd管理員視窗輸入npm v 檢測node.js是否安裝成功 建立乙個目錄，用來存放專案資源檔案，比如f tempgameres。開啟這個目錄，按shift 右鍵，在此處打控制台...