var WINDOW_WIDTH=1333;
var WINDOW_HEIGHT=768;
var RADIUS=8;
var MARGIN_TOP=80;
var MARGIN_LEFT=185;

const endTime=new Date(2016, 5, 9, 12, 59, 59);
var curShowTimeSeconds=0;

var balls=[];
const colors=["#09C","#93C","#690","#9C0","#F80","#F44","#CC000C","#A6C","#058","000"];

window.onload=function(){
?var canvas=document.getElementById('canvas');
?var context=canvas.getContext("2d");
?
?canvas.width=WINDOW_WIDTH;
?canvas.height=WINDOW_HEIGHT;?
?curShowTimeSeconds=getCurrentShowTimeSeconds();
?
?setInterval(/*動畫 */
??function(){
???render(context);
????? update();
???? }
??,
??40
?);
}

function getCurrentShowTimeSeconds(){
?var curTime=new Date();
?var ret=endTime.getTime()-curTime.getTime();
?ret=Math.round(ret/1000);
?
?return ret>=0?ret:0;
}

function update(){
?
?var nextShowTimeSeconds=getCurrentShowTimeSeconds();
?
?var nextHours=parseInt(nextShowTimeSeconds/3600);
?var nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60);
?var nextSeconds=nextShowTimeSeconds%60;/*next時間*/
?
?var curHours=parseInt(curShowTimeSeconds/3600);
?var curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);
?var curSeconds=curShowTimeSeconds%60;/*cur時間 */
?
?
?
?if(nextSeconds!=curSeconds){
??if(parseInt(nextHours/10)!=parseInt(curHours/10))
??? {addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10));}
?
? if(parseInt(nextHours%10)!=parseInt(curHours%10))
??? {addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10));}
??
??if(parseInt(nextMinutes/10)!=parseInt(curMinutes/10))
??? {addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));}
??
??if(parseInt(nextMinutes%10)!=parseInt(curMinutes%10))
??? {addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));}
??
??if(parseInt(nextSeconds/10)!=parseInt(curSeconds/10))
??? {addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));}
??
??if(parseInt(nextSeconds%10)!=parseInt(curSeconds%10))
??? {addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10));}
??
??curShowTimeSeconds=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>=WINDOW_HEIGHT-RADIUS){
???balls[i].y=WINDOW_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++){
?? if(digit[num][i][j]==1)
?? {
???? var aBall={
?? ?x:x+2*j*(RADIUS+1)+(RADIUS+1),
? ?? y:y+2*i*(RADIUS+1)+(RADIUS+1),
?? ?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 render(ctx){/*時間總體繪圖 */
?ctx.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);/*canvas內畫面刷新 */
?var hours=parseInt(curShowTimeSeconds/3600);
?var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);
?var seconds=curShowTimeSeconds%60;
?
?renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10), ctx)/*小時的十位數*/
?renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,hours-10*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,true);
?ctx.closePath();
?
?ctx.fill();
?
}

}

function renderDigit(x,y,num,ctx){/*時間點陣內繪圖 */
?
?ctx.fillStyle="blueviolet";
?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()
???? 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()
??? }
}
}
}