var?WINDOW_WIDTH?=?1024;
var?WINDOW_HEIGHT?=?768;
var?Radius?=?8;
var?MARGIN_TOP?=?60;
var?MARGIN_LEFT?=?30;
//4月22日
const?endTime?=?new?Date(2017,?3,?22,?18,?00,?00);
var?curShowTimeSeconds?=?0;

var?balls?=?[];
const?colors?=?["#33B5E5",?"#CCC",?"#caff67",?"#67becf",?"#ef3d61",?"#f9f51a",?"#a594c0",?"#fa8ecc",?"#f6ca29"];

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();?//改變
????????},
????????50
????);

}

function?update()?{
????var?nextShowTimeSecondes?=?getCurrentShowTimeSeconds();

????var?nexthours?=?parseInt(nextShowTimeSecondes?/?3600);
????var?nextminutes?=?parseInt((nextShowTimeSecondes?-?nexthours?*?3600)?/?60);
????var?nextseconds?=?nextShowTimeSecondes?%?60;

????var?curhours?=?parseInt(curShowTimeSeconds?/?3600);
????var?curminutes?=?parseInt((curShowTimeSeconds?-?curhours?*?3600)?/?60);
????var?curseconds?=?curShowTimeSeconds?%?60;

????if?(curseconds?!=?nextseconds)?{
????????if?(parseInt(curhours?/?10)?!=?parseInt(nexthours?/?10))?{
????????????addBalls(MARGIN_LEFT,?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(nextseconds?%?10))
????????}

????????curShowTimeSeconds?=?nextShowTimeSecondes;
????}

????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?+?j?*?2?*?(Radius?+?1)?+?(Radius?+?1),
????????????????????y:?y?+?i?*?2?*?(Radius?+?1)?+?(Radius?+?1),
????????????????????g:?1.5?+?Math.random,
????????????????????vx:?Math.pow(-1,?Math.ceil(Math.random()?*?1000))?*?4,
????????????????????vy:?-10,
????????????????????color:?colors[Math.floor(Math.random()?*?colors.length)]
????????????????}
????????????????balls.push(aBall);
????????????}
}

function?getCurrentShowTimeSeconds()?{
????var?curTime?=?new?Date();
????var?ret?=?endTime.getTime()?-?curTime.getTime();
????ret?=?Math.round(ret?/?1000);?//得到秒數(shù)

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

function?render(ctx)?{
????ctx.clearRect(0,?0,?WINDOW_WIDTH,?WINDOW_HEIGHT);
????var?hours?=?parseInt(curShowTimeSeconds?/?3600);
????var?minutes?=?parseInt((curShowTimeSeconds?-?hours?*?3600)?/?60);
????var?seconds?=?curShowTimeSeconds?%?60;

????//數(shù)字占的寬帶為（2*7+1）*（Radius+1),冒號(hào)占的寬帶為（2*4+1）*（Radius+1)
????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,true);
????????ctx.closePath();
????????ctx.fill();
????}
}

function?renderDigit(x,?y,?num,?ctx)?{
????ctx.fillStyle?=?"rgb(0,102,153)";
????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();
????????????}
}