JS坦克移动

<!DOCTYPE html>
<html>
    <head>                              
        <meta charset="utf-8" />
        <title>让坦克开起来</title>
        <style type="text/css">
            input{
                font-size:26px;margin-top: 20px;
            }
            body{
                background-image: url(images/grassland.png);
            }
            #myTank{
                position: absolute;
                left:10px;
                top:100px;
            }
        </style>
    </head>
    <body>      
        <img id="myTank" src="images/right.png"/>
        <script>
            // 编写代码，让坦克能上下左右移动
            //键盘keyCode码---W:87   S:83   A:65    D:68
            var bigHei = window.innerHeight;
            var bigWid = window.innerWidth;
            console.log(bigWid,bigHei);
            var tank = document.getElementById("myTank");
            window.oncontextmenu=function(e){
                e.preventDefault();
            }
            document.onkeydown = function(e){
                //坦克上移
                if(e.keyCode == "87"){
                    tank.src = src="images/up.png";
                    if(tank.offsetTop >= 0){
                        tank.style.top = tank.offsetTop - 5 + "px";
                    }
                }
                //坦克下移
                else if(e.keyCode == "83"){
                    tank.src = src="images/down.png";
                    if(tank.offsetTop <= bigHei){
                        tank.style.top = tank.offsetTop + 5 + "px";
                    }
                }
                //坦克左移
                else if(e.keyCode == "65"){
                    tank.src = src="images/left.png";
                    if(tank.offsetLeft >= 0){
                        tank.style.left = tank.offsetLeft - 5 + "px";
                    }
                }
                //坦克右移
                else if(e.keyCode == "68"){
                    tank.src = src="images/right.png";
                    if(tank.offsetLeft <= bigWid){
                        tank.style.left = tank.offsetLeft + 5 + "px";
                    }
                }
            }
        </script>
    </body>
</html>


posted @ 2021-11-07 22:30  keiskeis  阅读(391)  评论(0)    收藏  举报