JavaScript：用原生js实现重力条件下，可拖拽小球的碰撞运动

本次用原生js，在小球的碰撞运动上添加了重力效应。并且可以拖拽小球，拖拽的方向和力度大小，决定了小球的初始速度和运动方向

蛮有趣的，大家可以拷贝代码试一试。代码也附带了一些小注释。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript运动</title>
    <style>
        div{
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: #b25f27;
            border-radius: 50%;
        }
        span{
            width: 16px;
            height: 16px;
            background: black;
            position: absolute;
        }
    </style>
</head>
<body>
<div></div>
<script>
var oDiv = document.getElementsByTagName("div")[0];
//小球左上方的坐标值
var lastX = oDiv.offsetLeft,
    lastY = oDiv.offsetTop;

//拖拽小球的函数
oDiv.onmousedown = function (e) {
    clearInterval(this.timer);
    var event = e || window.event;
    //disX/Y获取的是鼠标点击小球的位置
    var disX = event.clientX - this.offsetLeft;
    var disY = event.clientY - this.offsetTop;
    //获取oDiv对象
    var that = this;
    var iSpeedX = 0;
    var iSpeedY = 0;
    document.onmousemove = function(e){
        var newLeft = e.clientX - disX;
        var newTop = e.clientY - disY;
        //由拖动的距离、方向，决定小球的初始速度和方向
        iSpeedX = newLeft - lastX;
        iSpeedY = newTop - lastY;
        lastX = newLeft;
        lastY = newTop;
        that.style.left = newLeft + "px";
        that.style.top = newTop + "px";
    };
    //松开鼠标时，将前两个事件置空
    document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
        //运行小球运动函数
        startMove(that,iSpeedX,iSpeedY);
    }

};

//小球碰撞运动函数
function startMove(obj,iSpeedX,iSpeedY) {
    clearInterval(obj.timer);
    //在Y方向上，给一个重力
    var g= 5;
    obj.timer = setInterval(function () {
        //在Y方向上通过g不断加速
        iSpeedY += g;
        var newLeft = obj.offsetLeft + iSpeedX;
        var newTop = obj.offsetTop + iSpeedY;
        if (newTop >= document.documentElement.clientHeight - obj.offsetHeight){
            iSpeedY *= -1;
            iSpeedY *= 0.8;
            iSpeedX *= 0.96;
            newTop = document.documentElement.clientHeight - obj.offsetHeight;
        }
        if (newTop <= 0){
            iSpeedY *= -1;
            newTop = 0;
            iSpeedY *= 0.8;
            iSpeedX *= 0.97;
        }
        if (newLeft >= document.documentElement.clientWidth - obj.offsetWidth){
            iSpeedX *= -1;
            iSpeedY *= 0.8;
            iSpeedX *= 0.97;
            newLeft = document.documentElement.clientWidth - obj.offsetWidth;
        }
        if (newLeft <= 0){
            iSpeedX *= -1;
            newLeft = 0;
            iSpeedY *= 0.8;
            iSpeedX *= 0.96;
        }
        if (Math.abs(iSpeedX) < 1){
            iSpeedX = 0;
        }
        if (Math.abs(iSpeedY) < 1){
            iSpeedY = 0;
        }
        if(iSpeedX == 0 && iSpeedY == 0 && newTop == document.documentElement.clientHeight - obj.clientHeight){
            clearInterval(obj.timer);
        }
        obj.style.left = newLeft + "px";
        obj.style.top = newTop + "px";
    },30)
}
</script>
</body>
</html>

JavaScript：用原生js实现重力条件下，可拖拽小球的碰撞运动

猜你喜欢