Html5---疯狂的大炮

本文详细介绍了如何使用Canvas实现平抛运动,并通过模拟大炮发射炮弹来展示动态效果。平抛运动被分解为水平匀速直线运动和垂直自由落体运动的组合,而大炮模拟则通过生成随机炮弹并追踪它们的轨迹来实现视觉冲击力强的动画效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  水平抛出的物体的运动是平抛运动,与水平有一定仰角抛出的物体的运动是斜抛运动,这两种运动都是曲线运动,统称抛物运动。

  平抛运动:

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

 如何使用Canvas实现平抛运动呢?

  第一步:首先需要两个小球,一个小球的速度为(x:0,y:0),另一个小球的速度为(x:400,y;0):

 

  var balls = [];
        balls.length = 0;
        var ball1 = {
            x: 70,
            y: 50,
            r: 10,
            vx: 400,
            vy: 0
        };
        var ball2 = {
            x: 50,
            y: 50,
            r: 10,
            vx: 0,
            vy: 0
        };
        balls.push(ball1);
        balls.push(ball2);



  第二步:利用Jscex循环,让小球运动起来

    <canvas id="myCanvas" width="600" height="500">
你的浏览器不支持canvas
</canvas>
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        var balls = [];
        balls.length = 0;
        var ball1 = {
            x: 70,
            y: 50,
            r: 10,
            vx: 400,
            vy: 0
        };
        var ball2 = {
            x: 50,
            y: 50,
            r: 10,
            vx: 0,
            vy: 0
        };
        balls.push(ball1);
        balls.push(ball2);
        var cyc = 110;
        var a = 80;
        cxt.fillStyle = "#030303";
        cxt.fillRect(0, 0, c.width, c.height);
        var moveAsync = eval(Jscex.compile("async", function () {
            while (true) {
                cxt.fillStyle = "rgba(0,0,0,.3)";
                cxt.fillRect(0, 0, c.width, c.height);
                cxt.fillStyle = "#fff";
                for (var i in balls) {
                    cxt.beginPath();
                    cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                    balls[i].y += balls[i].vy * cyc / 1000;
                    balls[i].x += balls[i].vx * cyc / 1000;
                    if (balls[i].r + balls[i].y >= c.height) {
                        if (balls[i].vy > 0) {
                           // balls[i].vy *= -0.7;
                        }
                    } else {
                        balls[i].vy += a;
                    }
                }
                $await(Jscex.Async.sleep(cyc));
            }
        }));
        moveAsync().start();
    </script>


其效果如下:

 

疯狂的大炮:

  第一步:需要一张大炮的图片,

   通过如下方式加载图片:

 var img = new Image();
        img.src = "../../Images/orderedList1.png";
        img.onload = function () {
            cxt.drawImage(img, 0, 325);
        }


第二步:模拟炮弹,在每次循环时生成一个炮弹:

 var ball = {
                    x: 185,
                    y: 470,
                    r: getRandomNumber(0, 20),
                    vx: getRandomNumber(190, 3000),
                    vy: getRandomNumber(-3000, 0)
                };
                balls.push(ball);
                if (balls.length > 100) {
                    balls.shift();
                }

当炮弹射出数量大于100时,从balls中移除一个小球,以防止浏览器堆栈溢出,其中getRandomNumber方法是自定义方法,可以获得一定范围内的随机数:

 function getRandomNumber(min, max) {
            return (min + Math.floor(Math.random() * (max - min + 1)))
        }


第三步,Jscex循环实现大炮的猛烈轰炸:

   var fireAsync = eval(Jscex.compile("async", function () {
            while (true) {
                var ball = {
                    x: 185,
                    y: 470,
                    r: getRandomNumber(0, 20),
                    vx: getRandomNumber(190, 3000),
                    vy: getRandomNumber(-3000, 0)
                };
                balls.push(ball);
                if (balls.length > 100) {
                    balls.shift();
                }
                cxt.fillStyle = "rgba(0,0,0,.3)";
                cxt.fillRect(0, 0, c.width, c.height);
                cxt.fillStyle = "#fff";
                cxt.drawImage(img, 0, 425);
                for (i in balls) {
                    cxt.beginPath();
                    cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
                    cxt.closePath();
                    cxt.fill();
                    balls[i].y += balls[i].vy * cyc / 1000;
                    balls[i].x += balls[i].vx * cyc / 1000;
                    if (balls[i].r + balls[i].y >= c.height) {
                        if (balls[i].vy > 0) {
                            balls[i].vy *= -0.7;
                        }
                    } else {
                        balls[i].vy += a;
                    }
                }
                $await(Jscex.Async.sleep(cyc));
            }
        }));
        fireAsync().start();


运行效果如下:


 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值