使用按键wasd和上下左右键控制小球上下左右移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/util.js"></script>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<!--
    定义一个div，四个button，实现四方向移动
-->
<script>
    function createDiv(left, top) {
     
     
        var div = document.createElement ("div");
        var styles = div.style;
        styles.width = "200px";
        styles.height = "200px";
        styles.backgroundColor = "orange";
        styles.border = "1px solid";
        styles.borderRadius = "50%";
        styles.position = "fixed";
        styles.left = left + "px";
        styles.top = top + "px";
        return div;
    }

    function getStyle(ele) {
     
     
        if (window.getComputedStyle)
            return window.getComputedStyle (ele);
        return ele.currentStyle;
    }

    (function () {
     
     
        var div = createDiv (random (0, 300), random (0, 300));

        document.body.appendChild (div);

        var styles = getStyle (div);

        var clientWidth = document.documentElement.clientWidth;
        var clientHeight = document.documentElement.clientHeight;

        var divWidth = div.offsetWidth;
        var divHeight = div.offsetHeight;

        var maxTop = clientHeight - divHeight;
        var maxLeft = clientWidth - divWidth;

        //单次移动的距离
        const SPEED = 6;

        function moveUpDown(isDown) {
     
     
            clientHeight = document.documentElement.clientHeight;
            maxTop = clientHeight - divHeight;
            //先获取现在的top值
            var top = parseInt (styles.top);
            //修改top值。
            if (isDown) {
     
     
                top += SPEED;
                if (top > maxTop)
                    top = maxTop;
            } else {
     
     
                top -= SPEED;
                if (top < 0)
                    top = 0;
            }
            //设置给div
            div.style.top = top + "px";
        }

        function moveLeftRight(isRight) {
     
     
            clientWidth = document.documentElement.clientWidth;
            maxLeft = clientWidth - divWidth;
            var left = parseInt (styles.left);
            if (isRight) {
     
     
                left += SPEED;
                if (left > maxLeft)
                    left = maxLeft;
            } else {
     
     
                left -= SPEED;
                if (left < 0)
                    left = 0;
            }
            //设置给div
            div.style.left = left + "px";
        }

        //添加按键事件
        document.onkeydown = function (e) {
     
     
            e = e || window.event;
            var keyCode = e.keyCode;

            const A_CODE = 65, W_CODE = 87, S_CODE = 83, D_CODE = 68;
            const LEFT_ARROW = 37, UP_ARROW = 38, RIGHT_ARROW = 39, DOWN_ARROW = 40;
            switch (keyCode) {
     
     
                case A_CODE:
                case LEFT_ARROW:
                    moveLeftRight(false);
                    break;
                case W_CODE:
                case UP_ARROW:
                    moveUpDown(false);
                    break;
                case D_CODE:
                case RIGHT_ARROW:
                    moveLeftRight(true);
                    break;
                case S_CODE:
                case DOWN_ARROW:
                    moveUpDown(true);
                    break;
            }
        }


    }) ();
</script>
</body>
</html>
使用按键wasd和上下左右键控制小球上下左右移动

猜你喜欢
