技術標籤：javascript

首先有這樣一張圖片，利用JS改變背景圖顯示的位置，達到讓小人行走的目的

設定一個div，簡單寫樣式讓圖片左上角的小人顯示出來，一個小人的寬高大概就是33px。

<style>
        div {
            width: 33px;
            height: 33px;
            background-image: url(./img/Actor01-Braver03.png);
            background-position-x: 0px;
            background-position-y
 
: 0px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    
<div></div>

下面用JS處理，程式碼如下

<script>
		//設定一個變數key，初始值為undefined，起到一個開關的作用，按下鍵時開啟，鬆開時關閉
        var actor,key;
        var speedX=3,speedY=3,x=0,y=0,count=0,time=10;

        init(
 
);
        function init(){
            //獲取元素，也就是背景圖的那個小人
            actor=document.querySelector("div");
            //新增按鍵事件
            document.addEventListener("keydown",mouseHandler);
            document.addEventListener("keyup",mouseHandler);
            //每16毫秒執行一次animation函式
 

            setInterval(animation,16);
        }

        function mouseHandler(e){
            //按下鍵時根據鍵碼改變背景圖在Y軸的位置，相當於改變小人物的朝向
            if(e.type==="keydown"){
                if(!key){
                    switch(e.keyCode){
                        case 37:
                        actor.style.backgroundPositionY="-33px";
                        break;
                        case 38:
                        actor.style.backgroundPositionY="-99px";
                        break;
                        case 39:
                        actor.style.backgroundPositionY="-66px";
                        break;
                        case 40:
                        actor.style.backgroundPositionY="0px";
                        break;
                    }
                }
                key=e.keyCode;
            }else{
                //鬆開按鍵時，key為undefined，就不會執行animation函式
                key=undefined;
                actor.style.backgroundPositionX="0px";
            }
        }
        //key初始為undefined，不會進入函式，只有在按下方向鍵時將e.keyCode賦值給key才會進入函式
        //也就是按下方向鍵時執行此函式
        function animation(){
            if(!key) return;
            changeActor();
            actorMove();
        }
        //用來控制人物在頁面移動後的位置
        function actorMove(){
            switch(key){
                case 37:
                x-=speedX;
                break;
                case 38:
                y-=speedY;
                break;
                case 39:
                x+=speedX;
                break;
                case 40:
                y+=speedY;
                break;
            }
            actor.style.left=x+"px";
            actor.style.top=y+"px";
        }
        
        //改變背景圖在X軸的位置，相當於改變人物的移動時的狀態，看起來有動畫效果
        function changeActor(){
            //防抖
            time--;
            if(time>0) return;
            time=10;
            count++;
            if(count>3) count=0;
            actor.style.backgroundPositionX=-count*32+"px";
        }
</script>

這樣按下上下左右鍵就可以讓小人行走了