首页 > 资讯 > JavaScript > 正文

JavaScript动画之碰撞运动（代码实例）

17-11-29 来源：[db:作者]

收藏我要投稿

碰撞运动

撞到目标点，速度反转

无重力的漂浮Div

速度反转

滚动条闪烁的问题

过界后直接拉回来

加入重力

反转速度的同时，减小速度

纵向碰撞，横向速度也减小

横向速度小数问题（负数）

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeedX=1000;
var iSpeedY=0;

function startMove()
{
    setInterval(function (){
        var oDiv=document.getElementById('div1');

        iSpeedY+=3;

        var l=oDiv.offsetLeft+iSpeedX;
        var t=oDiv.offsetTop+iSpeedY;

        if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
        {
            iSpeedY*=-0.8;
            iSpeedX*=0.8;
            t=document.documentElement.clientHeight-oDiv.offsetHeight;
        }
        else if(t<=0)
        {
            iSpeedY*=-1;
            iSpeedX*=0.8;
            t=0;
        }

        if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
        {
            iSpeedX*=-0.8;
            l=document.documentElement.clientWidth-oDiv.offsetWidth;
        }
        else if(l<=0)
        {
            iSpeedX*=-0.8;
            l=0;
        }

        if(Math.abs(iSpeedX)<1)
        {
            iSpeedX=0;
        }

        if(Math.abs(iSpeedY)<1)
        {
            iSpeedY=0;
        }

        oDiv.style.left=l+'px';
        oDiv.style.top=t+'px';

        document.title=iSpeedX;
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>
</html>

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
div {width:3px; height:3px; position:absolute; background:black;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');

    var lastX=0;
    var lastY=0;

    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;

        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;

        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;

            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;

            oDiv.style.left=l+'px';
            oDiv.style.top=t+'px';

            iSpeedX=l-lastX;
            iSpeedY=t-lastY;

            lastX=l;
            lastY=t;

            document.title='x:'+iSpeedX+', y:'+iSpeedY;
        };

        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;

            startMove();
        };

        clearInterval(timer);
    };
};

var timer=null;

var iSpeedX=0;
var iSpeedY=0;

function startMove()
{
    clearInterval(timer);

    timer=setInterval(function (){
        var oDiv=document.getElementById('div1');

        iSpeedY+=3;

        var l=oDiv.offsetLeft+iSpeedX;
        var t=oDiv.offsetTop+iSpeedY;

        if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
        {
            iSpeedY*=-0.8;
            iSpeedX*=0.8;
            t=document.documentElement.clientHeight-oDiv.offsetHeight;
        }
        else if(t<=0)
        {
            iSpeedY*=-1;
            iSpeedX*=0.8;
            t=0;
        }

        if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
        {
            iSpeedX*=-0.8;
            l=document.documentElement.clientWidth-oDiv.offsetWidth;
        }
        else if(l<=0)
        {
            iSpeedX*=-0.8;
            l=0;
        }

        if(Math.abs(iSpeedX)<1)
        {
            iSpeedX=0;
        }

        if(Math.abs(iSpeedY)<1)
        {
            iSpeedY=0;
        }

        if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
        {
            clearInterval(timer);
            alert('停止');
        }
        else
        {
            oDiv.style.left=l+'px';
            oDiv.style.top=t+'px';
        }

        document.title=iSpeedX;
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>
</html>

这里写图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeedX=6;
var iSpeedY=8;

function startMove()
{
    setInterval(function (){
        var oDiv=document.getElementById('div1');
        var l=oDiv.offsetLeft+iSpeedX;
        var t=oDiv.offsetTop+iSpeedY;

        if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
        {
            iSpeedY*=-1;
            t=document.documentElement.clientHeight-oDiv.offsetHeight;
        }
        else if(t<=0)
        {
            iSpeedY*=-1;
            t=0;
        }

        if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
        {
            iSpeedX*=-1;
            l=document.documentElement.clientWidth-oDiv.offsetWidth;
        }
        else if(l<=0)
        {
            iSpeedX*=-1;
            l=0;
        }

        oDiv.style.left=l+'px';
        oDiv.style.top=t+'px';
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>
</html>

点击复制链接与好友分享!回本站首页