Javascript 使用两个setTimeout函数后图像变得疯狂_Javascript_Html_Css

Javascript 使用两个setTimeout函数后图像变得疯狂

javascript html css

Javascript 使用两个setTimeout函数后图像变得疯狂,javascript,html,css,Javascript,Html,Css,我正在使用html/css/javascript制作一个乒乓球游戏，在添加第二个setTimeout（）之前，一切都很顺利这是我的html代码 <!DOCTYPE html> <html> <head> <script type='text/javascript' src="player.js"></script> <script type='text/javascript' src="ball.js"></scri

我正在使用html/css/javascript制作一个乒乓球游戏，在添加第二个setTimeout（）之前，一切都很顺利

这是我的html代码

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src="player.js"></script>
<script type='text/javascript' src="ball.js"></script>
<script type='text/javascript' src="funcs.js"></script>
<link rel="stylesheet" type="text/css" href="cetrnes.css"/>
</head>
<body>
    <img src="universe-54a.jpg" width="700px" height="525px" onclick="back()"></img>
    <img id="player" src="player1.png" onload="move()"></img>
    <img id="ball" src="ball.png"></img>
</body>
</html>

以及funcs.js脚本：

function Player(ID) {
    this.t;
    this.y = 170;
    this.speed = -3;
    this.move = function move() {
        if (this.y > 1 && this.y < 421) {
            this.y += this.speed;
        }
        else if (this.y < 1) {
            this.y = 2;
            this.speed = 3;
        }
        else {
            this.y = 420;
            this.speed = -3;
        }
        document.getElementById(ID).style.top=this.y + "px";
        this.t = setTimeout("this.move()",10);
    }
    this.back = function back() {
        if (this.speed < 0) 
            this.speed = 3;
        else
            this.speed = -3;
    }
}

var player = new Player("player");

function Ball(ID) {
    this.t;
    this.x = 350;
    this.y = 260;
    this.left = true;
    this.bot = true;
    this.acc = 5;
    this.move = function move() {
        if (this.bot)
            this.y -= 3;
        else if (!this.bot)
            this.y += 3;
        if (this.left)
            this.x -= 3;
        else if (!this.left)
            this.x += 3;
        document.getElementById(ID).style.top = this.y + "px";
        document.getElementById(ID).style.left = this.x + "px";
        this.t = setTimeout("this.move()",10);
    }
}

var ball = new Ball("ball");

function move() {
    player.move();
    ball.move();
}

function back() {
    player.back();
}

js中的move函数使玩家上下移动，back函数使玩家改变方向。当我只叫它的时候，它工作得很好。js中的move函数使球移动。当我只叫它的时候，它工作得很好。但是当我打电话给他们的时候，两个球员都发疯了，上下非常快，而球只是飞出了屏幕。我的编码可能看起来有点奇怪，但我在写作时遇到了一些其他问题，而这种写作方式也很有效

非常感谢您的帮助。

如果您暂停控制台中的脚本执行，并将鼠标悬停在

球或玩家函数中使用的this.move
上，您将看到this.move
指的是：
function move() {
    player.move();
    ball.move();
}

这意味着每次在玩家
或球
内部调用this.move
时，它都会在玩家.move（）和球.move（）中再次被调用两次。你能制作一个JSFIDLE来演示这个问题吗？如果您在第51行和第52行对ball.move（）或player.move（）进行注释，它将起作用。这帮助我找到了一个解决方案，我从ball和player类中删除了setTimeout，并将其添加到函数move（），但我不完全理解我当时是如何调用两次的。我没有将其添加到答案中，因为我不确定，但我认为这可能与调用this.move
内部的move
有关，这意味着使用全局move
，因为本地的this.move