找回密码
当前位置：前端开发者 > JavaScript > 正文

前端原生js实现抛出小方块 匀速运动

2018-12-12 分类：JavaScript 阅读(905) 评论(0)
前端模块化开发认识
汽车前端开发模块化
web前端模块化开发

第81行，时间分段。
这其实是一个确定mouseup后方块移动方向及速度的方法，
计算方块最后的方向及速度， 只能取最后几秒的方块位移才能得出结果，所以就算做曲线运动也能把小方块抛出去，方块也能按正确的方向移动。

每次 msTimer%10 == 0 时，msTimer就归零 ，所以时间分为了很多10ms的时间段， 取在最后一个10ms过后，度过的时间，和位移，就能算出方块最终运动方向。

注：没有写还原函数，速度太快有可能扔丢失
html 代码

<!DOCTYPE html>
    <head>
        <title></title>
        <meta charset=”utf-8″ />
        <style type=”text/css”>
            body {
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div
            id=”test”
            style=”height: 50px;width: 50px;background:pink;position:absolute;top:40px;left:40px;”
        ></div>
        <script type=”text/javascript” src=”EventUtil.js”></script>
        <script>
            var EventUtil = {
                //添加事件处理函数
                addHandler: function(element, type, handler) {
                    if (element.addEventListener) {
                        element.addEventListener(type, handler, false)
                    } else if (element.attachEvent) {
                        element.attachEvent(‘on’ + type, handler)
                    } else {
                        element[‘on’ + type] = handler
                    }
                },
                //获取事件
                getEvent: function(event) {
                    return event ? event : window.event
                },
            }
            var test = document.getElementById(‘test’)
            var x0, y0, recentX, recentY, finalX, finalY, speedX, speedY
            var isDown = false
            var msTimer = 0 //毫秒计数
            var Timer, moveTimer //两个计时器
            var moveFlag = false //判断是否在运动
            EventUtil.addHandler(test, ‘mousedown’, function(event) {
                if (!moveFlag) {
                    isDown = true
                    //获取初始点击坐标
                    x0 = event.clientX
                    y0 = event.clientY
                    //用来计算速度的初始坐标
                    finalX = x0
                    finalY = y0
                    //上一次移动到末尾的坐标 用来使小方块移动
                    recentX = x0
                    recentY = y0
                    //开始计时
                    Timer = setInterval(function() {
                        msTimer++
                    }, 1)
                }
            })
            EventUtil.addHandler(document, ‘mousemove’, function(event) {
                //若鼠标属于按下状态执行
                if (isDown) {
                    event = EventUtil.getEvent(event)
                    //拖动小方块
                    test.style.top =
                        test.offsetTop + event.clientY – recentY + ‘px’
                    test.style.left =
                        test.offsetLeft + event.clientX – recentX + ‘px’
                    recentX = event.clientX
                    recentY = event.clientY
                    //时间分段
                    if (msTimer % 10 == 0) {
                        // console.log(‘ 1’+msTimer);
                        msTimer = 0
                        // console.log(‘ 2’ + msTimer);
                        finalX = event.clientX
                        finalY = event.clientY
                    }
                }
            })
            EventUtil.addHandler(document, ‘mouseup’, function(event) {
                if (!moveFlag) {
                    EventUtil.addHandler(document, ‘mousemove’, null)
                    isDown = false
                    var now = msTimer
                    speedX = (event.clientX – finalX) / now
                    speedY = (event.clientY – finalY) / now
                    autoMove(speedX, speedY)
                    clearInterval(Timer)
                    msTimer = 0
                }
                //在移动
                else {
                    stopMove()
                }
            })
            function autoMove(x, y) {
                moveFlag = true
                moveTimer = setInterval(function() {
                    //遇到墙壁停止
                    if (
                        pxToFloat(test.style.left) >= window.innerWidth – 50 ||
                        pxToFloat(test.style.left) <= 0 ||
                        pxToFloat(test.style.top) >= window.innerHeight – 50 ||
                        pxToFloat(test.style.top) <= 0
                    ) {
                        stopMove()
                    }
                    test.style.left = pxToFloat(test.style.left) + x + ‘px’
                    test.style.top = pxToFloat(test.style.top) + y + ‘px’
                }, 1)
            }
            //停止函数
            function stopMove() {
                clearInterval(moveTimer)
                moveFlag = false
            }
            function pxToFloat(nowPos) {
                var end = nowPos.indexOf(‘p’)
                nowPos = parseFloat(nowPos.substring(0, end))
                return nowPos
            }
        </script>
    </body>
</html>
web前端开发框架怎么用
web开发前端框架
国内开发的 前端框架
赞(0)
前端开发者 » 前端原生js实现抛出小方块 匀速运动
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论