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

最新推荐文章于 2022-06-17 11:36:40 发布

xiangzidz

最新推荐文章于 2022-06-17 11:36:40 发布

阅读量2.5k

点赞数

分类专栏： JavaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_42965828/article/details/112615296

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>

xiangzidz

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用按键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;
复制链接

扫一扫