Js实现小车的跑

清疚 2022-06-11 09:15 188阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            img{
                position: absolute;
                left:0;
                top:0;
            }
        </style>
        <script>
            var mleft=0;
            var mtop=0;
            var div1;
            var car;
            onload=function(){
                car=document.getElementsByTagName("img")[0];
                car.style.left=mleft+"px";
                car.style.top=mtop+"px";
            };
            window.addEventListener("keydown",function(e){
                switch (e.keyCode){
                    case 37:
                        if(mleft>0)mleft-=5;
                        car.style.left=mleft+"px";
                        car.style.transform="rotateY(-180deg)";
                        break;
                    case 38:
                        if(mtop>0)mtop-=5;
                        console.log(mtop);
                        car.style.top=mtop+"px";
                        car.style.transform="rotateZ(-90deg)";
                        break;
                    case 39:
                        if(mleft<(document.body.clientWidth-205))mleft+=5;
                        car.style.left=mleft+"px";
                        car.style.transform="rotateZ(0deg)";
                        break;
                    case 40:
                        mtop+=5;
                        car.style.top=mtop+"px";
                        car.style.transform="rotateZ(90deg)";
                        break;
                }
            },true);
        </script>
    </head>
    <body>
    <div class="div1"></div>
    <img src="img/c.gif" alt="" width="200px"/>
    </body>
    </html>