在html页面中,使用js同时操控两个元素进行移动

Will_Season

于 2022-11-17 20:29:30 发布

阅读量358

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Will_Season/article/details/127910954

版权

通过电脑键盘上的方向键以及W\A\S\D键同时操控两个元素在html页面中进行移动

CSS部分:

div {
        width: 100px;
        height: 10px;
    }

    #mobile {
        background-color: coral;
        position: absolute;
    }

    #mobile1 {
        background-color: chartreuse;
        position: absolute;
        margin-top: 45%;
    }

HTML部分:

<div id="mobile"><img src="" alt=""></div>
    <div id="mobile1"><img src="" alt=""></div>

js部分:

let div = document.querySelector('#mobile');
        let div1 = document.querySelector('#mobile1');
        var codeType = {//定义对象记录keyCode属性
            "up": false,
            "down": false,
            "left": false,
            "right": false,
            'w_up':false,
            's_down':false,
            'a_left':false,
            'd_right':false
        }
        setInterval(Move1, 40);//定时器,用于持续触发第一个元素按钮
        setInterval(Move2, 40);//定时器,用于持续触发第二个元素按钮
        onkeydown = function (e) {
            console.log(e.keyCode);
            switch (e.keyCode) {
                case 37:
                    codeType.left = true; break;
                case 38:
                    codeType.up = true; break;
                case 39:
                    codeType.right = true; break;
                case 40:
                    codeType.down = true; break;
                case 65:
                    codeType.a_left = true; break;
                case 87:
                    codeType.w_up = true; break;
                case 68:
                    codeType.d_right = true; break;
                case 83:
                    codeType.s_down = true; break;
            }
        }
 
        onkeyup = function (e) {
            switch (e.keyCode) {
                case 37: codeType.left = false; break;
                case 38: codeType.up = false; break;
                case 39: codeType.right = false; break;
                case 40: codeType.down = false; break;
                case 65: codeType.a_left = false;break;
                case 87: codeType.w_up = false; break;
                case 68: codeType.d_right = false; break;
                case 83: codeType.s_down = false; break;
            }
        }

            function Move1() {
                if (codeType.left) {//左
                    div.style.left = parseInt(window.getComputedStyle(div, null).left) - 1 + "px";
                }
                if (codeType.up) {//上
                    div.style.top = parseInt(window.getComputedStyle(div, null).top) - 1 + "px";
                }
                if (codeType.right) { //右
                    div.style.left = parseInt(window.getComputedStyle(div, null).left) + 1 + "px";
                }
                if (codeType.down) { //下
                    div.style.top = parseInt(window.getComputedStyle(div, null).top) + 1 + "px";
                }
            }
            function Move2() {
                if (codeType.a_left) {//左
                    div1.style.left = parseInt(window.getComputedStyle(div1, null).left) - 1 + "px";
                }
                if (codeType.w_up) {//上
                    div1.style.top = parseInt(window.getComputedStyle(div1, null).top) - 1 + "px";
                }
                if (codeType.d_right) { //右
                    div1.style.left = parseInt(window.getComputedStyle(div1, null).left) + 1 + "px";
                }
                if (codeType.s_down) { //下
                    div1.style.top = parseInt(window.getComputedStyle(div1, null).top) + 1 + "px";
                }
            }