Pongo網頁版JavaScript源代碼及設計思路

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

    五月初的某天，看到某網推薦了這款遊戲，Pongo，看着還不錯的樣子就用ipad下下來試玩了下，玩了兩局感受還錯挺過癮的，由於是手欠類遊戲嘛你們懂的。

    可是沒一會發現遊戲在ipad彷佛有些bug，玩一會就會卡住而後只能強退了，真是揪心，記錄還等着破呢。

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

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

    次日醒來由於週末沒事就花了些時間設計了下界面，同時不幸本身測出了一些比較嚴重的bug，最後又花了些時間給改掉了。

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

2.遊戲試玩網址：

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

‍‍‍‍github開源(歡迎star/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

10.寫在最後

這純屬又是一個自娛自樂，寫完後的第三天由於開始忙着投簡歷找實習就沒空再管，扔到朋友圈讓朋友玩去了。這一個月過去了再從新看這遊戲，感受它不應就這樣死掉，本人沒什麼技術，作得很拙略，所以發出這篇文字但願能幫到一些對pongo感興趣的朋友，再者就是但願若是有這方面的高手看到了可以給予賜教，一切疑惑和賜教都歡迎給我留言，謝謝！

轉載請註明出處：http://chenreason.com以及本人署名ChenReason，謝謝。