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

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

var?balls=[];?//用于保存需要生成的彩色的小球
//設置生成小球的顏色
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");
//獲取當前時間的秒數
curShowTimeSec?=?getCurShowTimeSec();

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

}

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

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

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

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

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

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

curShowTimeSec?=?nextShowTimeSeconds;

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

function?updateBalls(){
//遍歷所有的小球,改變小球的狀態
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){
//設置需要繪制的小球的屬性,包括坐標位置,半徑,重力加速度的值
//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,//取負一或者正一
vy:-5,
color:colors[Math.floor(Math.random()*colors.length)]
}
balls.push(aBall);//將創建的小球放入小球數組中
}
}
}
}

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){
//刷新指定的一個矩形區域
ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);//?刷新canvas畫布,不然兩次繪圖的結果會重疊
//獲取頁面上要顯示的倒計時的時分秒
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)";	//設置填充的顏色
/**
*?根據傳入的num來繪制具體的數字,這個是保存在digit里面的,所有要繪制的地方,都用1標識了
*?不需要繪制的,使用0標識.digit是一個3維數組.?第一維的數組用于保存要繪制的每一個數組,從0到9
*?10表示的是:號的繪制.?第二維和第三維數組,就是具體的數字了.其中用1標識的是需要繪制的.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();
//開始繪制一個圓,第一個參數是圓的x坐標點位置,第二個是y坐標點位置,第三個是半徑
//第四個是從哪里開始繪制,0表示是0度的方向繪制.第五個參數是表示繪制到哪里
//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();
}
}
}
}