经典键盘事件(坦克移动)

.格鲁特.

已于 2022-02-13 23:48:46 修改

阅读量918

点赞数 2

分类专栏：坦克移动原生js 文章标签： css javascript 前端

于 2022-02-13 23:48:44 首次发布

本文链接：https://blog.csdn.net/China_Groot/article/details/122916220

版权

原生js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

坦克移动

1 篇文章 0 订阅

订阅专栏

HTML部分和css部分没有什么需要说的，只需要一个承载图片的img标签即可，给图片设置fixed定位即可(不一定必须得是fixed，只要是能改变位置的即可)，另外需要准备四张图片，分别是坦克四个朝向的图片

<img src="imgs/tankU.gif" alt="" id="myTank">

        img {
            position: fixed;
            left: 500px;
            top: 400px;
        }

js部分(核心代码，思路为判断键盘按下的键，控制图片的src和位置，也可以不改变src，控制图片旋转也行)

        let tank = document.getElementById("myTank");
        // 获取浏览器可视区域的宽高
        let bigHei = window.innerHeight;
        let bigWid = window.innerWidth;

        //键盘keyCode码---W:87   S:83   A:65    D:68
        document.onkeydown = function (e) {
            // 坦克每上下左右移动时，增加或减少5px的偏移量，得到一个新的坐标

            //坦克上移
            if (e.keyCode == "87") {
                tank.src = "./imgs/tankU.gif";
                if (tank.offsetTop >= 0) {
                    tank.style.top = tank.offsetTop - 5 + "px";
                }
            }

            //坦克下移
            else if (e.keyCode == "83") {
                tank.src = "./imgs/tankD.gif";
                if (tank.offsetTop <= bigHei) {
                    tank.style.top = tank.offsetTop + 5 + "px";
                }
            }

            //坦克左移
            else if (e.keyCode == "65") {
                tank.src = "./imgs/tankL.gif";
                if (tank.offsetLeft >= 0) {
                    tank.style.left = tank.offsetLeft - 5 + "px";
                }
            }

            //坦克右移
            else if (e.keyCode == "68") {
                tank.src = "./imgs/tankR.gif";
                if (tank.offsetLeft <= bigWid) {
                    tank.style.left = tank.offsetLeft + 5 + "px";
                }
            }

        }