欢迎光临
我们一直在努力

JavaScript | 键盘控制小人行走(上下左右)

通过键盘的上下左右按键让小人走起来。

案例涉及到的图片:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 33px;
            height: 33px;
            background-image: url("./img/Actor01-Braver03.png");
            background-position-x:0px;
            background-position-y: 0px;
            position: absolute;
            left: 0px;
            right: 0px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var actor,key; //actor为目标dom元素,key用于判断此时键盘状态
        var speedX = 2,//每次位移距离
            speedY = 2,//每次位移距离
            x      = 0,//小人当前定位x坐标
            y      = 0,//小人当前定位y坐标
            count  = 0,//用于判断小人动作,如果count=4,则初始为0
            time   = 10;//执行变幻动作的间隔次数,通过time可以有效地进行防抖
        init();
        //初始化函数
        function init(){
            //获取dom元素div
            actor = document.querySelector("div");
            //为div添键盘监听事件
            document.addEventListener("keydown",mouseHandler);
            document.addEventListener("keyup",mouseHandler);
            //设置定时器,每16s执行一次animation函数,该函数通过key判断是否执行小人位移和变换动作
            setInterval(animation,16);
        }

        function mouseHandler(e) {
            //判断键盘事件类型
            if(e.type === "keydown"){
                //如果key不存在,证明此时键盘未被激活
                if(!key){
                    //通过.keyCode判断按下的是哪个按键,并设置对应的小人坐标
                    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赋值,赋值后,可以用于在animation中判断是否执行改变动作和移动
                key=e.keyCode;
            }else{
                //如果激活keyUp,则将把key设置为undefined,此时animation将无法调用改变动作或移动的函数
                key = undefined;
                //松下按键时,将人物动作恢复默认
                actor.style.backgroundPositionX = "0px";
            }
        }

        function animation(){
            //通过key值判断此时是否是鼠标按下(且为松开)状态
            if(!key) return;
            changeActor();
            actorMove();
        }

        function changeActor(){
            //通过设置time,让其每10次执行一次,可以防抖
            time--;
            if(time>0) return;
            time = 10;
            count++;
            if(count>3) count=0;
            //通过设置背景X坐标,变幻人物动作
            actor.style.backgroundPositionX = -count*32+"px";
        }

        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";
        }
    </script>
</body>
</html>
赞(0) 打赏
未经允许不得转载:散人研 » JavaScript | 键盘控制小人行走(上下左右)
分享到: 更多 (0)

评论 1

3 + 3 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    拼搏到无能为力

    Rainbowcv 4个月前 (07-27) 来自天朝的朋友 回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏