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

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

啵雨的博客

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

阅读量756

点赞数 1

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

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

版权

本文介绍了一个使用JavaScript键盘事件实现小人移动的案例。通过监听键盘的keycode，改变小人的定位，结合CSS和HTML实现移动效果。在JavaScript中，封装了移动功能以提高代码复用性，并解决浏览器兼容性问题。在实践中遇到的问题包括：事件绑定对象的选择、处理浏览器兼容性、数值与字符串拼接、switch语句的使用等。

摘要由CSDN通过智能技术生成

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

案例思路：
利用键盘的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;

最低0.47元/天解锁文章

啵雨的博客

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js-键盘事件案例-小人快跑

js-键盘事件案例-小人快跑案例思路：利用键盘的keycode判断按了上下左右什么键，然后利用键盘事件onkeydown对小人的定位进行改变即可css部分：由于操纵的是小人的位置，所以我们要先给小人添加一个定位<style> #imgs { position: absolute; left: 500px; top: 20...
复制链接

扫一扫

专栏目录