代碼是完全跟著老師打的，控制臺(tái)顯示超過(guò)3000個(gè)小球，感覺(jué)就是優(yōu)化失敗了，可是我找不出問(wèn)題所在。

代碼如下

var WINDOW_WIDTH = 1024;

var WINDOW_HEIGHT = 500;

var RADIUS = 8;

var MARGIN_TOP = 60;

var MARGIN_LEFT = 30;

const endTime = new Date(2017,10,5,21,12,12);

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");

var context = canvas.getContext("2d");

canvas.width = WINDOW_WIDTH;

canvas.height = WINDOW_HEIGHT;

curShowTimeSeconds = getCurrentShowTimeSeconds();

setInterval(

function(){

render(context);

update();

}

,

50

);

}

function getCurrentShowTimeSeconds(){

var curTime = new Date();

var ret = endTime.getTime() - curTime.getTime();

ret = Math.round(ret/1000);

return ret>=0?ret :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(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 + 79 * (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds / 10));

}

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

addBalls(MARGIN_LEFT + 94* (RADIUS + 1), MARGIN_TOP, parseInt(curSeconds % 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++){

if(balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH);

balls[cnt++] = balls[i];

}

while( balls.length > 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() * colors.length)]

}

balls.push(aBall);

}

}

}

function render(cxt){

cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);

var hours = parseInt(curShowTimeSeconds/3600);

var minute = parseInt((curShowTimeSeconds - hours*3600)/60);

var second = parseInt(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(minute/10),cxt);

renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minute%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)";

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();

}

}

}

}