作者做了画布底部的碰撞检测，当小球的坐标达到画布底部时，则会让小球上下方向速度值变为负数，即出现短暂的弹起效果。

最后老师优化了这块的逻辑。 当小球跳出canvas宽度的时候。这个小球就不会被绘制了。 所以也就等于消失了。 不占用内存了。

看一下你的WINDOW_WIDTH和WINDOW_HEIGHT是否有值

经过校对后,有问题的部分都注释起来了
1.

2.

不好意思没有往后面看。。。

时间要在四天之内

是是是

改变时间

为了跟小球的动画配合，定时器的时间间隔是50毫秒，并不是1秒，所以多数情况下还是相等的

定义变量为cxt，然后用ctx去画？

x和y的作用是定位这个坐标轴的位置

j*2*(RADIUS+1)+(RADIUS+1)是确立在X轴上的线长度

i*2*(RADIUS+1)+(RADIUS+1)是确立在Y轴上的线长度

这个没改

第一个地方：WINDOW_HEIGHT_RADIUS这个变量是不是写错了，应该是WINDOW_HEIGHT

第二个地方(可能)：截止时间的小时数目最好距离现在100小时之内（课程例子还可以改进）

第三个地方（优化）：防止页面小球只增不减，需要对不在画布中的小球进行移除

addballs中只是对balls数组内部进行添加小球元素，绘制动作是跟绘制时间一起的，通过循环balls数组进行绘制，

判断何时用context，只需要判断是否需要刷新屏幕内显示动画就好了，比如说绘制时间，绘制小球滚动，这是必须要用context的。

这个地方有错误 要把balls.push(aBAll);写入if条件语句里

if (digit[num][i][j] == 1) {

                    color: colors[Math.floor(Math.random() * colors.length)]

                }

              balls.push(aBAll);  写这里才是对的

            }

            balls.push(aBAll);你的在条件语句外面

        }

这里最后有个小错误，你写得是 parseInt(nextSeconds% 10)

if (parseInt(nextSeconds % 10) != parseInt(curSeconds % 10)) {

            addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds % 10));

这里确实是应该是parseInt(curhours%10)，只是时间函数太快，彩色小球又是运动的，所以不注意是看不出来的

首先记得把你的代码发上来，其次根据你说的情况我个人分析有可能是你在updateBalls函数中变量名写错，最终才有这个效果的。

解决了，颜色没有加‘#’

因为是要看下一秒

每次画的小球并不是上次的小球而是更新后的

是因为小球下落到地上还要弹上去，给了个摩擦系数0.75，相当于损失了一部分能量

webstorm好像

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] == 1){   //应该是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()*colors.length)]

};

balls.push(aBall);

}

}

如上图

updateballs写的有问题，balls[i].x += balls[i].vx;你的是{ ball.x+=ball.vx;}，主要是这个问题，其它你可以自己解决了

把countdown.js里面时间改一下，可能是设置的时间跟你当前时间距离太远，时间应该是在你当前时间之后才有倒计时

谢谢，明白了