使用JavaScript實現(xiàn)網(wǎng)頁版Pongo設(shè)計思路及源代碼分享

更新時間：2014年06月16日 09:27:37 作者：ChenReason

Pongo是款很好玩的手欠類游戲，由于在玩的過程中發(fā)現(xiàn)了一些BUG，所以就打算自己也弄個，經(jīng)過一番思索，就有了本文，主要說說實現(xiàn)這款游戲的設(shè)計思路以及分享源碼給大家

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

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

但是沒一會發(fā)現(xiàn)游戲在ipad似乎有些bug，玩一會就會卡住然后只能強退了，真是揪心，記錄還等著破呢。

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

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

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

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

2.游戲試玩網(wǎng)址：

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

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

3.游戲規(guī)則玩法：

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

4.游戲所用技術(shù)：

HTML、CSS、JavaScript、Canvas、PHP

5.游戲設(shè)計思路：

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

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

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

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

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

6.游戲?qū)崿F(xiàn)難點：

a)碰撞檢測。

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

c)定時器周期長短與游戲體驗的關(guān)系。

d)Android與IOS設(shè)備性能不同導致的游戲流暢度問題。

7.游戲現(xiàn)有問題：

a)由于碰撞檢測是比較兩圓的圓心距，且涉及到定時器的使用，因此由于定時器間隔極短導致在肉眼所見的一次碰撞背后其實已經(jīng)發(fā)生了數(shù)十次碰撞，由此會導致小球最后實際的反彈方向與現(xiàn)實的物理定理有所不同，經(jīng)過優(yōu)化，出現(xiàn)的概率已經(jīng)較低，但仍未能避免，因此有些玩家會發(fā)現(xiàn)小圓若沒有很準地撞在擋板正中央則可能導致游戲失敗。

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

c)排行榜并未實現(xiàn)自動實時更新。(數(shù)據(jù)庫還不會用)

8.游戲界面預覽：

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

圖1

圖2

圖3

9.游戲JavaScript部分源代碼：

復制代碼代碼如下:

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

    if(ifingame==0)
    {
        ifingame=1;
        grade=0;
        var xx=Math.floor(Math.random()*8);
        /*      switch(xx)
        {
            case 0:
   smallcircle.direction=gamedirection.shang;
   break;
   case 1:
   smallcircle.direction=gamedirection.xia;
   break;
   case 2:
   smallcircle.direction=gamedirection.zuo;
   break;
   case 3:
   smallcircle.direction=gamedirection.you;
   break;
   case 4:
   smallcircle.direction=gamedirection.zuoshang;
   break;
   case 5:
   smallcircle.direction=gamedirection.zuoxia;
   break;
   case 6:
   smallcircle.direction=gamedirection.youshang;
   break;
   case 7:
   smallcircle.direction=gamedirection.youxia;
   break;
   default:
   break;
        }*/
    smallcircle.direction=gamedirection.xia;
smallcircle.x=smallcircle.y=0;
line.start=Math.PI/2-Math.PI/26;
line.end=Math.PI/2+Math.PI/26;
line.direction=gamedirection.anticlock;

clearInterval(timer);
timer=setInterval(movetest,10);
    }
}//開始游戲 startgame()
    function opentop()
    {
        window.location="http://pongotop.sinaapp.com";
    }

10.寫在最后

這純屬又是一個自娛自樂，寫完后的第三天因為開始忙著投簡歷找實習就沒空再管，扔到朋友圈讓朋友玩去了。這一個月過去了再重新看這游戲，感覺它不該就這樣死掉，本人沒什么技術(shù)，做得很拙略，因此發(fā)出這篇文字希望能幫到一些對pongo感興趣的朋友，再者就是希望如果有這方面的高手看到了能夠給予賜教，一切疑惑和賜教都歡迎給我留言，謝謝！

您可能感興趣的文章: