/**
* 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; ?//初始化當前的毫秒數(shù)為零

? ?var balls=[]; //創(chuàng)建一個空數(shù)組名為balls的函數(shù)
? ?const colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];

? ?//創(chuàng)建畫布
? ?window.onload = function () {
? ? ? ?var canvas=document.getElementById("canvas");
? ? ? ?var context=canvas.getContext("2d");

? ? ? ?canvas.width=WINDOW_WIDTH;
? ? ? ?canvas.height=WINDOW_HEIGHT;

? ? ? ?curShowTimeSeconds=getCurrentShowTimeSeconds(); ?//獲取當前時間的毫秒數(shù)
? ? ? ?setInterval(
? ? ? ? ? ?function(){
? ? ? ? ? ? ? ?render(context);
? ? ? ? ? ? ? ?update();
? ? ? ? ? ?}
? ? ? ? ? ?,50);

? ?}
? ?//定義獲取當期時間的函數(shù)
? ?function getCurrentShowTimeSeconds(){
? ? ? ?var curTime=new Date();
? ? ? ?var ret=endTime.getTime()-curTime.getTime(); ?//獲取差值
? ? ? ?ret=Math.round(ret/1000); ?//毫秒數(shù)換成秒數(shù)

? ? ? ?return ret>=0?ret:0; ?//判斷差值是否為零
? ?}
? ?//更新時間
? ?function update(){
? ? ? ?var nextShowTimeSeconds=getCurrentShowTimeSeconds(); ?//獲取下一時刻的秒數(shù)
? ? ? ?//獲取下一時刻的時、分、秒
? ? ? ?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();
? ?}
? ?//創(chuàng)建updateBalls函數(shù)
? ?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;
? ? ? ? ? ?}
? ? ? ?}
? ?}
? ?//創(chuàng)建addBalls函數(shù)-增加小球
? ?function addBalls(x,y,num){
? ? ? ?//遍歷整個數(shù)組
? ? ? ?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){ ?//判斷數(shù)組中的位數(shù)數(shù)字是否為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);
? ? ? ?//對于時間分鐘秒數(shù)的位置繪制
? ? ? ?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)";
? ? ? ?//遍歷數(shù)組
? ? ? ?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){ ?//判斷小球處的位置上數(shù)字是否為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();
? ? ? ? ? ? ? ?}
? ?}