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為排行榜)
圖1
圖2
圖3
9.游戲JavaScript部分源代碼：
var ifingame=0;
var maxgrade=0,grade=0;
var grade1,grade2;
var nickname;
var gamespeed=1.4;//小球速度
var linespeed=Math.PI/95; //跟蹤線速度
var crashdistancefaild=-7;//碰撞檢測參數
var crashdistancesucc=15
var fantanjuli=7;
var themaxgradeline=12.1;
function getCookie1(nickname)
{
if (document.cookie.length>0)
{
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;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return ""
}
function getCookie2(mymaxgrade)
{
if (document.cookie.length>0)
{
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;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return ""
}
function setCookie(nickname,value,mymaxgrade,maxgrade,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=nickname+ "=" +escape(value)+"," + mymaxgrade + "=" + escape(maxgrade) + ((expiredays==null) ? "" : "; expires="+exdate.toGMTString());
}
function checkCookie()
{
nickname=getCookie1('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!="")
{
var maxgradestring=maxgrade.toString();
setCookie('nickname',nickname,'mymaxgrade',maxgradestring,365);
}
}
}
var objpane=document.getElementById("pane");
var ctxpane=objpane.getContext("2d");
ctxpane.translate(150,150);//必備 畫布中心點平移
function sendmail()
{
if(grade2>themaxgradeline)
var max_grade=grade2;
window.location.href='index.php?max_grade='+max_grade+'&nick_name='+nickname;
/* {
<?php
$grade=$_GET['max_grade'];
$nickname=$_GET['nick_name'];
$mail = new SaeMail();
$ret = $mail->quickSend( '[email protected]' , $grade , $nickname ,'[email protected]' , 'mypongo' );
$mail->clean();
?>
}*/
alert(nickname+"你的成績為："+grade2+"提交成功~");
}
var gamedirection={
shang : 1,
xia : 5,
zuo : 7,
you : 3,
zuoshang: 8,
zuoxia : 6,
youshang: 2,
youxia : 4,
clock : 0,
anticlock: 9,
};//方向
var canvas={
width : 300,
height: 300,
};//畫布
var bigcircle = {//大圓參數
x : 0, //圓心的x軸坐標值
y : 0, //圓心的y軸坐標值
r : 150, //圓的半徑
c : 'rgb(255,255,255)',
};//大圓
var smallcircle = {//小圓參數
x : 0, //圓心的x軸坐標值
y : 0, //圓心的y軸坐標值
r : 12, //圓的半徑
c : 'rgb(204,105,106)',
direction : gamedirection.xia,
};//小圓
var line = {//擋板線的參數
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.anticlock,
};//跟蹤線
var dot = {//跟蹤點參數
x : (bigcircle.r*Math.cos(line.start+Math.PI/16)),//以大圓為原點
y : (bigcircle.r*Math.sin(line.start+Math.PI/16)),
r : 1,
}//跟蹤點
function changelinedirection()
{
if(line.direction==gamedirection.clock)
{
line.direction=gamedirection.anticlock;
}
else
{
line.direction=gamedirection.clock;
}
}
function getdistance(){
var distance=Math.sqrt((smallcircle.x)*(smallcircle.x )+(smallcircle.y )*(smallcircle.y ));
return distance;
}//返回小球與大圓中心距離平方 getdistance()
function ifgameover(){//判斷是否出界
if((getdistance() - bigcircle.r)>5)
return true;
else
return false;
} //判斷游戲是否結束 ifgameover()
function ifcrash(){ //碰撞檢測
var dx = dot.x-smallcircle.x;
var dy = dot.y-smallcircle.y;
var dd=Math.sqrt(dx*dx+dy*dy);
if(dd< crashdistancesucc)
return true;
else
return false;
}//碰撞檢測 ifcrash()
function randomback()
{
var x=Math.floor(Math.random()*3);
switch (smallcircle.direction){
case gamedirection.shang:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.xia;
smallcircle.y=smallcircle.y+fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.zuoxia;
smallcircle.x=smallcircle.x-fantanjuli;
smallcircle.y=smallcircle.y+fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.youxia;
smallcircle.x=smallcircle.x+fantanjuli;
smallcircle.y=smallcircle.y+fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.xia:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.shang;
smallcircle.y=smallcircle.y-fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.zuoshang;
smallcircle.x=smallcircle.x-fantanjuli;
smallcircle.y=smallcircle.y-fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.youshang;
smallcircle.x=smallcircle.x+fantanjuli;
smallcircle.y=smallcircle.y-fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.zuo:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.you;
smallcircle.x=smallcircle.x+fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.youshang;
smallcircle.x=smallcircle.x+fantanjuli;
smallcircle.y=smallcircle.y-fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.youxia;
smallcircle.x=smallcircle.x+fantanjuli;
smallcircle.y=smallcircle.y+fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.you:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.zuo;
smallcircle.x=smallcircle.x-fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.zuoxia;
smallcircle.x=smallcircle.x-fantanjuli;
smallcircle.y=smallcircle.y+fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.zuoshang;
smallcircle.x=smallcircle.x-fantanjuli;
smallcircle.y=smallcircle.y-fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.zuoshang:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.youxia;
smallcircle.x=smallcircle.x+fantanjuli;
smallcircle.y=smallcircle.y+fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.xia;
smallcircle.y=smallcircle.y+fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.you;
smallcircle.x=smallcircle.x+fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.zuoxia:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.youshang;
smallcircle.x=smallcircle.x+fantanjuli;
smallcircle.y=smallcircle.y-fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.shang;
smallcircle.y=smallcircle.y-fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.you;
smallcircle.x=smallcircle.x+fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.youshang:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.zuoxia;
smallcircle.x=smallcircle.x-fantanjuli;
smallcircle.y=smallcircle.y+fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.zuo;
smallcircle.x=smallcircle.x-fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.xia;
smallcircle.y=smallcircle.y+fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.youxia:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.zuoshang;
smallcircle.x=smallcircle.x-fantanjuli;
smallcircle.y=smallcircle.y-fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.zuo;
smallcircle.x=smallcircle.x-fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.shang;
smallcircle.y=smallcircle.y-fantanjuli;
break;
default:
break;
} break;
}
default:
{
break;
}
}
}//小球隨機反向 randomback()
function smallcircledirection()
{
switch (smallcircle.direction){ //根據小球方向做移動
case gamedirection.shang:
{
smallcircle.y=smallcircle.y-gamespeed;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.xia:
{
smallcircle.y=smallcircle.y+gamespeed;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.zuo:
{
smallcircle.x=smallcircle.x-gamespeed;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.you:
{
smallcircle.x=smallcircle.x+gamespeed;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.zuoshang:
{
smallcircle.x=smallcircle.x-gamespeed*0.8;
smallcircle.y=smallcircle.y-gamespeed*0.8;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.zuoxia:
{
smallcircle.x=smallcircle.x-gamespeed*0.8;
smallcircle.y=smallcircle.y+gamespeed*0.8;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.youshang:
{
smallcircle.x=smallcircle.x+gamespeed*0.8;
smallcircle.y=smallcircle.y-gamespeed*0.8;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.youxia:
{
smallcircle.x=smallcircle.x+gamespeed*0.8;
smallcircle.y=smallcircle.y+gamespeed*0.8;
grade++;
if(grade>maxgrade)
{
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();
/*畫出底部追蹤線條*/
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();
function tapme()//tapme
{
ctxpane.beginPath();
ctxpane.strokeStyle="rgb(255,222,195)";
ctxpane.font = "80px Papyrus";
ctxpane.strokeText('TAP',-95,30);
ctxpane.fillStyle="rgb(255,205,105)";
ctxpane.font = "35px Papyrus";
ctxpane.fillText('me',70,30);
ctxpane.closePath();
}
function newrecoder()
{
ctxpane.beginPath();
ctxpane.fillStyle="rgb(255,0,0)";
ctxpane.font = "18px Papyrus";
ctxpane.fillText("New!",58,80);
ctxpane.closePath();
}
function addone()
{
grade1=(grade/150).toFixed(1);
grade2=(maxgrade/150).toFixed(1);
var say1="now";
var say2="best"
ctxpane.beginPath();
ctxpane.strokeStyle="rgb(250,222,185)";
ctxpane.font = "60px Papyrus";
ctxpane.strokeText(grade1,-45,-60);
ctxpane.strokeText(grade2,-45,100);
ctxpane.fillStyle="rgb(255,0,100)";
ctxpane.font = "15px Papyrus";
ctxpane.fillText(say1,58,-60);
ctxpane.fillStyle="rgb(255,0,100)";
ctxpane.font = "15px Papyrus";
ctxpane.fillText(say2,58,100);
ctxpane.closePath();
}
function movetest(){
if(ifgameover())
{
ifingame=0;
if(maxgrade>parseInt(getCookie2('mymaxgrade')))
{
setCookie('nickname',nickname,'mymaxgrade',maxgrade.toString(),365);
}
clearInterval(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) //跟蹤線順時針
{
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.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(line.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();
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.寫在最后
這純屬又是一個自娛自樂，寫完后的第三天因為開始忙著投簡歷找實習就沒空再管，扔到朋友圈讓朋友玩去了。這一個月過去了再重新看這游戲，感覺它不該就這樣死掉，本人沒什么技術，做得很拙略，因此發出這篇文字希望能幫到一些對pongo感興趣的朋友，再者就是希望如果有這方面的高手看到了能夠給予賜教，一切疑惑和賜教都歡迎給我留言，謝謝！
新聞熱點
疑難解答
