js简单实现人物行走

样式设置div大小跟一个小人一般大小
div{
width: 32px;
height: 32px;
background-image: url(./img/Actor01-Braver03.png);
background-position-x: 0;
background-position-y: 0;
position: absolute;
left: 0;
top: 0;
}

<div></div>
<script>
js函数思路
    // 创建全局变量actor，key
    var actor,key;
    // 创建speedx，speedy 每次移动的距离
    var speedx=2,
        speedy=2,
        // x，y定位left，top 的距离
        x=0,
        y=0,
        // 防抖变量
        item=15,
        // 图片的初始值
        count=0;
    // 执行初始化函数
    init();
    // 创建初始化函数
    function init(){
        // 根据选择器获取页面中的div
        actor=document.querySelector("div")
        // 创建按键按下侦听事件
        document.addEventListener("keydown",keyHandler);
        // 创建按键抬起侦听事件
        document.addEventListener("keyup",keyHandler);
        // 创建定时器
        setInterval(animation,16);
    }
    // 创建事件侦听函数
    function keyHandler(e){
        // 打印看看是否进入函数
        // console.log(e.type)
        // 如果是按键按下时执行后面语句
        if(e.type==="keydown"){
            // 当key是undefined时进入switch语句
            if(!key){
                // 打印看看是否进入语句块
                // console.log("a")
                // 判断键码
                switch(e.keyCode){
                    // 键码37是向左则图片向上移动33px
                    case 37:
                    // console.log("b")
                        actor.style.backgroundPositionY="-33px";
                        break;
                        // 键码是38是向上图片则向上移动99px
                    case 38:
                        actor.style.backgroundPositionY="-99px";
                        break;
                        // 键码是39是向右图片向上移动66px
                    case 39: 
                        actor.style.backgroundPositionY="-66px";
                        break;
                        // 键码40是向下则图片不需要移动
                    case 40:
                        actor.style.backgroundPositionY="0px";
                        break;
                }
            }
            // key设置等于减值方便下面设置偏移的函数引用
            key=e.keyCode;
        }else{
            // 如果按键松开则把key设置为undefined
            key=undefined;
            // 按键松开则把图片恢复原来样式
            actor.style.backgroundPositionY="0px";
            actor.style.backgroundPositionX="0px";
        }

    }
    // 定时器函数
    function animation(){
        // console.log("b")
        // 如果!key为真时直接调出函数
        if(!key)return
        // 执行图片偏移防抖函数
        chageActor();
        // 执行div定位函数
        actorMover();
    }
    // 创建图片偏移防抖函数
    function chageActor(){
        // console.log("b")
        // item每进入一次函数--
        item--;
        // 如果item大于0直接跳出不执行后面内容
        if(item>0)return
        // 如果进入item重新赋值15
        item=15;
        // count每次加一
        count++;
        // 如果count大于3则重新赋值为0因为图片就4张丛0开始
        if(count>3)count=0;
        // 设置图片横向的偏移多少图片向左偏移所以是负数
        actor.style.backgroundPositionX=-count*32+"px";
    }
    // 创建函数给div设置left,top样式
    function actorMover(){
        // 判断键值
        switch(key){
            case 37:
                // console.log("b")
                // 向左移动的距离
                x-=speedx;
                break;
            case 38: 
            // 向上移动的距离
                y-=speedy;
                break;
            case 39: 
            // 向右移动的距离
                x+=speedx;
                break;
            case 40:
                // 向下移动的距离
                y+=speedy;
                break;
        }
        // 给div设置left和top样式
        actor.style.left=x+"px";
        actor.style.top=y+"px";
    }
</script>