[JavaScript知识库]经典键盘事件(坦克移动)

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";
                }
            }

        }