var WINDOW_WIDTH;
var WINDOW_HEIGHT;
var RADIUS;
var MARGIN_TOP;
var MARGIN_LEFT;
var curShowTimeSeconds=0;
const endTime=new Date("2017-08-17 22:24:00");
var balls = [];
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]

window.onload = function() {
??? //屏幕自適應(yīng)
???? WINDOW_WIDTH=document.documentElement.clientWidth-20;
???? WINDOW_HEIGHT=document.documentElement.clientHeight-20;

???? MARGIN_LEFT=Math.round(WINDOW_WIDTH/10);
???? RADIUS=Math.round(WINDOW_WIDTH*4/5/108)-1;

??? MARGIN_TOP=Math.round(WINDOW_HEIGHT/5);
??? var canvas = document.getElementById('canvas');
??? var cxt = canvas.getContext("2d");
??? canvas.width = WINDOW_WIDTH;
??? canvas.height = WINDOW_HEIGHT;

??? curShowTimeSeconds=getCurrentShowTimeSeconds();


??? setInterval(function(){
??????? render(cxt);
??????? update();

??? }, 50);
}

function update(){

??? var nextShowTimeSeconds=getCurrentShowTimeSeconds();

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

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

??? 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(nextseconds%10) );
??????? }
??????? curShowTimeSeconds=nextShowTimeSeconds;
??? }

??? updateBalls();
??? console.log(balls.length);

}

function updateBalls(){
??? for(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;
??????? }
??????? //右邊緣碰撞返回

???????? if(balls[i].x>=1050-RADIUS){
??????????? balls[i].x=1050-RADIUS;
??????????? balls[i].vx=-balls[i].vx;
??????? }


??? }
??? var cnt=0;//存放畫布中的小球
??? for(var i=0;i<balls.length;i++){
??????? if(balls[i].x+RADIUS>0&&balls[i].x-RADIUS<WINDOW_WIDTH){
??????????? //小球右邊緣大于0左邊緣小于寬
??????????? balls[cnt++]=balls[i];//把符合要求的小球放到前面
?????????? ?
??????? }
??? }
??? while(balls.length>Math.min(550,cnt)){
??????? balls.pop();//刪除最后一個小球
??????? //math.min()解決小球離開頁面堆積問題
??? }
}
function addBalls(x,y,num){
??? for (i=0;i<digit[num].length;i++){
??????? for(j=0;j<digit[num][i].length;j++){
??????????? if(digit[num][i][j]==1){
??????????????? var aBalls={
??????????????????? x:x+j*2*(RADIUS+1)+(RADIUS+1),
??????????????????? y:y+i*2*(RADIUS+1)+(RADIUS+1),
??????????????????? g:1.5+Math.random(),//速度在0-1.5
??????????????????? vx:Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4,//-4或4
??????????????????? vy:-5,//有一個向上
??????????????????? color: colors[ Math.floor( Math.random()*colors.length ) ]//向下取整
??????????????? }
??????????????? balls.push(aBalls);
??????????? }
??????? }
??? }
}
function getCurrentShowTimeSeconds(){
??? var curTime=new Date();
??? var ret=endTime.getTime()-curTime.getTime();
??? ret=Math.round(ret/1000);//四舍五入，轉(zhuǎn)成秒
??? return ret>=0?ret:0;
}

function render(cxt) {
??? cxt.clearRect(0, 0,WINDOW_WIDTH, WINDOW_HEIGHT);

??? var hours = parseInt(curShowTimeSeconds/3600);
??? var minutes = parseInt((curShowTimeSeconds-hours*3600)/60);
??? var seconds =curShowTimeSeconds%60;
??? renderDigit(MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt);
??? renderDigit(MARGIN_LEFT+15*(RADIUS + 1), MARGIN_TOP , parseInt(hours%10) , cxt);
??? renderDigit( MARGIN_LEFT + 30*(RADIUS + 1) , MARGIN_TOP , 10 , cxt );
??? renderDigit( MARGIN_LEFT + 39*(RADIUS + 1) , MARGIN_TOP ,parseInt(minutes/10), cxt );
??? renderDigit( MARGIN_LEFT + 54*(RADIUS + 1) , MARGIN_TOP ,parseInt(minutes%10), cxt );
??? renderDigit( MARGIN_LEFT + 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt);
??? renderDigit( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(seconds/10) , cxt);
??? renderDigit( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(seconds%10) , cxt);

??? //小球繪制
??? for( var i = 0 ; i < balls.length ; i ++ ){
??????? cxt.fillStyle=balls[i].color;

??????? cxt.beginPath();
??????? cxt.arc( balls[i].x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );
??????? cxt.closePath();

??????? cxt.fill();
??? }

}

function renderDigit(x, y, num, cxt) {
??? cxt.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) {
??????????????? cxt.beginPath();
??????????????? cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
??????????????? cxt.closePath();
??????????????? cxt.fill();
??????????? }
??????? }
??? }
}