Pongo網(wǎng)頁版JavaScript源代碼及設(shè)計(jì)思路

1、Pongo網(wǎng)頁版JavaScript源代碼及設(shè)計(jì)思路 HYPERLINK / / HYPERLINK / 郵件群發(fā) 1.游戲背景介紹(寫在前面的廢話)：五月初的某天，看到某網(wǎng)推薦了這款游戲，Pongo，看著還不錯(cuò)的樣子就用ipad下下來試玩了下，玩了兩局感覺還錯(cuò)挺過癮的，因?yàn)槭鞘智奉愑螒蚵锎蠹叶?。但是沒一會(huì)發(fā)現(xiàn)游戲在ipad似乎有些bug，玩一會(huì)就會(huì)卡住然后只能強(qiáng)退了，真是揪心，記錄還等著破呢。怎么辦？玩游戲不如玩自己的游戲的念頭又邪惡的出現(xiàn)了，然后就把pad丟給了朋友虐心去，我默默回到電腦前開始動(dòng)手自己寫個(gè)不會(huì)卡的。大概兩小時(shí)吧，寫出了基本框架，然后扔sinaapp里試了下效果基本能玩就洗

2、洗睡了。第二天醒來因?yàn)橹苣]事就花了些時(shí)間設(shè)計(jì)了下界面，同時(shí)不幸自己測出了一些比較嚴(yán)重的bug，最后又花了些時(shí)間給改掉了。最后游戲取名”Pongo+“(手機(jī)黨點(diǎn)我即玩)，電腦端暫時(shí)不支持，并順便在Github上上傳了源碼并去掉了提交成績模塊。2.游戲試玩網(wǎng)址：Pongo+(僅限移動(dòng)端)：/github開源(歡迎fork讓游戲更好)：/ChenReason/pongo/blob/ghs/index.html3.游戲規(guī)則玩法：點(diǎn)擊屏幕會(huì)改變擋板的運(yùn)動(dòng)方向，點(diǎn)擊一次擋板方向相應(yīng)改變一次，目的是為了能剛好擋住四處滾動(dòng)的小球不讓其跑出大圓外。時(shí)間越長越好！最后可提交自己的成績進(jìn)行排名！4.游戲所用技術(shù)：

3、HTML、CSS、JavaScript、Canvas、PHP5.游戲設(shè)計(jì)思路：a)運(yùn)用Canvas將游戲的主界面畫出，底部為一單色長方形，上面覆蓋一個(gè)大圓，大圓上再繪制小圓及擋板，擋板中部還有一個(gè)大小為1px的超級(jí)小圓(作實(shí)現(xiàn)碰撞檢測)。b)小圓運(yùn)動(dòng)方向一共有8個(gè)分別為上、下、左、右、左上、左下、右上和右下。c)擋板的運(yùn)動(dòng)方向只有兩個(gè)，順時(shí)針和逆時(shí)針。d)碰撞檢測未涉及到引擎的使用，而是根據(jù)小圓與擋板中部的超級(jí)小圓進(jìn)行距離判斷，從而實(shí)現(xiàn)簡陋的碰撞檢測。e)小球碰撞后反彈的方向確定，利用常識(shí)列舉，共8種情況。6.游戲?qū)崿F(xiàn)難點(diǎn)：a)碰撞檢測。b)定時(shí)器setInterval的清除時(shí)機(jī)以及是否清楚徹

4、底。c)定時(shí)器周期長短與游戲體驗(yàn)的關(guān)系。d)Android與IOS設(shè)備性能不同導(dǎo)致的游戲流暢度問題。7.游戲現(xiàn)有問題：a)由于碰撞檢測是比較兩圓的圓心距，且涉及到定時(shí)器的使用，因此由于定時(shí)器間隔極短導(dǎo)致在肉眼所見的一次碰撞背后其實(shí)已經(jīng)發(fā)生了數(shù)十次碰撞，由此會(huì)導(dǎo)致小球最后實(shí)際的反彈方向與現(xiàn)實(shí)的物理定理有所不同，經(jīng)過優(yōu)化，出現(xiàn)的概率已經(jīng)較低，但仍未能避免，因此有些玩家會(huì)發(fā)現(xiàn)小圓若沒有很準(zhǔn)地撞在擋板正中央則可能導(dǎo)致游戲失敗。b)由于函數(shù)過于冗長，運(yùn)行效率較低，再加上使用定時(shí)器，因此在Andorid與iOS或其他移動(dòng)端上的游戲體驗(yàn)不盡相同（整體來說iOS由于Android）。c)排行榜并未實(shí)現(xiàn)自動(dòng)實(shí)時(shí)

5、更新。(數(shù)據(jù)庫還不會(huì)用)8.游戲界面預(yù)覽：(圖1為初版，圖2去掉了按鈕，圖3為最終版，圖4為排行榜)圖1圖2圖3圖49.游戲JavaScript部分源代碼：varifingame=0; varmaxgrade=0,grade=0; vargrade1,grade2; varnickname; vargamespeed=1.4;/小球速度 varlinespeed=Math.PI/95;/跟蹤線速度 varcrashdistancefaild=-7;/碰撞檢測參數(shù) varcrashdistancesucc=15 varfantanjuli=7; varthemaxgradeline=12.1;

6、functiongetCookie1(nickname) if(document.cookie.length0) c_start=document.cookie.indexOf(nickname+=) if(c_start!=-1) c_start=c_start+nickname.length+1; c_end=document.cookie.indexOf(,c_start); if(c_end=-1) c_end=document.cookie.length; returnunescape(document.cookie.substring(c_start,c_end); return

7、functiongetCookie2(mymaxgrade) if(document.cookie.length0) c_start=document.cookie.indexOf(mymaxgrade+=) if(c_start!=-1) c_start=c_start+mymaxgrade.length+1; c_end=document.cookie.indexOf(;,c_start); if(c_end=-1) c_end=document.cookie.length; returnunescape(document.cookie.substring(c_start,c_end);

8、return functionsetCookie(nickname,value,mymaxgrade,maxgrade,expiredays) varexdate=newDate() exdate.setDate(exdate.getDate()+expiredays) document.cookie=nickname+=+escape(value)+,+mymaxgrade+=+escape(maxgrade)+(expiredays=null)?:;expires=+exdate.toGMTString(); functioncheckCookie() nickname=getCookie

9、1(nickname); maxgrade=parseInt(getCookie2(mymaxgrade); if(isNaN(maxgrade)=true) maxgrade=0; if(nickname!=null&nickname!=) alert(歡迎+nickname+回來!+n+如果喜歡請(qǐng)分享一下哈); else nickname=prompt(請(qǐng)輸入你的昵稱:（名字太長上榜可是會(huì)顯示不完整的哦）,) if(nickname!=null&nickname!=) varmaxgradestring=maxgrade.toString(); setCookie(nickname,nic

10、kname,mymaxgrade,maxgradestring,365); varobjpane=document.getElementById(pane); varctxpane=objpane.getContext(2d); ctxpane.translate(150,150);/必備畫布中心點(diǎn)平移 functionsendmail() if(grade2themaxgradeline) varmax_grade=grade2; window.location.href=index.php?max_grade=+max_grade+&nick_name=+nickname; /* quic

11、kSend(,$grade,$nickname,mypongo); $mail-clean(); ? */alert(nickname+你的成績?yōu)椋?grade2+提交成功); vargamedirection= shang:1, xia:5, zuo:7, you:3, zuoshang:8, zuoxia:6, youshang:2, youxia:4, clock:0, anticlock:9, ;/方向 varcanvas= width:300, height:300, ;/畫布 varbigcircle=/大圓參數(shù) x:0,/圓心的x軸坐標(biāo)值 y:0,/圓心的y軸坐標(biāo)值 r:150,

12、/圓的半徑 c:rgb(255,255,255), ;/大圓 varsmallcircle=/小圓參數(shù) x:0,/圓心的x軸坐標(biāo)值 y:0,/圓心的y軸坐標(biāo)值 r:12,/圓的半徑 c:rgb(204,105,106), direction:gamedirection.xia, ;/小圓 varline=/擋板線的參數(shù) x:0,/圓心的x軸坐標(biāo)值 y:0,/圓心的y軸坐標(biāo)值 r:150,/圓弧的半徑 start:(Math.PI/2-Math.PI/16), end:(Math.PI/2+Math.PI/16), c:rgb(55,55,55), direction:gamedirection

13、.anticlock, ;/跟蹤線 vardot=/跟蹤點(diǎn)參數(shù) x:(bigcircle.r*Math.cos(line.start+Math.PI/16),/以大圓為原點(diǎn) y:(bigcircle.r*Math.sin(line.start+Math.PI/16), r:1, /跟蹤點(diǎn) functionchangelinedirection() if(line.direction=gamedirection.clock) line.direction=gamedirection.anticlock; else line.direction=gamedirection.clock; funct

14、iongetdistance() vardistance=Math.sqrt(smallcircle.x)*(smallcircle.x)+(smallcircle.y)*(smallcircle.y); returndistance; /返回小球與大圓中心距離平方getdistance() functionifgameover()/判斷是否出界 if(getdistance()-bigcircle.r)5) returntrue; elsereturnfalse; /判斷游戲是否結(jié)束ifgameover() functionifcrash()/碰撞檢測 vardx=dot.x-smallci

15、rcle.x; vardy=dot.y-smallcircle.y; vardd=Math.sqrt(dx*dx+dy*dy); if(ddmaxgrade) maxgrade=grade; newrecoder(); addone(); break; casegamedirection.xia: smallcircle.y=smallcircle.y+gamespeed; grade+; if(grademaxgrade) maxgrade=grade; newrecoder(); addone(); break; casegamedirection.zuo: smallcircle.x=s

16、mallcircle.x-gamespeed; grade+; if(grademaxgrade) maxgrade=grade; newrecoder(); addone(); break; casegamedirection.you: smallcircle.x=smallcircle.x+gamespeed; grade+; if(grademaxgrade) maxgrade=grade; newrecoder(); addone(); break; casegamedirection.zuoshang: smallcircle.x=smallcircle.x-gamespeed*0.

17、8; smallcircle.y=smallcircle.y-gamespeed*0.8; grade+; if(grademaxgrade) maxgrade=grade; newrecoder(); addone(); break; casegamedirection.zuoxia: smallcircle.x=smallcircle.x-gamespeed*0.8; smallcircle.y=smallcircle.y+gamespeed*0.8; grade+; if(grademaxgrade) maxgrade=grade; newrecoder(); addone(); bre

18、ak; casegamedirection.youshang: smallcircle.x=smallcircle.x+gamespeed*0.8; smallcircle.y=smallcircle.y-gamespeed*0.8; grade+; if(grademaxgrade) maxgrade=grade; newrecoder(); addone(); break; casegamedirection.youxia: smallcircle.x=smallcircle.x+gamespeed*0.8; smallcircle.y=smallcircle.y+gamespeed*0.

19、8; grade+; if(grademaxgrade) maxgrade=grade; newrecoder(); addone(); break; default: break; /小球移動(dòng)smallcircledirection() /*畫出底部圓*/ctxpane.beginPath();/大圓 ctxpane.arc(bigcircle.x,bigcircle.y,bigcircle.r,0,Math.PI*2,true); ctxpane.fillStyle=bigcircle.c; ctxpane.fill(); ctxpane.closePath(); /*畫出底部追蹤線條*/

20、ctxpane.beginPath(); ctxpane.lineWidth=6; ctxpane.strokeStyle=line.c; ctxpane.arc(line.x,line.y,line.r,line.start,line.end,false); ctxpane.stroke(); ctxpane.closePath(); functiontapme()/tapme ctxpane.beginPath(); ctxpane.strokeStyle=rgb(255,222,195); ctxpane.font=80pxPapyrus; ctxpane.strokeText(TAP,

21、-95,30); ctxpane.fillStyle=rgb(255,205,105); ctxpane.font=35pxPapyrus; ctxpane.fillText(me,70,30); ctxpane.closePath(); functionnewrecoder() ctxpane.beginPath(); ctxpane.fillStyle=rgb(255,0,0); ctxpane.font=18pxPapyrus; ctxpane.fillText(New!,58,80); ctxpane.closePath(); functionaddone() grade1=(grad

22、e/150).toFixed(1); grade2=(maxgrade/150).toFixed(1); varsay1=now; varsay2=bestctxpane.beginPath(); ctxpane.strokeStyle=rgb(250,222,185); ctxpane.font=60pxPapyrus; ctxpane.strokeText(grade1,-45,-60); ctxpane.strokeText(grade2,-45,100); ctxpane.fillStyle=rgb(255,0,100); ctxpane.font=15pxPapyrus; ctxpa

23、ne.fillText(say1,58,-60); ctxpane.fillStyle=rgb(255,0,100); ctxpane.font=15pxPapyrus; ctxpane.fillText(say2,58,100); ctxpane.closePath(); functionmovetest() if(ifgameover() ifingame=0; if(maxgradeparseInt(getCookie2(mymaxgrade) setCookie(nickname,nickname,mymaxgrade,maxgrade.toString(),365); clearIn

24、terval(timer); tapme(); else if(ifcrash() randomback(); ctxpane.clearRect(-150,-150,300,300);/清屏 ctxpane.beginPath();/大圓 ctxpane.arc(bigcircle.x,bigcircle.y,bigcircle.r,0,Math.PI*2,true); ctxpane.fillStyle=bigcircle.c; ctxpane.fill(); ctxpane.closePath(); if(line.direction=gamedirection.clock)/跟蹤線順時(shí)

25、針 line.start=line.start+linespeed; line.end=line.end+linespeed; ctxpane.beginPath(); ctxpane.lineWidth=4; ctxpane.strokeStyle=line.c; ctxpane.arc(line.x,line.y,line.r,line.start,line.end,false); ctxpane.stroke(); ctxpane.closePath(); if(line.direction=gamedirection.anticlock)/跟蹤逆順時(shí)針 line.start=line.

26、start-linespeed; line.end=line.end-linespeed; ctxpane.beginPath(); ctxpane.lineWidth=4; ctxpane.strokeStyle=line.c; ctxpane.arc(line.x,line.y,line.r,line.start,line.end,false); ctxpane.stroke(); ctxpane.closePath(); dot.x=bigcircle.r*Math.cos(line.start+Math.PI/32)/跟蹤點(diǎn) dot.y=bigcircle.r*Math.sin(lin

27、e.start+Math.PI/32) ctxpane.beginPath();/線上跟蹤點(diǎn) ctxpane.arc(dot.x,dot.y,dot.r,0,Math.PI*2,true); ctxpane.fillStyle=smallcircle.c; ctxpane.fill(); ctxpane.closePath(); smallcircledirection();/小圓 ctxpane.save(); ctxpane.beginPath(); ctxpane.arc(smallcircle.x,smallcircle.y,smallcircle.r,0,Math.PI*2,true); ctxpane.fillStyle=smallcircle.c; ctxpane.fill(); ctxpane.closePath(); ctxpane.restore(); /主函數(shù) / tapme(); vartimer; functionstartgame()/開始游戲 if(ifingame=0) ifingame=1; grade=0; varxx=Math.floor(Math.random()*8); /*switch(xx) case0: smallcircle.d