使图像面移动方向html

Make image face movement direction html

本文关键字：方向 html 移动 图像      更新时间：2023-09-26

我正在尝试使图像面对它移动的方向。例如，玩家按"上"键，图像就朝上。我该如何做到这一点?

代码:Javascript 

        function move_img(str) {
        var step=10; 
        switch(str){
            case "down":
                var x=document.getElementById('braum').offsetTop;
                x= x + step;
                document.getElementById('braum').style.top= x + "px";
                break;
                case "up":
                var x=document.getElementById('braum').offsetTop;
                x= x -step;
                document.getElementById('braum').style.top= x + "px";
                break;
                case "left":
                var y=document.getElementById('braum').offsetLeft;
                y= y - step;
                document.getElementById('braum').style.left= y + "px";
                break;
                case "right":
                var y=document.getElementById('braum').offsetLeft;
                y= y + step;
                document.getElementById('braum').style.left= y + "px";
                break;
        }
    }
HTML

代码:

    <img src=images/braum.png id='braum' style="position:absolute; left: 500; top: 100;">
<br><br><br><br>
    <input type=image onClick=move_img('up') src="images/uparrow.png">
<br>
    <input type=image onClick=move_img('left') src="images/leftarrow.png">
    <input type=image onClick=move_img('right') src="images/rightarrow.png"'>
<br>
    <input type=image onClick=move_img('down') src="images/downarrow.png">
</body>
</html>

谢谢你的帮助!

总的来说你的算法是正确的，但是，你的语法和组织有很多问题

  1. 你应该把onclick值用引号括起来> onclick="move_img('...')"
  2. 在你的内联CSS -你缺少px单位，所以它应该是> left: 500px; top: 100px
  3. 在你的右按钮-你有一个额外的撇号在最后(结束>符号
    4. 之前)

虽然不是完全错误，但在某些情况下- offsetLeft和offsetTop与top和left不同-因此将它们一起使用是不明智的

为了改变旋转，你应该使用transform CSS属性，为了通过JS访问它，使用element.style.transform -值是rotate(Xdeg)，其中X是你想要旋转元素的度

这是一个工作的例子，这样的事情(我做了一些改变的HTML，因为我没有图像，但逻辑保持不变):

function move_img(side){
 var step = 10;
 var element = document.getElementById('braum');
 var left = parseInt(element.style.left);
 var top = parseInt(element.style.top);
 var rotation = 0;
    
 switch(side){
     case 'up': top-=step; rotation = -90; break;
     case 'right': left+=step; rotation = 0; break;
     case 'left': left-=step; rotation = 180; break;
     case 'down': top+=step; rotation = 90; break;
 }
 element.style.top = top+'px';
 element.style.left = left+'px';
 element.style.transform = 'rotate('+rotation+'deg)';
}
#braum{
  width: 40px;
  height: 40px; 
  color: white;
  text-align: center;
  transition: transform 0.5s; /* Remove This to remove the animation */
  background: green; 
  position:absolute; 
}
<div id='braum' style="left: 100px; top: 100px;">Hi</div>
    <input type="button" onclick="move_img('up')" value="up" >
    <input type="button" onclick="move_img('left')" value="left" >
    <input type="button" onclick="move_img('right')" value="right" >
    <input type="button" onclick="move_img('down')" value="down" >

相关文章：