• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5模拟平抛运动(模拟小球平抛运动过程)

    物体以一定的初速度沿水平方向抛出,如果物体仅受重力作用,这样的运动叫做平抛运动。平抛运动可看作水平方向的匀速直线运动以及竖直方向的自由落体运动的合运动。平抛运动的物体,由于所受的合外力为恒力,所以平抛运动是匀变速曲线运动,平抛物体的运动轨迹为一抛物线。平抛运动是曲线运动 平抛运动的时间仅与抛出点的竖直高度有关;物体落地的水平位移与时间(竖直高度)及水平初速度有关。


    复制代码
    代码如下:

    <html>
    <head>
    <meta charset=utf-8>
    <title>html5炮弹</title>
    <script>
    //box
    var box_x=0;
    var box_y=0;
    var box_width=300;
    var box_height=300;
    //ball
    var ball_x=10;
    var ball_y=10;
    var ball_radius=10;
    var ball_vx=10;
    var ball_vy=0;
    //constant
    var g=10;//note
    var rate=0.9;
    //bound
    var bound_left=box_x+ball_radius;
    var bound_right=box_x+box_width-ball_radius;
    var bound_top=box_y+ball_radius;
    var bound_bottom=box_y+box_height-ball_radius;
    //context
    var ctx;
    function init()
    {
    ctx=document.getElementById('canvas').getContext('2d');
    ctx.lineWidth=ball_radius;
    ctx.fillStyle="rgb(200,0,50)";
    move_ball();
    setInterval(move_ball,100);
    }
    function move_ball()
    {
    ctx.clearRect(box_x,box_y,box_width,box_height);
    move_and_check();
    ctx.beginPath();
    ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true);
    ctx.fill();
    ctx.strokeRect(box_x,box_y,box_width,box_height);
    }
    function move_and_check()
    {
    var cur_ball_x=ball_x+ball_vx;
    var temp=ball_vy;
    ball_vy=ball_vy+g;
    var cur_ball_y=ball_y+ball_vy+g/2;
    if(cur_ball_x<bound_left)
    {
    cur_ball_x=bound_left;
    ball_vx=-ball_vx*0.9;
    ball_vy=ball_vy*0.9;
    }
    if(cur_ball_x>bound_right)
    {
    cur_ball_x=bound_right;
    ball_vx=-ball_vx*0.9;
    ball_vy=ball_vy*0.9;
    }
    if(cur_ball_y<bound_top)
    {
    cur_ball_y=bound_top;
    ball_vy=-ball_vy*0.9;
    ball_vx=ball_vx*0.9;
    }
    if(cur_ball_y>bound_bottom)
    {
    cur_ball_y=bound_bottom;
    ball_vy=-ball_vy*0.9;
    ball_vx=ball_vx*0.9;
    }
    ball_x=cur_ball_x;
    ball_y=cur_ball_y;
    }
    </script>
    </head>
    <body onLoad="init()">
    <canvas id="canvas" width="400" height="400"/>
    </body>
    </html>

    html5模拟小球平抛运动过程。
    上一篇:html5记忆翻牌游戏实现思路及代码
    下一篇:html5文字阴影效果text-shadow使用示例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    html5模拟平抛运动(模拟小球平抛运动过程) html5,模拟,平抛,运动,小球,