js键盘事件-让小车走动

最新推荐文章于 2021-06-23 15:06:12 发布

HaiRong_21

最新推荐文章于 2021-06-23 15:06:12 发布

阅读量208

点赞数

文章标签： js

本文链接：https://blog.csdn.net/HaiRong_21/article/details/108536240

版权

图片不知道怎么贴在网上，就。。。需要的话自己网上找一个小车子的图片，更改一下img的src地址吧哈哈。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 120px;
            height: 60px;
            position: absolute;
            top: 10px;
            left: 10px;
        }
    </style>
</head>

<body>
    <img src="./img/car.png" alt="这里有一个小车车图片">
    <script>
        let car = document.getElementsByTagName('img')[0];
        window.onkeydown = function (e) {
            let speed = Math.floor(Math.random() * 5) + 8;
            // console.log(e.keyCode);获取点击的键盘的asc码（数字）
            switch (e.keyCode) {
                //右D
                case 68:
                    car.style.transform = 'rotate(0deg)'
                    car.style.left = car.offsetLeft + speed + 'px';
                    break;
                //左A
                case 65:
                    car.style.transform = 'rotateY(180deg)'
                    car.style.left = car.offsetLeft - speed + 'px';
                    break;
                //下S
                case 83:
                    car.style.transform = 'rotate(90deg)'
                    car.style.top = car.offsetTop + speed + 'px';
                    break;
                //上W
                case 87:
                    car.style.transform = 'rotate(-90deg)'
                    car.style.top = car.offsetTop - speed + 'px';
                    break;

                default:
                    break;
            }
        }
    </script>
</body>

</html>

HaiRong_21

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js键盘事件-让小车走动

图片不知道怎么贴在网上，就。。。需要的话自己网上找一个小车子的图片，更改一下img的src地址吧哈哈。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
复制链接

扫一扫