Pongo網頁版JavaScript原始碼及設計思路(1)

1.遊戲背景介紹(寫在前面的廢話)：

五月初的某天，看到某網推薦了這款遊戲，Pongo，看著還不錯的樣子就用ipad下下來試玩了下，玩了兩局感覺還錯挺過癮的，因為是手欠類遊戲嘛大家懂的。

但是沒一會發現遊戲在ipad似乎有些bug，玩一會就會卡住然後只能強退了，真是揪心，記錄還等著破呢。

怎麼辦？玩遊戲不如玩自己的遊戲的念頭又邪惡的出現了，然後就把pad丟給了朋友虐心去，我默默回到電腦前開始動手自己寫個不會卡的。

大概兩小時吧，寫出了基本架構，然後扔sinaapp裡試了下效果基本能玩就洗洗睡了。

第二天醒來因為周末沒事就花了些時間設計了下介面，同時不幸自己測出了一些比較嚴重的bug，最後又花了些時間給改掉了。

最後遊戲取名”Pongo+“(手機黨點我即玩)，電腦端暫時不支援，並順便在Github上上傳了源碼並去掉了提交成績模組。

2.遊戲試玩網址：

Pongo+(僅限移動端)：http://mypongo.sinaapp.com/

github開源(歡迎fork讓遊戲更好)：https://github.com/ChenReason/pongo/blob/gh-pages/index.html

3.遊戲規則玩法：

點擊螢幕會改變擋板的運動方向，點擊一次擋板方向相應改變一次，目的是為了能剛好擋住四處滾動的小球不讓其跑出大圓外。時間越長越好！最後可提交自己的成績進行排名！

4.遊戲所用技術：

HTML、CSS、JavaScript、Canvas、PHP

5.遊戲設計思路：

a)運用Canvas將遊戲的主介面畫出，底部為一單色長方形，上面覆蓋一個大圓，大圓上再繪製小圓及擋板，擋板中部還有一個大小為1px的超級小圓(作實現碰撞檢測)。

b)小圓運動方向一共有8個分別為上、下、左、右、左上、左下、右上和右下。

c)擋板的運動方向只有兩個，順時針和逆時針。

d)碰撞檢測未涉及到引擎的使用，而是根據小圓與擋板中部的超級小圓進行距離判斷，從而實現簡陋的碰撞檢測。

e)小球碰撞後反彈的方向確定，利用常識列舉，共8種情況。

6.遊戲實現痛點：

a)碰撞檢測。

b)定時器setInterval的清除時機以及是否清楚徹底。

c)定時器周期長短與遊戲體驗的關係。

d)Android與IOS裝置效能不同導致的遊戲流暢度問題。

7.遊戲現有問題：

a)由於碰撞檢測是比較兩圓的圓心距，且涉及到定時器的使用，因此由於定時器間隔極短導致在肉眼所見的一次碰撞背後其實已經發生了數十次碰撞，由此會導致小球最後實際的反彈方向與現實的物理定理有所不同，經過最佳化，出現的機率已經較低，但仍未能避免，因此有些玩家會發現小圓若沒有很准地撞在擋板正中央則可能導致遊戲失敗。

b)由於函數過於冗長，運行效率較低，再加上使用定時器，因此在Andorid與iOS或其他移動端上的遊戲體驗不盡相同整體來說iOS由於Android）。

c)熱門排行榜並未實現自動即時更新。(資料庫還不會用)

8.遊戲介面預覽：

(圖1為初版，圖2去掉了按鈕，圖3為最終版，圖4為熱門排行榜)

圖1

圖2

圖3

圖4