Pongo网页版JavaScript源代码及设计思路

1、Pongo网页版JavaScript源代码及设计思路 HYPERLINK / / HYPERLINK / 邮件群发 1.游戏背景介绍(写在前面的废话)：五月初的某天，看到某网推荐了这款游戏，Pongo，看着还不错的样子就用ipad下下来试玩了下，玩了两局感觉还错挺过瘾的，因为是手欠类游戏嘛大家懂的。但是没一会发现游戏在ipad似乎有些bug，玩一会就会卡住然后只能强退了，真是揪心，记录还等着破呢。怎么办？玩游戏不如玩自己的游戏的念头又邪恶的出现了，然后就把pad丢给了朋友虐心去，我默默回到电脑前开始动手自己写个不会卡的。大概两小时吧，写出了基本框架，然后扔sinaapp里试了下效果基本能玩就洗

2、洗睡了。第二天醒来因为周末没事就花了些时间设计了下界面，同时不幸自己测出了一些比较严重的bug，最后又花了些时间给改掉了。最后游戏取名”Pongo+“(手机党点我即玩)，电脑端暂时不支持，并顺便在Github上上传了源码并去掉了提交成绩模块。2.游戏试玩网址：Pongo+(仅限移动端)：/github开源(欢迎fork让游戏更好)：/ChenReason/pongo/blob/ghs/index.html3.游戏规则玩法：点击屏幕会改变挡板的运动方向，点击一次挡板方向相应改变一次，目的是为了能刚好挡住四处滚动的小球不让其跑出大圆外。时间越长越好！最后可提交自己的成绩进行排名！4.游戏所用技术：

3、HTML、CSS、JavaScript、Canvas、PHP5.游戏设计思路：a)运用Canvas将游戏的主界面画出，底部为一单色长方形，上面覆盖一个大圆，大圆上再绘制小圆及挡板，挡板中部还有一个大小为1px的超级小圆(作实现碰撞检测)。b)小圆运动方向一共有8个分别为上、下、左、右、左上、左下、右上和右下。c)挡板的运动方向只有两个，顺时针和逆时针。d)碰撞检测未涉及到引擎的使用，而是根据小圆与挡板中部的超级小圆进行距离判断，从而实现简陋的碰撞检测。e)小球碰撞后反弹的方向确定，利用常识列举，共8种情况。6.游戏实现难点：a)碰撞检测。b)定时器setInterval的清除时机以及是否清楚彻

4、底。c)定时器周期长短与游戏体验的关系。d)Android与IOS设备性能不同导致的游戏流畅度问题。7.游戏现有问题：a)由于碰撞检测是比较两圆的圆心距，且涉及到定时器的使用，因此由于定时器间隔极短导致在肉眼所见的一次碰撞背后其实已经发生了数十次碰撞，由此会导致小球最后实际的反弹方向与现实的物理定理有所不同，经过优化，出现的概率已经较低，但仍未能避免，因此有些玩家会发现小圆若没有很准地撞在挡板正中央则可能导致游戏失败。b)由于函数过于冗长，运行效率较低，再加上使用定时器，因此在Andorid与iOS或其他移动端上的游戏体验不尽相同（整体来说iOS由于Android）。c)排行榜并未实现自动实时

5、更新。(数据库还不会用)8.游戏界面预览：(图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;/碰撞检测参数 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+如果喜欢请分享一下哈); else nickname=prompt(请输入你的昵称:（名字太长上榜可是会显示不完整的哦）,) 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);/必备画布中心点平移 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+你的成绩为：+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=/大圆参数 x:0,/圆心的x轴坐标值 y:0,/圆心的y轴坐标值 r:150,

12、/圆的半径 c:rgb(255,255,255), ;/大圆 varsmallcircle=/小圆参数 x:0,/圆心的x轴坐标值 y:0,/圆心的y轴坐标值 r:12,/圆的半径 c:rgb(204,105,106), direction:gamedirection.xia, ;/小圆 varline=/挡板线的参数 x:0,/圆心的x轴坐标值 y:0,/圆心的y轴坐标值 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=/跟踪点参数 x:(bigcircle.r*Math.cos(line.start+Math.PI/16),/以大圆为原点 y:(bigcircle.r*Math.sin(line.start+Math.PI/16), r:1, /跟踪点 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; /判断游戏是否结束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; /小球移动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)/跟踪线顺时

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)/跟踪逆顺时针 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)/跟踪点 dot.y=bigcircle.r*Math.sin(lin

27、e.start+Math.PI/32) ctxpane.beginPath();/线上跟踪点 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(); /主函数 / tapme(); vartimer; functionstartgame()/开始游戏 if(ifingame=0) ifingame=1; grade=0; varxx=Math.floor(Math.random()*8); /*switch(xx) case0: smallcircle.d