4

html5の初心者であり、画面上で画像を移動する簡単なプログラムでこの問題に直面しています。2つの画像を使用したシンプルなpacmanプログラムです。1つは口を開いたパックマンで、もう1つは口を閉じたパックマンです。画面を右に向かって動かそうとすると、最初の位置に戻らなければなりません。多くの方法を試しましたが、うまくいきませんでした。1つのステップで1回だけ移動し、次のステップでは静的に移動します。誰かがこれを解決できれば本当に役に立ちます

<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 に答える