描述的清楚嗎?

彩色小球一閃就沒(méi)了 ,沒(méi)有運(yùn)動(dòng) , ?時(shí)間在變, 變一次閃過(guò)一次小球. 代碼如下.

/**
?*?Created?by?WILL?on?15/3/13.
?*/
var?WINDOW_WIDTH?=?1024;
var?WINDOW_HEIGHT?=?768;
var?RADIUS?=?8;
var?MARGIN_TOP?=?60;
var?MARGIN_LEFT?=?30;
var?pi?=?Math.PI;
const?endTime?=?new?Date(2015,2,18,18,47,52);
var?curShowTimeSeconds?=?0;
var?balls?=?[];

const?colors?=?["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
window.onload?=?function?(){
????var?canvas?=?document.getElementById('canvas');
????canvas.width?=?WINDOW_WIDTH;
????canvas.height?=?WINDOW_HEIGHT;
????var?context?=?canvas.getContext('2d');
????curShowTimeSeconds?=?getCurrentShowTimeSecond();
????setInterval(function(){
????????render(context);
????????update();
????},
????????50
????);
};
function?update(){
????var?nextShowTimeSeconds?=?getCurrentShowTimeSecond();
????var?nextHours?=?parseInt(nextShowTimeSeconds/3600),
????????nextMinutes?=?parseInt((nextShowTimeSeconds-nextHours*3600)/60),
????????nextSeconds?=?nextShowTimeSeconds%60;
????var?hours?=?parseInt(curShowTimeSeconds/3600),
????????minutes?=?parseInt((curShowTimeSeconds-hours*3600)/60),
????????seconds?=?curShowTimeSeconds%60;
????if(nextSeconds?!=?seconds){
????????if(?parseInt(hours/10)?!=?parseInt(nextHours/10)?){
????????????addBalls(?MARGIN_LEFT?+?0?,?MARGIN_TOP?,?parseInt(hours/10)?);
????????}
????????if(?parseInt(hours%10)?!=?parseInt(nextHours%10)?){
????????????addBalls(?MARGIN_LEFT?+?15*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(hours/10)?);
????????}
????????if(?parseInt(minutes/10)?!=?parseInt(nextMinutes/10)?){
????????????addBalls(?MARGIN_LEFT?+?39*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(minutes/10)?);
????????}
????????if(?parseInt(minutes%10)?!=?parseInt(nextMinutes%10)?){
????????????addBalls(?MARGIN_LEFT?+?54*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(minutes%10)?);
????????}
????????if(?parseInt(seconds/10)?!=?parseInt(nextSeconds/10)?){
????????????addBalls(?MARGIN_LEFT?+?78*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(seconds/10)?);
????????}
????????if(?parseInt(seconds%10)?!=?parseInt(nextSeconds%10)?){
????????????addBalls(?MARGIN_LEFT?+?93*(RADIUS+1)?,?MARGIN_TOP?,?parseInt(nextSeconds%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+j*2*(RADIUS?+1)+(RADIUS+1),
????????????????????y:y+i*2*(RADIUS?+1)+(RADIUS+1),
????????????????????r: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?getCurrentShowTimeSecond(){
????var?curTime?=?new?Date();
????var?ret?=?endTime.getTime()-curTime.getTime();
????ret?=?Math.round(ret/1000);
????return?ret>=0???ret?:?0;
}
function?render(c){
????c.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
????var?hours?=?parseInt(curShowTimeSeconds/3600),
????????minutes?=?parseInt((curShowTimeSeconds-hours*3600)/60),
????????seconds?=?curShowTimeSeconds%60;
????renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),c);
????renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),c);
????renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,c);
????renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),c);
????renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),c);
????renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,c);
????renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),c);
????renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),c);

????for(?var?i?=?0?;?i?<?balls.length?;?i?++?){
????????c.fillStyle=balls[i].color;
????????c.beginPath();
????????c.arc(?balls[i].x?,?balls[i].y?,?RADIUS?,?0?,?2*Math.PI?,?true?);
????????c.closePath();
????????c.fill();
????}
}
function?renderDigit(x,y,num,c){
????c.fillStyle?=?"rgb(0,102,153)";
//????c.fillStyle?=?"red";
????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){
????????????????c.beginPath();
????????????????c.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*pi);
????????????????c.closePath();
????????????????c.fill();
????????????}
????????}
????}
}