欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS16

程序员文章站 2022-06-23 09:35:50
上午:初始位置 位移 新位置下午:鼠标初始位置(mousedown)mousemove(结束减起始) mouseup 清除移动案例:小球与方块碰撞(难点碰撞的3个条件)

上午:初始位置 位移 新位置
下午:鼠标初始位置(mousedown)mousemove(结束减起始) mouseup 清除移动

案例:小球与方块碰撞(难点碰撞的3个条件)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #box {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px auto;
            position: relative;
        }

        #ball {
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }

        #block {
            width: 100px;
            height: 20px;
            position: absolute;
            left: 150px;
            bottom: 0;
            background-color: black;
        }

        #count {
            color: #ff0000;
            font-size: 18px;
            position: absolute;
            width: 20px;
            height: 20px;
            left: -20px;
            top: 0;
        }
    </style>
</head>

<body>
    <!-- 判断小球什么时候会撞上:3个条件 -->

    <div id="box">
        <div id="count">0</div>
        <div id="ball"></div>
        <div id="block"></div>
    </div>

    <script>
        var oBox = document.querySelector('#box');
        var oBall = document.querySelector('#ball');
        var oBlock = document.querySelector('#block');
        var oCount = document.querySelector('#count');

        var maxLeft = oBox.clientWidth - oBall.offsetWidth;
        var maxTop = oBox.clientHeight - oBall.offsetHeight;
        var max = oBox.clientWidth - oBlock.offsetWidth;


        var speedBlock = 5;
        var speedX = 3;
        var speedY = 4;

        // 小球
        setInterval(function () {
            // 初始值
            var left = oBall.offsetLeft;
            var top = oBall.offsetTop;

            // 位移
            left += speedX;
            top += speedY;


            // 临界值
            if (left < 0 || left > maxLeft) {
                speedX = -speedX
            }
            if (top < 0 || top > maxTop) {
                speedY = -speedY; //转向  
            }


            // 小球什么时候会撞上
            var r = oBall.offsetWidth / 2;  //圆的半径
            if (left > oBlock.offsetLeft - r &&  //左边线碰撞条件
                left < oBlock.offsetLeft - r + oBlock.offsetWidth &&  // 右边线碰撞条件
                top > maxTop - oBlock.offsetHeight  // 下边线碰撞条件
            ) {
                speedY = -speedY;  //反向
                oCount.innerHTML=oCount.innerHTML*1+1;
            }

            // 新位置
            oBall.style.left = left + 'px';
            oBall.style.top = top + 'px';

        }, 50)


        // 方块
        document.onkeydown = function (e) {
            var e = event || e
            var keyCode = e.keyCode || e.which;
            // 初始值
            var left = oBlock.offsetLeft;

            // 位移 我们需要左右2个方向 所以这里用到keyCode值
            if (keyCode == 37) {
                left -= speedBlock;
            }
            if (keyCode == 39) {
                left += speedBlock;
            }


            // 临界值  这里不需要反弹是需要停止 所以我们是分开写的
            if (left < 0) {
                left = 0;
            }

            if (left > max) {
                left = max;
            }

            // 新位置
            oBlock.style.left = left + 'px';
        }

    </script>
</body>

</html>

案例:随机位置滑动解锁(重点封装一个随机函数)

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 650px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            position: relative;
        }

        #content {
            width: 650px;
            height: 350px;
            position: relative;
            background-image: url(lvyou_03.png);
            background-size: 650px 350px;
        }

        #shadow {
            height: 40px;
            width: 40px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: aliceblue;
        }

        #block {
            height: 40px;
            width: 40px;
            position: absolute;
            left: 0;
            top: 355px;
            background-image: url(lvyou_03.png);
            background-size: 650px 350px;

        }

        #tip {
            height: 40px;
            width: 40px;
            position: absolute;
            left: 0;
            top: 0;
            background-image: url(lvyou_03.png);
            background-size: 650px 350px;

        }
    </style>
</head>

<body>
    <div id="box">
        <div id="content">
            <div id="shadow"></div>
            <div id="tip"></div>
        </div>
        <div id="block"></div>
    </div>

    <script>
        var oContent = document.querySelector('#content');
        var oShadow = document.querySelector('#shadow');
        var oTip = document.querySelector('#tip');
        var oBlock = document.querySelector('#block');

        var maxLeft = oContent.clientWidth - oBlock.offsetWidth;
        var maxTop = oContent.clientHeight - oBlock.offsetHeight;


        setPosition();
        // 鼠标事件
        oBlock.addEventListener('mousedown', function (e) {
            var ev = event || e;
            var startX = e.clientX;

            document.addEventListener('mousemove', function (e) {
                var ev = event || e;
                var endX = e.clientX;

                var left = endX - startX;

                if (left < 0) {
                    left = 0;
                }
                if (left > maxLeft) {
                    left = maxLeft;
                }
                oBlock.style.left = left + 'px';
                oTip.style.left = left + 'px';

            })

            oBlock.addEventListener('mouseup',function (){
                document.onmousemove=null;
                if (oShadow.offsetLeft == oTip.offsetLeft) {
                    alert('great');
                } else {
                    oBlock.style.left = 0;
                    oTip.style.left = 0;
                    setPosition();
                }
            })

        })


        // 封装一个随机位置函数
        function setPosition() {
            var x = Math.round(Math.random() * maxLeft);
            var y = Math.round(Math.random() * maxTop);

            oShadow.style.left = x + 'px';
            oShadow.style.top = y + 'px';
            oTip.style.top = y + 'px';

            oBlock.style.backgroundPosition = `-${x}px -${y}px`;
            oTip.style.backgroundPosition = `-${x}px -${y}px`;
        }
    </script>

</body>

</html>

本文地址:https://blog.csdn.net/weixin_48651630/article/details/107330138

推荐阅读