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

通过电脑键盘上的方向键以及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";
                }
            }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值