为了账号安全,请及时绑定邮箱和手机立即绑定

小球比绘制的小球快1s,求各位帮忙解答。谢谢啦。

小球比绘制的小球快1s,求各位帮忙解答。谢谢啦。

123号 2017-03-12 16:55:39
//逻辑var WINDOW_WIDTH = 1024;var WINDOW_HEIGHT = 768;var RADIUS = 8; //半径var MARGIN_TOP = 60;var MARGIN_LEFT = 30;//一天24个小时,小时是两位数。100%24=5最多设置4天。//月份如果想是4月,就必须要传3月。const endTime=new Date(2017,2,13,20,47,52);var curShowTimeSeconds=0;var balls=[];//给生成的小球设置一个可以存放的数组。//给小球设置颜色。const colors = ["#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(    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+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));    }    if(parseInt(curSeconds%10)!=parseInt(nextSeconds%10)){    addBalls(MARGIN_LEFT+93*(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){//对于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,//-1的多少次方。乘以4得到-4或者4。        vy:-5,        //随机索引方法。        color:colors[Math.floor(Math.random()*colors.length)]        }        balls.push(aBall);//把这些小球放入到balls这个数组中去。       }}//绘制时钟。绘制小球。function render( cxt ){ cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);//对整个屏幕进行刷新。     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++){ 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();            }}
查看完整描述

目前暂无任何回答

  • 0 回答
  • 0 关注
  • 1073 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信