小白求问，js控制人物键盘走动，这段简单代码错在哪

问题描述：

图片转换没有问题，按下方向键可以让它转，但是为什么跑不起来？已经设置了绝对定位已经left:0px;top:0px; 求大神解答。谢谢！

 <script>
    function basename(url){   //获取图片名
        var loc=url.lastIndexOf("/")+1;      

        return url.substr(loc);   
    }

    var ren=document.getElementById("ren");   

    var fx="p";   //默认跑动方向
    function changeimg(){
//      alert(basename(ren.src));
        if (basename(ren.src).charAt(2)=="1") {     
            ren.src="img/"+fx+"-2.png";                     
        } else{
            ren.src="img/"+fx+"-1.png";
        }       
    }   
    var x=0;
    var y=0;
    var xs=0;     //x速度
    var ys=0;       //y速度
    function run(){
        x+=xs;
        y+=ys;
        ren.style.top=y;
        ren.style.left=x;
    }


    setInterval(function(){         
        changeimg();   //正常
        run();          
    },100);

    function opt(){      
        var code=event.keyCode;
        switch (code){
            case 37:         
                fx="l";
                ys=0;
                xs=5;
                break;
            case 39:     
                fx="r";
                ys=0;
                xs=-5;
                break;
            case 38:        
                fx="u";
                xs=0;
                ys=-5;
                break;
            case 40:        
                fx="p";
                xs=0;
                ys=5;
                break;

        }
    }
</script>

答

单位加上，要不去掉xhtml申明。

而且没看到你执行opt函数的代码，没贴完代码？

        ren.style.top=y+'px';
        ren.style.left=x+'px'

答

貌似你的opt() 函数没有执行过 ,加一个监听事件 ,键盘事件 ,你的这个函数都没有被调用 ,怎么可能有效果

答

我这里是直接控制一个div的移动 ,可以了 ,用了jQuery ,你导入一个

             var x=0;
            var y=0;
            var xs=0;     //x速度
            var ys=0;       //y速度
            function run(){
                x+=xs;
                y+=ys;
             $("#ren").css({"top":x,"left":y})
            }

            $(window).keydown(function(e){
                var code=e.keyCode;
                switch (code){
                    case 37:         
                        fx="l";
                        ys=0;
                        xs=5;
                        break;
                    case 39:     
                        fx="r";
                        ys=0;
                        xs=-5;
                        break;
                    case 38:        
                        fx="u";
                        xs=0;
                        ys=-5;
                        break;
                    case 40:        
                        fx="p";
                        xs=0;
                        ys=5;
                        break;

                }
                  run();    
            })

小白求问，js控制人物键盘走动，这段简单代码错在哪

相关推荐