javaScript 实现追击动画碰撞

最新推荐文章于 2024-07-19 12:58:53 发布

weixin_34051201

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量159

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/wxhhts/p/10590575.html

版权

原理就是用setTimeout 方法，很久之前写的代码了, 今天发现了，上传上来保存下。

效果是两个方块在一条直线上进行互相追击，速度快的碰撞到速度慢的就会减速，而被碰撞的就会加速。二者互相追击，碰撞。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #container {
        position: relative;
        margin: 120px auto;
        width: 800px;
        height: 40px;
        border: 1px solid red;
        box-sizing: border-box;
        color: #fff;
    }

    #box {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: #47acab;
        text-align: center;
        box-sizing: border-box;
    }

    #box2 {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: darkslateblue;
        text-align: center;
        box-sizing: border-box;
    }
</style>
<body>
<div id="container">
    <div id="box" style="left: 100px">box</div>

    <div id="box2" style="left: 180px">box2</div>
</div>
<script>
    (function () {
        var width = 800;
        var boxWidth = 40;
        var box = document.getElementById('box');
        var box2 = document.getElementById('box2');

        function play(step, time, div) {
            var obj = {};
            obj.step = step;
            obj.time = time;
            obj.box = div;
            obj.pos = 0;
            /* 因为是靠left增加来移动方格，所以加方格的一个宽度，防止方移动到末尾后超出一个身位置*/
            obj.go = function () {
                if (parseInt(obj.box.style.left) + boxWidth >= (width)) {
                    obj.box.style.left = obj.pos + 'px';
                }
                obj.box.style.left = parseInt(obj.box.style.left) + obj.step + 'px';
                setTimeout(obj.go, obj.time)
            }
            return obj;
        }

        function create() {
            var a = play(1, 20, box);
            var b = play(1, 2, box2);
            a.go();
            b.go();
            check();
            a_check()
            var b_count = 0;
            var a_count = 0;
            var fast = 2;

            function check() {
                if (Math.round(parseInt(b.box.style.left)) == Math.round(parseInt(a.box.style.left)) - boxWidth && a.time > b.time) {
                    b.time = b.time * 2;
                    a.time = a.time / 2;
                    a.box.style.left = parseInt(a.box.style.left) + fast + 'px';

                    console.log("b碰撞次数: " + ++b_count);
                }
                setTimeout(check, b.time);
            }

            function a_check() {
                if (Math.round(parseInt(a.box.style.left)) == Math.round(parseInt(b.box.style.left)) - boxWidth && b.time > a.time) {
                    a.time = a.time * 2;
                    b.time = b.time / 2;

                    b.box.style.left = parseInt(b.box.style.left) + parseInt(b.box.style.left) / 3 + 'px';
                    console.log("a碰撞次数: " + ++a_count + Math.round(parseInt(a.box.style.left)));

                }
                setTimeout(a_check, a.time);
            }
        }

        create();
    })()
</script>
</body>
</html>

您可以点击这里查看demo

转载于:https://www.cnblogs.com/wxhhts/p/10590575.html

weixin_34051201

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript 实现追击动画碰撞

原理就是用setTimeout 方法，很久之前写的代码了, 今天发现了，上传上来保存下。效果是两个方块在一条直线上进行互相追击，速度快的碰撞到速度慢的就会减速，而被碰撞的就会加速。二者互相追击，碰撞。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫