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

正在回答

3 回答

怎么实现多个小球随机跳动,不要有倒计时的效果。请看一下还差了什么。


0 回复 有任何疑惑可以回复我~
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
 var RADIUS=4;
 var balls=[]
    window.onload=function()
        {
            var canvas = document.getElementById('canvas');
 canvas.width = 1024;
 canvas.height = 500;
 var context = canvas.getContext("2d");
 setInterval(
                function () {
                    render(context);
 update();
 }
                ,
 50
 );
 }


    function update(){

        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 >= canvas.width-RADIUS ){
                balls[i].y = canvas.height-RADIUS;
 balls[i].vy = - balls[i].vy*0.75;
 }
        }
    }
    function render(cxt){
        cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height)
        for( var i = 0 ; i < balls.length ; i ++ ){
            cxt.fillStyle="#ff3";

 cxt.beginPath();
 cxt.arc( balls[i].x , balls[i].y , RADIUS , 0 , 2*Math.PI , true );
 cxt.closePath();

 cxt.fill();
 }
    }
</script>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
 <!--当前浏览器不支持Canvas,请更换浏览器后再试-->
</canvas>

</body>
</html>


0 回复 有任何疑惑可以回复我~

把每个小球当成一个对象放到数组里,遍历数组实现每个小球的动画。

 //小球的基本运动    
 updataBalls : function(){        
          var _this = this;        
          var balls = _this.data.balls;        
          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;           
             }       
          }   
        }


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

小球跳动的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信