const WINDOW_WIDTH = 1100;
const WINDOW_HEIGHT = 900;
const RADIUS = 6;
const TOP = 60;
const LEFT = 60;
var endTime = new Date(2015,8,22,0,0,0);
var cutTimeSeconds = 0;
var balls = [];
var colors = ["#33b5e5","#0099cc","#aa66cc","#9933cc","#99cc00","#669900","#ff8800","#ff4444","#cc0000","ffbb33"];
/****************************************************************************************************window.onload*/
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
cutTimeSeconds = getCutTimeSeconds();
setInterval(function(){ render(context); update();}, 1000/60);
};
/****************************************************************************************************getCutTimeSeconds()*/
function getCutTimeSeconds(){
var nowTime = new Date();
var ret = endTime.getTime() - nowTime.getTime();
ret = Math.round(ret/1000);
return ret >= 0 ? ret : 0;
};
/**************************************************************************************************************update()*/
function update(){
var nextTimeSeconds = getCutTimeSeconds();
// 下一秒需要变化的时间
var nextHours = parseInt(nextTimeSeconds / 3600);
var nextMinutes = parseInt((nextTimeSeconds - nextHours*3600) / 60);
var nextSeconds = parseInt(nextTimeSeconds%60);
var cutHours = parseInt(cutTimeSeconds / 3600);
var cutMinutes = parseInt((cutTimeSeconds - cutHours*3600) / 60);
var cutSeconds = parseInt(cutTimeSeconds%60);
if (nextSeconds != cutSeconds)
{
if (parseInt(cutHours/10) != parseInt(nextHours/10))
{
addBall(LEFT , TOP , parseInt(cutHours/10));
};
if (parseInt(cutHours%10) != parseInt(nextHours%10))
{
addBall(LEFT+15*(RADIUS+1) , TOP , parseInt(cutHours%10));
};
if (parseInt(cutMinutes/10) != parseInt(nextMinutes/10))
{
addBall(LEFT+40*(RADIUS+1) , TOP , parseInt(cutMinutes/10));
};
if (parseInt(cutMinutes%10) != parseInt(nextMinutes%10))
{
addBall(LEFT+55*(RADIUS+1) , TOP , parseInt(cutMinutes%10));
};
if (parseInt(cutSeconds/10) != parseInt(nextSeconds/10))
{
addBall(LEFT+80*(RADIUS+1) , TOP , parseInt(cutSeconds/10));
};
if (parseInt(cutSeconds%10) != parseInt(nextSeconds%10))
{
addBall(LEFT+95*(RADIUS+1) , TOP , parseInt(cutSeconds%10));
};
cutTimeSeconds = nextTimeSeconds;
}
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].a;
if (balls[i].y >= WINDOW_HEIGHT - RADIUS)
// 判断底部边缘的碰撞事件
{
balls[i].y = WINDOW_HEIGHT - RADIUS;
balls[i].vy = -balls[i].vy*0.75;
};
};
}
function addBall(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 ball = {
x:x+(RADIUS+1)+j*2*(RADIUS+1),
y:y+(RADIUS+1)+i*2*(RADIUS+1),
a:2+Math.random(),
vx:Math.pow(-1,Math.random()*10)*4,
vy:-5+Math.random(),
ballColor:colors[Math.floor(Math.random()*colors.length)]
}
balls.push(ball);// 将小球放入数组balls中
}
}
}
}
function render(cxt){
cxt.clearRect(0 , 0 , canvas.width , canvas.height );
// 每次调用时，清除canvas画布
var hours = parseInt(cutTimeSeconds / 3600);
var minutes = parseInt((cutTimeSeconds - hours*3600) / 60);
var seconds = parseInt(cutTimeSeconds%60);
renderDigit(LEFT , TOP , parseInt(hours/10) , cxt);
renderDigit(LEFT+15*(RADIUS+1) , TOP , parseInt(hours%10) , cxt);
renderDigit(LEFT+30*(RADIUS+1) , TOP , 10 , cxt);
renderDigit(LEFT+40*(RADIUS+1) , TOP , parseInt(minutes/10) , cxt);
renderDigit(LEFT+55*(RADIUS+1) , TOP , parseInt(minutes%10) , cxt);
renderDigit(LEFT+70*(RADIUS+1) , TOP , 10 , cxt);
// 绘制时钟冒号
renderDigit(LEFT+80*(RADIUS+1) , TOP , parseInt(seconds/10) , cxt);
renderDigit(LEFT+95*(RADIUS+1) , TOP , parseInt(seconds%10) , cxt);
for (var i = 0; i < balls.length; i++) {
cxt.fillStyle = balls[i].ballColor;
cxt.beginPath();
cxt.arc(balls[i].x ,balls[i].y , RADIUS , 0 ,2*Math.PI);
cxt.closePath();
};
};
/********************************************************************************************renderDigit(x , y , num , cxt)*/
function renderDigit(x , y , num , cxt){
// 该函数用于绘制数字
cxt.fillStyle = 'rgb(0 , 102 , 153)';
// 设置绘图颜色
for (var n = 0 ; n<digit[num].length ; n++ )
// 遍历digit[num]数组；n：行
{
for (var m = 0 ; m<digit[num][n].length ; m++ )
// 再遍历digit[num][n]数组；m：列
{
if (digit[num][n][m] == 1)
{
cxt.beginPath();
cxt.arc(x+(RADIUS+1)+m*2*(RADIUS+1) , y+(RADIUS+1)+n*2*(RADIUS+1) , RADIUS , 0 , 2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
};
