js-键盘事件案例-小人快跑

最新推荐文章于 2022-05-20 17:04:56 发布

VIP文章啵雨的博客

最新推荐文章于 2022-05-20 17:04:56 发布

阅读量706

点赞数 1

分类专栏： # js-事件案例

本文链接：https://blog.csdn.net/qq_25503949/article/details/105760455

版权

案例思路：
利用键盘的keycode判断按了上下左右什么键，然后利用键盘事件onkeydown对小人的定位进行改变即可

css部分：
由于操纵的是小人的位置，所以我们要先给小人添加一个定位

<style>
    #imgs {
   
        position: absolute;
        left: 500px;
        top: 200px;
    }
</style>

html部分：

<body>

    <img src="../images/down-0.png" alt="" id="imgs">

    <script src="script.js"></script>
</body>

这个案例最关键的地方就是js部分，有很多细节：
1.先赋予小人能上下左右移动的功能：

var imgs = document.querySelector('#imgs')
document.onkeydown = function(e) {
   
    var e = window.event || e

关注