js简单实现人物行走

秒速五厘米 2023-07-24 02:47 1阅读 0赞

![在这里插入图片描述][20200408225131304.png_pic_center]  
样式设置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>

[20200408225131304.png_pic_center]: /images/20230528/f44d052111d446719da295a2b0e692d6.png