键盘控制物体走 - 码农教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小人快跑</title>
    <style>
    #imgs{
     position: absolute;
     left: 100px;
     top:100px   
    }
    </style>
</head>
<body>
    <img src="img/down-0.png" id="imgs">
</body>
<script src="js/xiaorenkuaipao.js"></script>
</html>



--------------------------以下js---------------------------


var imgs=document.querySelector('#imgs')
var index=-1
function fn(ns){
       
    index++
    if(index==5){
        index=0
    }
    imgs.src="img/"+ns+"-"+index+".png"
}
document.onkeydown=function(e){
    var e=window.event;
    
    
    // alert(e.keyCode)
    switch(e.keyCode){
        case 37:
            imgs.style.left=imgs.offsetLeft-10+'px'
       fn("left")
        break;

        case 38:
        imgs.style.top=imgs.offsetTop-10+'px'
        fn("up")
        break;

        case 39:
        imgs.style.left=imgs.offsetLeft+10+'px'
        fn("right")
        break;

        case 40:
        imgs.style.top=imgs.offsetTop+10+'px'
        fn("down")
        break;
    }
}
原文地址：https://www.cnblogs.com/yueranran/p/12503383.html