Canvas之打字機遊戲

　　最近針對粒子化做了一點點的探究，決定結合其作個小遊戲，因而這個簡單的打字遊戲出世了。

　　試玩地址：Typewriter game  僅在chrome下測試，請謹慎使用其餘瀏覽器（特別是ff）；加載速度有點慢，請耐心等待5~10秒。由於須要加載的粒子太多了...

遊戲概況

　　遊戲邏輯和代碼實際上是很簡單的，都是h5的原生api沒有用什麼框架（其實也不會）。

　　單詞由一個個的粒子構成。畫布中隨機出現單詞，監聽鍵盤上的按鍵，和單詞中的字母進行匹配；當整個單詞完成匹配後，組成單詞的粒子開始作平拋運動。直到遊戲結束。

1. 關於canvas小遊戲主要的製做流程請參考：兩個Canvas小遊戲
2. 關於如何將單詞轉換成合適的粒子形狀請參考：談談文字圖片像素化
3. 關於如何實現遊戲中的粒子效果（平拋運動）請參考：談談文字圖片粒子化

　　

遊戲詳解

　　打開頁面源碼，咱們看到主要構成部分是6個js文件，以下：

　　接下來咱們一一對其進行分析。

• load.js

　　首先是load.js。load.js其實很短，主要是遊戲加載時間太長，起到一個加載動畫的效果。而這裏我只是簡單地用了文字來表示加載，若是對遊戲質量要求高的，優秀的加載動畫也是必不可少的。

• vector.js & common.js

　　直接引用了我在github下的js文件，對整個遊戲的加載速度有必定的影響。

　　vector.js是二維三維矢量類，由於粒子的運動中會大量用到矢量；而common.js是我經常使用的一些js函數的集合，暫時沒多少，有需求時繼續添加吧。

• temp.js

　　temp.js是遊戲主要的js文件之一，主要內容是遊戲中的對象的四個類以及它們各自的方法。

　　遊戲對象的結構以下：Collection -> Word -> Letter -> Ball。 Collection做爲一個場景來使用，Word類是場景裏的單詞，Letter是單詞（Word）中的字母，Ball類是字母（Letter）中的粒子。原本我直接省略了Letter類，可是後來發現打字過程當中，字母是一個一個對應，顏色一個一個變化，因此Letter類必不可少。

　　當每一幀渲染時，四個類按順序進行draw方法和update方法的調用，有那麼點遞歸的意思，歸根到底都是Ball類進行draw和update。

　　解釋幾個關鍵的方法：

1. Word有個disappear方法，當打字遊戲完成一個單詞時，組成該單詞的粒子即作平拋運動。主要實現方法是將這一變化傳遞到Ball類上，改變Ball的速度和加速度。
2. Word有個getLetters方法，歸根結底是爲了初始化組成該單詞的粒子。
3. Letter類的getBalls方法，則徹底是像素化的體現。
4. Ball類裏的update方法多是其中最複雜的了。初始化的時候，給每一個Ball一個狀態值，將其state賦值爲1，若是一個單詞完成，則該state值改成2，一旦監測到state值爲2，即意味着平拋運動開始了，這時速度和加速度發生變化，爲了不屢次更改，將state值改成3

// 改作平拋運動
if(this.state === 2) {
  this.a = 10 / 1000 * 60;
  this.v.x = getRandomNum(-10, 10);
  this.state = 3;
}

而遊戲結束也能夠在這裏進行判斷：

// 判斷遊戲結束
if(this.state === 1 && this.pos2.y > height) {
  game.isOver = true;
  return;
}

平拋運動結束，粒子的生命週期也相應結束了，後續再也不須要對該粒子進行渲染：

// 平拋運動結束，粒子生命週期結束
if(this.state === 3 && this.pos2.y > height)
  this.kill(id);

Ball的kill方法：

// 當ball作平拋運動出邊界時，下一幀無需繼續渲染
Ball.prototype.kill = function(id) {
  this.father.balls.splice(id, 1);
};

• data.js

　　沒幾行代碼，主要就一數組存放單詞。

　　總共50個單詞，都是我即興手寫的，若是有拼錯的也請輕噴。其實原本是想寫個ajax提取至少幾千個詞組而後再進行加載的，不料new Word()的速度實在堪憂，50個單詞都已經卡成那樣了。

for(var i = 0; i < array.length; i++)
  words.push(new Word(array[i]));

　　以上兩行代碼應該是佔用loading大部分時間的程序，由於加載了50個單詞實際上是初始了50 * n個的Ball，並且這之中的獲取用了getImagedata進行像素點的檢索，速度你懂的。

• game.js

　　遊戲主要邏輯代碼，主要是設置了一個game對象，有3個主要的方法。

　　首先是表明初始化的init方法，裏面隨機初始化了一個單詞，其實這個方法不寫也行。

　　接着是最重要的addListener方法。這是整個監聽的核心，主要起到監聽鍵盤而且對監聽到的按鍵和對應單詞進行分析的做用。若是沒有正在匹配中的單詞，則挑選首字母爲按鍵的單詞進行匹配；若是有正在匹配的單詞，則按鍵的單詞和需匹配單詞的字母進行對比，若是同樣則成功，若是不一樣則表示玩家按錯了。具體能夠參考源代碼。

　　最後是render方法，顧名思義關係到每幀的渲染。每幀的渲染除了必要的draw和update外，還有遊戲場景中單詞的增長，以及當前分數的變化等等。

遊戲總結 

　　這個打字遊戲的簡單介紹差很少就這樣了，有興趣的能夠參考源碼：typewriter game

　　製做過程還留有幾個遺憾，好比原本由於js文件有點多互相依賴想嘗試下require.js仍是叫什麼的，最後仍是讓我調整了下js加載順序解決了，什麼東西都只有到了須要時纔會去check...原本還想試着作個炫酷的loading動畫的，最後仍是力不從心了。

　　三月了，是否是該回復那句「等你shine」了。