js代码实现按下wsad键移动功能

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

 

目录

• 一、功能描述
• 二、代码解析
• 总结

 

 

一、功能描述

按下wsad四个键，设置的小方块按照上下左右四个方向移动，按一下移一下。

二、代码解析

1.小方块样式

 <style>
        .sq {
            position: absolute;
            width: 30px;
            height: 40px;
            background-color: rosybrown;
            margin: 50px auto;
        }
    </style>

2.js代码

let sq = document.querySelector("div");//获取元素
        let x=sq.offsetLeft, y = sq.offsetTop;//获取小方块距左边以及上方的距离

        document.addEventListener("keydown", function (event) { //判断按下的键
            switch (event.key) {
                case "w":
                y -=10;
                    break;
                case "a":
                x -=10;
                    break;
                case "d":
                x +=10;
                    break;
                case "s":
                y +=10;
                    break;
            }
        });
        document.addEventListener("keyup", function(){     //按键松开，小方块滑动
            sq.style.cssText=`
            top:${y}px;
            left:${x}px;
            transition:all ease-in-out 1s ;
            `;
        })

 

---

总结

添加监听的对象是document，鼠标事件keydown、keyup。