使用JavaScript實現網頁版Pongo設計想法及原始碼分享

首頁

web前端

js教程

使用JavaScript實現網頁版Pongo設計想法及原始碼分享_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:44 PM

javascript

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為排行榜)

使用JavaScript實現網頁版Pongo設計想法及原始碼分享_javascript技巧

圖1

使用JavaScript實現網頁版Pongo設計想法及原始碼分享_javascript技巧

圖2

使用JavaScript實現網頁版Pongo設計想法及原始碼分享_javascript技巧

圖3

使用JavaScript實現網頁版Pongo設計想法及原始碼分享_javascript技巧

9.遊戲JavaScript部分原始碼：

複製程式碼程式碼如下:

/////////////////////////////////////////////
tapme ();
var timer;
function startgame(){//開始遊戲

    if(ifingame==0)
    {
        ifingame=1;
     *8);
/*      switch(xx)
        {
            caselc    case 1:
   smallcircle.direction=gamedirection.xia;
   break;
    狀況2：
   smallcircle.direction=gamedirection.zuo;
   🎜>   break;
   狀況4:
   smallcircle.direction=gamedirection.zuoshang;
   break;
       狀況6:
   smallcircle.direction=gamedirection.youshang;
   break;
   狀況7:
   smallcircle.irection=gamedirection.
   smallc、   break;
        } */
   smallcircle.direction=gamedirection.xia;
smallcircle.x=smallcircle.y=0;
line.start=Math.PI/2-Math.PI/26;
line.start=Math.PI/2-Math.PI/26; line.direction=gamedirection.anticlock;

clearInterval(timer);
timer=setInterval(movetest,10);
}
}//開始遊戲startgame()
    function opentop()
    {
       🎜>

10.寫在最後

這純屬又是一個自娛自樂，寫後的天因為開始著著著簡歷投簡歷忙實習沒空再管，扔到朋友圈讓第三個朋友玩。看這個遊戲，感覺不該就這樣死掉，本人沒什麼技術，做得很差因此，發布這篇文字希望能幫到一些對pongo感興趣的朋友，再者就是希望如果有這方面的高手看到了能夠賜教，疑惑一切和賜教都歡迎給我留言，謝謝！