在屏幕上移动图像

Moving image across the screen

本文关键字：图像 移动 屏幕      更新时间：2023-09-26

我是html5的初学者，我在一个简单的程序中面临这个问题，以便在屏幕上移动图像。这是一个简单的吃豆人程序，我用了两个图像。一个是张嘴的吃豆人，另一个是闭着嘴的。当我试图在屏幕上向右移动它，然后它必须回到它的初始位置。它尝试了许多方法，但都不奏效。每一步它只移动一次，下一步它是静止的。如果有人能解决这个问题就太有帮助了

<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>

尝试移动

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

前function Run(){ .

现在用初始数据覆盖结果

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

你漏了一些逗号!

尝试使用

读取pacMan当前位置
var x = img1.offsetLeft;

在我看来，你必须使用Canvas(查看MDN上的示例)和JavaScript。

相关文章：