/**
* Created by Jack on 2016-11-11.
*/
   var WINDOW_WIDTH=1024;  //初始化画布的宽度
   var WINDOW_HEIGHT=640; //初始化画布的高度
   var RADIUS=8;  //初始化小球的半径
   var MARGIN_TOP=80; //画布距离上边距
   var MARGIN_LEFT=30;//画布距离左边距

   const endTime=new Date(2016,10,13,12,23,43); //获取当前的时间
   var curShowTimeSeconds=0;  //初始化当前的毫秒数为零

   var balls=[]; //创建一个空数组名为balls的函数
   const colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];

   //创建画布
   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 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=parseInt(nextShowTimeSeconds%60);
       //获取当前时刻的时、分、秒
       var curHours=parseInt(curShowTimeSeconds/3600);
       var curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);
       var curSeconds=parseInt(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(curSeconds%10));
           }
           curShowTimeSeconds=nextShowTimeSeconds;
       }
       updateBalls();
   }
   //创建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.5;
           }
       }
   }
   //创建addBalls函数-增加小球
   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){  //判断数组中的位数数字是否为1，为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:-5,
                       color:colors[Math.floor(Math.random()*colors.length)]
                   };
                   balls.push(aBall); //对于所有小球加值
               }
   }
   //绘制时间
   function render(cxt){
       var hours=parseInt(curShowTimeSeconds/3600);
       var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);
       var second=parseInt(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(second/10),cxt);
       renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(second%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){  //判断小球处的位置上数字是否为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();
               }
   }