JS键码实现简单拿到坦克调头移动

最新推荐文章于 2022-11-21 09:23:03 发布

原创最新推荐文章于 2022-11-21 09:23:03 发布 · 698 阅读

CC 4.0 BY-SA版权

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了一个可以通过键盘上下左右键或WASD键来控制移动与旋转的坦克图像。坦克的位置与旋转角度会根据键盘输入实时更新。

<!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>
        body{background: black;}
        #tank{position: absolute;}
    </style>
</head>
<body>
    <img src="../图片/坦克.png" alt="" id="tank">
</body>
<script>
        var otank = document.getElementById("tank");
        console.log(otank)

        document.onkeydown = function(eve){
            var code = eve.keyCode || eve.which;
            // console.log(code);
            var L =  otank.offsetLeft;
            var T =  otank.offsetTop;
            var current = 0;
            
            if(code == 37||code==65){L -= 10;
                current = (current-90)%360;
                otank.style.transform = 'rotate('+current+'deg)';
            };
            if(code == 38||code==87){T -= 10
                current = (current)%360;
                otank.style.transform = 'rotate('+current+'deg)';
            };
            if(code == 39||code==68){L += 10
                current = (current+90)%360;
                otank.style.transform = 'rotate('+current+'deg)';
            };
            if(code == 40||code==83){T += 10
                current = (current+180)%360;
                otank.style.transform = 'rotate('+current+'deg)';
            };
            
            otank.style.top = T + "px";
            otank.style.left = L + "px";
        }

</script>
</html>

在这里插入图片描述

JS键码 实现简单拿到坦克调头移动

JS键码实现简单拿到坦克调头移动