4

我是 html5 的初学者，并且在一个简单的程序中面临这个问题，可以在屏幕上移动图像。它是一个简单的 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>
4

4 回答 4

4

尝试移动

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

之前function Run(){。

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

于 2013-03-25T10:57:50.013 回答
0 
 var timer = setInterval("Run()",500);

你错过了一些逗号！

于 2013-03-25T10:56:12.987 回答
0

尝试读取当前 pacMan 位置

var x = img1.offsetLeft;
于 2013-03-25T11:11:17.367 回答
-1

在我看来，您必须使用Canvas（查看 MDN 上的示例）和 JavaScript 来完成此操作。

于 2013-03-25T10:55:40.560 回答