var?CANVAS_WIDTH?=?1366;	//設(shè)置cnavas的畫布大小
var?CANVAS_HEIGHT?=?600;
var?RADIUS?=?8;	//設(shè)置組成的小球的半徑大小
var?MARGIN_LEFT?=?30;	//設(shè)置數(shù)字之間的間距
var?MARGIN_TOP?=?10;	//設(shè)置數(shù)字離頂部的間距

//倒計時結(jié)束的時間
const?endTime?=?new?Date(2015,7,22,19,25,34);
var?curShowTimeSec?=?0;

var?balls=[];?//用于保存需要生成的彩色的小球
//設(shè)置生成小球的顏色
var?colors?=?["#33b5e5","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];



window.onload?=?function(){
//初始化canvas對象,并得到context上下文對象
var?canvas?=?document.getElementById("canvas");
canvas.height?=?CANVAS_HEIGHT;
canvas.width?=?CANVAS_WIDTH;

var?ctx?=?canvas.getContext("2d");
//獲取當(dāng)前時間的秒數(shù)
curShowTimeSec?=?getCurShowTimeSec();

//動態(tài)的改變當(dāng)前時間,每50毫秒執(zhí)行一次
setInterval(function(){
render(ctx);	//繪圖
update();	//更新狀態(tài)
},50);

}

function?update(){
//獲取下一次執(zhí)行的時間,先讓下一次執(zhí)行的時間等于當(dāng)前的時間
var?nextShowTimeSeconds?=?getCurShowTimeSec();
var?nextHours?=?parseInt(nextShowTimeSeconds?/?3600);
var?nextMinutes?=?parseInt((nextShowTimeSeconds?-?nextHours?*?3600)/60);
var?nextSeconds?=?nextShowTimeSeconds?%?60;

//獲取當(dāng)前的時間,這個其實是上一次執(zhí)行的一個時間,因為curShowTimeSec這個變量,只有在執(zhí)行的時候才會改
//如果這一次不執(zhí)行,這個時間一直是上一次執(zhí)行的時間
var?curHours?=?parseInt(curShowTimeSec?/?3600);
var?curMinutes?=?parseInt((curShowTimeSec?-?curHours?*?3600)/60);
var?curSeconds?=?curShowTimeSec?%?60?;
//如果下一次執(zhí)行的秒數(shù),跟上一次執(zhí)行的秒數(shù)不一樣.就改變當(dāng)前的秒數(shù)
//因為他是50毫秒執(zhí)行一次,所以肯定有兩次秒數(shù)一樣的情況
if(nextSeconds?!=?curSeconds?){
//顯示時間的小時的十位數(shù)改變了,要生成小時位置上的小球
if(parseInt(curHours/10)?!=?parseInt(nextHours/10)){
addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10));
}
//小時個位數(shù)
if(parseInt(curHours%10)?!=?parseInt(nextHours%10)){
addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));
}

//分鐘十位數(shù)的改變
if(parseInt(curMinutes/10)?!=?parseInt(nextMinutes/10)){
addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));
}

//分鐘個位數(shù)的改變
if(parseInt(curMinutes%10)?!=?parseInt(nextMinutes%10)){
addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));
}

//秒鐘十位數(shù)的改變
if(parseInt(curSeconds/10)?!=?parseInt(nextSeconds/10)){
addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));
}

//秒鐘的個位數(shù)改變
if(parseInt(curSeconds%10)?!=?parseInt(nextSeconds%10)){
addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10));
}

curShowTimeSec?=?nextShowTimeSeconds;

}
updateBalls();//更新生成的小球的狀態(tài)
}

function?updateBalls(){
//遍歷所有的小球,改變小球的狀態(tài)
for(var?i?=?0?;?i?<?balls.length?;?i++){
balls[i].x?+=?balls[i].vx;
balls[i].y?+=?balls[i].vy;
balls[i].vy?+=?balls[i].g;
//碰撞的檢測
if(?balls[i].y?>=?CANVAS_HEIGHT-?RADIUS){
balls[i].y?=?CANVAS_HEIGHT-?RADIUS;
balls[i].vy?=?-balls[i].vy*0.75;
}
}
}

function?addBalls(x?,?y?,?num){
for(var?i?=?0?;?i?<?digit[num].length?;?i++){
for(var?j?=?0?;?j?<?digit[num][i].length?;?j++){
//如果為1,則繪制小球
if(digit[num][i][j]?==?1){
//設(shè)置需要繪制的小球的屬性,包括坐標(biāo)位置,半徑,重力加速度的值
//X方向速度值,Y方向速度值
var?aBall?=?{
x:x+j*2*(RADIUS+1)+(RADIUS+1),
y:y+i*2*(RADIUS+1)+(RADIUS+1),
r:RADIUS,
g:1.5+Math.random(),
vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,//取負(fù)一或者正一
vy:-5,
color:colors[Math.floor(Math.random()*colors.length)]
}
balls.push(aBall);//將創(chuàng)建的小球放入小球數(shù)組中
}
}
}
}

function?getCurShowTimeSec(){
var?currTime?=?new?Date();
var?ret?=?endTime.getTime()?-?currTime.getTime();
ret?=?Math.round(ret/1000);

return?ret?>=?0???ret?:?0;
}

function?render(ctx){
//刷新指定的一個矩形區(qū)域
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);//?刷新canvas畫布,不然兩次繪圖的結(jié)果會重疊
//獲取頁面上要顯示的倒計時的時分秒
var?hours?=?parseInt(curShowTimeSec?/?3600);
var?minutes?=?parseInt((curShowTimeSec?-?hours?*?3600)/60);
var?seconds?=?curShowTimeSec?%?60;
//開始繪制頁面上顯示的時分秒
renderDigit(MARGIN_LEFT?,?MARGIN_TOP?,?parseInt(hours/10),ctx);
renderDigit(MARGIN_LEFT?+?15*(RADIUS+1),?MARGIN_TOP,parseInt(hours%10),?ctx);
renderDigit(MARGIN_LEFT?+?30*(RADIUS+1),?MARGIN_TOP,10,ctx);
renderDigit(MARGIN_LEFT?+?39*(RADIUS+1),?MARGIN_TOP,parseInt(minutes/10),ctx);
renderDigit(MARGIN_LEFT?+?54*(RADIUS+1),?MARGIN_TOP,parseInt(minutes%10),ctx);
renderDigit(MARGIN_LEFT?+?69*(RADIUS+1),?MARGIN_TOP,10,ctx);
renderDigit(MARGIN_LEFT?+?78*(RADIUS+1),?MARGIN_TOP,parseInt(seconds/10),ctx);
renderDigit(MARGIN_LEFT?+?93*(RADIUS+1),?MARGIN_TOP,parseInt(seconds%10),ctx);

//繪制生成的小球
for(var?i?=?0?;?i?<?balls.length?;?i++){
ctx.fillStyle?=?balls[i].color;
ctx.beginPath();
ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI);
ctx.closePath();
ctx.fill();
}
}

function?renderDigit(x?,?y?,?num?,?ctx){
ctx.fillStyle?=?"rgb(0,102,153)";	//設(shè)置填充的顏色
/**
*?根據(jù)傳入的num來繪制具體的數(shù)字,這個是保存在digit里面的,所有要繪制的地方,都用1標(biāo)識了
*?不需要繪制的,使用0標(biāo)識.digit是一個3維數(shù)組.?第一維的數(shù)組用于保存要繪制的每一個數(shù)組,從0到9
*?10表示的是:號的繪制.?第二維和第三維數(shù)組,就是具體的數(shù)字了.其中用1標(biāo)識的是需要繪制的.0的不需要繪制
*/
for(var?i?=?0?;?i?<?digit[num].length?;?i++){
for(?var?j?=?0?;?j?<?digit[num][i].length?;?j++){
if(digit[num][i][j]?==?1){
ctx.beginPath();
//開始繪制一個圓,第一個參數(shù)是圓的x坐標(biāo)點位置,第二個是y坐標(biāo)點位置,第三個是半徑
//第四個是從哪里開始繪制,0表示是0度的方向繪制.第五個參數(shù)是表示繪制到哪里
//0.5PI是-270度位置,1PI是180度位置,1.5PI是90度位置,2PI是360度位置
ctx.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
ctx.closePath();
ctx.fill();
}
}
}
}