Question

我是html5的初学者，我在一个简单的程序中面对这个问题，在屏幕上移动图像。它是一个简单的pacman程序，我使用了两个图像。一个是嘴巴打开的pacman，另一个嘴巴关闭当我试图将它向右移动屏幕时，它必须返回到它的初始位置。它尝试了许多方法但没有效果。它仅为步骤移动一次，而对于下一步则它是静态的。如果有人能解决这个问题，那将非常有帮助

<html>
<head>
<SCRIPT>
    var timer = setInterval(Run,500);
    flag = 1;
    function Run(){
    img1 = document.getElementById("PacMan");
    var init=0;
    var x = 0; 
    var dest_x = 800;  
    var interval = 10; 
    if(x<dest_x) 
        x = x + interval; 
        img1.style.left = x+"px";
    if (x+interval < dest_x)
        img1.style.left = init+"px";
    if(flag ==1){
        img1.src = "PacMan2.png";
        flag=0;

    }
    else {
        img1.src = "PacMan1.png";
        flag=1;
    }
    }
</SCRIPT>
</head>
<body>

<img id="PacMan" src = "PacMan1.png" onClick=clearInterval(timer)
 style="position:absolute"> </img>
</body>
</html>

Answer 1

尝试移动

var init=0;
var x = 0;
var dest_x = 800;
var interval = 10;

在function Run(){之前

。

现在用初始数据覆盖结果。

Answer 2

 var timer = setInterval("Run()",500);

你错过了一些逗号！

Answer 3

尝试用

读取当前的pacMan位置

var x = img1.offsetLeft;

Answer 4

在我看来，你必须使用Canvas（查看MDN上的示例）和JavaScript来实现此目的。

在屏幕上移动图像

4 个答案: