小球跳动的问题-慕课网

首页课程实战体系课手记专栏慕课教程

小球跳动的问题

来源：4-2 使用canvas做个物理实验

小杰杂货店

2018-06-05 14:16

怎么实现多个小球的跳动啊

写回答关注

3回答

小杰杂货店: 2018-06-06 10:15:13

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

0 0

小杰杂货店: 2018-06-06 10:13:29

<!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 0

逻辑左移: 2018-06-06 09:32:09

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

 //小球的基本运动    
 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

炫丽的倒计时效果Canvas绘图与动画基础

学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力

96746 学习 · 1000 问题

查看课程

相似问题

多个小球跳动的问题。

回答 1

小球在前面跳。。。。

回答 1

华丽的小球滚动效果问题

回答 2

如何让小球不跳

回答 4

关于小球无限弹跳

回答 5

打开慕课网App查看更多内容