猿问

做不出来小球,求解

var WINDOW_WIDTH =1024;
var WINDOW_HEIGHT=768;
var RADIUS=8;
var MARGIN_LEFT=30;
var MARGIN_TOP=60;

const endTime=new Date(2016,6,13,18,00,00);
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;
//    定义函数render
    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 nextSecond=nextShowTimeSeconds%60;

    var curHours=parseInt(curShowTimeSeconds/3600);
    var curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);
    var curSecond=curShowTimeSeconds%60;

    if(nextSecond != curSecond){
       if(parseInt(curHours/10)!= parseInt(nextHours/10)){
            addBalls(MARGIN_LEFT,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(curSecond/10)!= parseInt(nextSecond/10)){
            addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSecond/10));
        }
        if(parseInt(curSecond%10)!= parseInt(nextSecond%10)){
            addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(nextSecond%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),
                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 minutes=parseInt((curShowTimeSeconds-hours*3600)/60);
        var second=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(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();
            }
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<canvas id="canvas" style="display: block; margin:50px auto;"></canvas>

<script src="digit.js"></script>
<script src="countdown.js"></script>
</body>
</html>

北京以南
浏览 1658回答 3
3回答

ChinaCJM

把html的代码也贴出来看看
随时随地看视频慕课网APP
我要回答