用HTML5 Canvas實現拼圖遊戲

由於喜歡玩拼圖遊戲，因此本身開用canvas開發了一個拼圖遊戲，在這裏分享一下開發的過程。

生成拼圖塊

拼圖塊有直線和彎曲的兩種邊，要生成直線邊只需知道兩個點就能夠生成一條線段，而生成彎曲的邊則稍微複雜一些。這裏用四個點來生成彎曲的線。首要用隨機數決定彎曲的方向是凹仍是凸。再由是凹仍是凸計算出垂直於邊的向量，即下圖中的紫色與藍色向量。首先按比例由A和B獲得E和F兩個點的座標：A和B座標記做 $P_A$和 $P_B$，比例爲 $\alpha$，則E點座標 $P_E=\alpha P_A + (1-\alpha)P_B$，F點座標 $P_F=\alpha P_B + (1-\alpha)P_A$。加上垂直的向量獲得C與D兩個點。

有了中間的四個點，爲了增長拼圖塊的隨機性，須要在中間四個點加上隨機的位移。

最後只需用貝塞爾曲線就獲得了拼圖的一個邊。 (參考：stackoverflow.com/a/49371349/… )

重複上述步驟生成拼圖的四條邊，就能夠生成一個完整的拼圖塊。爲了能將拼圖拼在一塊兒，以下圖所示，每次只需生成右邊與下邊兩條邊，如圖中右下角的拼圖塊粉色的邊與上方的拼圖塊的下邊相同，藍色的左邊與左方拼圖的右邊相同。

有了拼圖塊形狀的路徑，就能夠用canvas的clip函數，剪出所需的拼圖塊的圖形。但因爲拼圖形狀不規則，因此每次移動的時候從新繪製會致使卡頓。

性能優化

緩存拼圖塊

爲了加快拼圖塊的繪製速度，須要再建立一個隱藏的canvas用於緩存拼圖塊。以下圖所示全部拼圖塊只需繪製一次複雜的形狀，以後繪製只需從隱藏的canvas複製到用戶看到的canvas中。

雙層Canvas

雖然在必定程度上緩存解決了卡頓問題，可是當拼圖塊數量達到數千張時，移動時仍是會出現卡頓。雖然每次移動的只是一小部分的拼圖塊，可是全部拼圖塊仍是須要從新繪製。更好的辦法是，每次鼠標移動時只繪製移動的拼圖塊，而不是全部拼圖塊。爲了實現這種效果，須要用兩層canvas。以下圖所示，底部灰色背景層在底部繪製靜止的部分，只須要移動開始時從新繪製。圖中紫色的另一層在最上面，繪製移動的拼圖塊，每次鼠標移動都須要繪製。

最後就獲得了性能還算能夠的拼圖遊戲：

代碼：e1y4r/JigsawPuzzle (github.com)