本節書摘來異步社群《html5遊戲程式設計核心技術與實戰》一書中的第2章，第2.7節，作者： 向峰 責編： 楊海玲，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
html5遊戲程式設計核心技術與實戰
在這一小節中，我們将利用前面介紹的知識，來創作一個《你畫我猜》遊戲中的主要功能。《你畫我猜》是一款老少皆宜的多人線上的網絡遊戲，2012年風靡一時，玩法其實也來源于生活當中，經常在娛樂節目中出現。通常在節目中是這樣玩的，主持人寫出一個詞語，然後由一個參與者根據這個詞語畫出相應的圖案，由另一個參與者來根據這個圖案猜出這個詞語，而《你畫我猜》就把現實生活中的這個玩法轉到了電腦上，玩法就是這麼簡單。當然，本章還無法開始做出一個網絡遊戲，哪怕是一個簡單的單機遊戲，本書第10章有《你畫我猜》這個遊戲完整的實作，本章将會完成《你畫我猜》中的畫闆部分。沒玩過《你畫我猜》遊戲的，也應該用過windows的畫闆吧？好了，下面我們來實作這個畫闆。
首先，我們來設計一個畫闆的首頁面，關于使用div布局遊戲的ui不是本書的重點，我們隻關注遊戲邏輯的實作，以下代碼隻是一個參考實作：
設計好以上的首頁面後，得到如圖2-23所示的圖，當然，樣式部分不是重點，是以忽略，我們需要了解這個畫闆中和程式相關的部分。
好了，定義好圖2-23所示的ui界面後，開始實作功能。
首先，我們把整個畫闆看成一個畫闆對象，這個畫闆對象中有一些基本的屬性，如畫闆的大小，目前畫筆使用的顔色、寬度等，于是就有了以下的paint類：
畫闆定義好了以後，我們需要逐漸往裡面增加相應的功能代碼。
接下來，我們需要動态産生顔色區域以及畫筆區域，因為在前面設計ui的時候，隻給這兩個區域留下了空白容器，需要我們通過代碼來産生。于是，可以給painter定義一個初始化畫筆的方法，具體的代碼如下：
以上函數中，我們建立了顔色區域和畫筆區域中的選擇層部分，當使用者滑鼠點選顔色選擇區域的時候，就會使用fire方法觸發一個onpaintupdate事件，修改目前使用者畫筆的顔色。同樣，當使用者滑鼠點選畫筆選擇區域時，也會觸發onpaintupdate事件，修改目前使用者畫筆的大小。fire方法是paint類中自定義的一個方法，用于處理畫闆中的各種自定義事件的觸發，具體實作如下：
到此為止，關于畫筆顔色和大小的選擇已經完成，接下來，我們看看如何實作使用者在畫闆上用畫筆繪畫。
使用畫筆在畫闆上繪制，從原理上來說，canvas上是可以畫圖形的，是以我們隻要在滑鼠的移動事件上面做文章就可以了。滑鼠在canvas上面移動的時候，可以跟蹤目前滑鼠的坐标，然後在這些坐标點上繪制點就可以了，這是我們最初的想法，但實際上這種效果并不理想。因為，首先，canvas并沒有提供畫點的方法，當然，可以通過繪制一個極小的矩形實作，但這不是主要問題。主要問題在于，雖然我們移動滑鼠是連續移動，但電腦沒有足夠高的靈敏度捕捉滑鼠的移動軌迹。事實上，如果采用這種方法，将會在canvas上留下斷斷續續的點的軌迹，這不是我們要的結果，我們需要的是把這些點用線連起來。是以最終的算法是，捕捉滑鼠移動的坐标，然後把目前點和上一個點用線連接配接起來，最終，就可以達到一個比較好的效果。
根據以上的原理部分，我們在paint類中增加一個initcanvas()方法，用于初始化畫闆，綁定滑鼠在canvas上面的相關事件，其實作代碼如下：
主要繪制部分的工作，基本都完成了。噢，别忘了，還有一個擦除區域。當我們繪制錯誤的時候，需要擦除圖像，于是，我們可以完成初始化擦除區域的方法如下：
好了，大功告成，為了讓paint類開始工作，我們最好寫一個init()方法，完成以上全部的初始化工作，以便讓使用者友善使用，init()方法可參考完整代碼部分。
好了，整個painter對象就完成了，最終，我們得到的paint對象的完整代碼如下：
至此，《你畫我猜》的繪制部分已經完成，至于多人遊戲的部分，在學習了後面的網絡程式設計部分後，我們會得到一個完整的案例。