10.25【web客户端】学习内容“坦克移动”-优快云博客

本文链接：https://blog.youkuaiyun.com/sick_1412/article/details/120985004

先放入背景图

在学习动画之前，坦克的转向要用转换图片的方式强行改变，所以同样要放入坦克四个不同方向的四张图片，坦克绝对定位，给定初始位置。

使用keydown，当keyCode=" <键盘代码>",时让图片改变相应的方向，改变图片的绝对位置，parseint强制转换成数字型再加上像素单位。

额外要求：禁用右键

代码：

<body>
       <img id="mytank" src="images/right.png" style="position: absolute;left:10px;top:100px"/>
       <script>

           let img =document.querySelector("img");
           document.οnkeydοwn=function(event){
               if (event.keyCode=="38"||event.keyCode=="87"){
                   img.src="images/up.png";
                   let val =parseInt(img.style.top)-10;//数字控制速度
                   img.style.top=(val<0?0:val)+"px";
               }
               if (event.keyCode=="40"||event.keyCode=="83"){
                   img.src="images/down.png";
                   let val1=parseInt(img.style.top)+10;
                   let hei=innerHeight;//获取网页使用的最大高度
                   img.style.top=(val1>hei?hei:val1)+"px";
               }
               if (event.keyCode=="37"||event.keyCode=="65"){
                   img.src="images/left.png";
                   let val2 =parseInt(img.style.left)-10;
                   img.style.left=(val2<0?0:val2)+"px";
               }
               if (event.keyCode=="39"||event.keyCode=="68"){
                   img.src="images/right.png";
                   let val3 =parseInt(img.style.left)+10;
                   let wid=innerWidth;//网页使用的最大宽度
                   img.style.left=(val3>wid?wid:val3)+"px";
               }
           }
           //禁用右键
           function ban() {
           return false;
           }
           document.oncontextmenu = ban;
       </script>
   </body>