js碰撞

两个div从不同方向、用不等的速度移动。

html：

<div id="box1" style="width: 100px;height: 100px;background: darkolivegreen;position: absolute;left: 50px;"></div>
<div id="box2" style="width: 100px;height: 100px;background: seagreen;position: absolute;left: 800px;top: 150px;"></div>

 

javascript：

 var lastTime = Date.now();
    var boxSpeed1 = 100;
    var boxSpeed2 = 150;
    var box1 = document.getElementById(\'box1\');
    var box2 = document.getElementById(\'box2\');

    function main(){
        var nowTime = Date.now();
        var dt = (nowTime - lastTime) / 1000;
        box1.style.left = parseInt(box1.style.left) + boxSpeed1 * dt + \'px\';
        box2.style.left = parseInt(box2.style.left) - boxSpeed2 * dt + \'px\';
        lastTime = nowTime;
        setTimeout(main,1000/60);
    }
    main();

两个div从不同方向、用不等的速度移动，判断两个div碰撞，这经常用在游戏敌机与本机碰撞爆咋或者子弹打到敌机爆炸。

　html:

<div id="box1" style="width: 100px;height: 100px;background: darkolivegreen;position: absolute;left: 50px;"></div>
<div id="box2" style="width: 100px;height: 100px;background: seagreen;position: absolute;left: 800px;"></div>

javascript：

 var lastTime = Date.now();
    var boxSpeed1 = 100;   //从左边走的div速度
    var boxSpeed2 = 150;   //从右边走的div速度
    var box1 = document.getElementById(\'box1\');
    var box2 = document.getElementById(\'box2\');

    function main(){
        var nowTime = Date.now();
        var dt = (nowTime - lastTime) / 1000;

        var recA = getDemosion(box1);
        var recB = getDemosion(box2);

        var flag =  cili(recA,recB);
        if(flag){
            alert(\'爆炸\');
            return;
        }
        else{
            box1.style.left = parseInt(box1.style.left) + boxSpeed1 * dt + \'px\';
            box2.style.left = parseInt(box2.style.left) - boxSpeed2 * dt + \'px\';
        }
        lastTime = nowTime;
        setTimeout(main,1000/60);
    }
    main();



    function getDemosion(element){
        return {
            x:element.offsetLeft,
            y:element.offsetTop,

            width:element.offsetWidth,
            height:element.offsetHeight
        }
    }

    function cili(rectA,rectB){
        return !(
                rectA.x + rectA.width < rectB.x  ||
                rectB.x + rectB.width < rectB.x  ||
                rectA.y + rectA.height < rectA.y ||
                rectB.y + rectB.height < rectB.y
                )

    }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　

版权声明：本文为5huihui原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/5huihui/p/4122132.html