时钟是显示了，为什么没有小球弹跳出来？
//固定化的写法
//var WINDOW_WIDTH = 1024;
//var WINDOW_HEIGHT = 768;
//var RADIUS = 8;
//var MARGIN_LEFT=30;
//var MARGIN_TOP = 60;
//从指定的时间倒计时到现在
//const endTime = new Date(2018,5,13,16,47,52);//js中月是0-11
//可以倒计时一个小时
//var endTime = new Date();
//endTime.setTime(endTime.getTime() + 3600 * 1000);
//var curShowTimeSeconds = 0;
var balls = [];
const color = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"];
window.onload = function () {
//屏幕的自适应
WINDOW_WIDTH = document.body.clientWidth;
WINDOW_HEIGHT = document.body.clientHeight;
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 context = canvas.getContext("2d");
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
curShowTimeSeconds = getCurrentShowTimeSeconds()
//setInterval制作动画的一个简单架构
//两个参数，一个是匿名函数，一个是时间，每隔多少毫秒执行一次这个函数
setInterval(
function(){
render(context);//绘制当前画面
update();//调整
}
,
50
);
}
function getCurrentShowTimeSeconds() {
var curTime = new Date();//当前的时间
var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();
return ret;
//var ret = endTime.getTime() - curTime.getTime();//毫秒数
//ret = Math.round(ret / 1000)//转换为秒
// return ret >= 0 ? ret : 0;//倒计时到0显示0
}
//处理时间的变化
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(curMinutes / 10))
{
addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours / 10));
}
if (parseInt(curMinutes % 10) != parseInt(curMinutes % 10))
{
addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours % 10));
}
if (parseInt(curSeconds / 10) != parseInt(curSeconds / 10))
{
addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours / 10));
}
if (parseInt(curSeconds % 10) != parseInt(curSeconds % 10))
{
addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours %10));
}
curShowTimeSeconds = nextShowTimeSeconds;
}
updateBalls();//对已经存在的小球进行更新
console.log(balls.length);//界面在调试时会显示小球数组的个数
}
//更新小球的状态：小球的基本运动
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;
}
}
//性能优化：判断一个小球是否在画面内
var cnt = 0;//代表留在画布中的小球数量
for (var i = 0; i < balls.length;i++)
{
//小球的右边大于0加上小球的左边小于屏幕的宽就证明小球还在屏幕里
if (balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH)
{
//如果小球在屏幕里 就把这个小球覆盖数组中小球
balls[cnt++]=ball[i]
}
//while (ball.length > cnt)
//{
// balls.pop();//把cnt及以后的小球删除掉
//}
//表示如果cnt小于300则balls.length就取cnt，否则就取300,,是为了保证计算机的性能
while (balls.length > Math.min(300, cnt)) {
balls.pop();
}
}
}
//添加小球
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),
g: 1.5 + Math.random(),
vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
vy: -5,
color:colors[Math.floor(Math.random()*color.length)]
}
//push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度
balls.push(aBall);
}
}
}
}
//显示时分秒
function render(cxt) {
//clearRect对矩形空间内的图像进行一个刷新操作
//参数分别为：矩形空间左上角的x坐标左上角的y坐标,要清除的矩形的宽度（以像素计），要清除的矩形的高度（以像素计）
cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
//当前日期距离截止日期有多少小时、多少分钟、多少秒，目前小时最大位数为 2个，最多倒计时4天
// var hours = 12
//var minutes = 34
//var seconds = 56
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++) {
alert("111")
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();
}
}
这个没改
