使图像人脸运动方向html

Question

我正在尝试让图像朝向它移动的方向。例如，玩家按下 "up"，图像朝上。我将如何实现这一目标？

代码： 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>

感谢您的帮助！

Answer 1

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

您应该用引号将 onclick 值括起来 > onclick="move_img('...')"
在你的内联 CSS - 你缺少 px 单位，所以它应该是 > left: 500px; top: 100px
在您的右按钮中 - 您在末尾有一个额外的撇号（在结束 > 符号

虽然不是完全错误，但在某些情况下 - 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" >

使图像人脸运动方向html

Make image face movement direction html

html

javascript

image

direction