问题描述
我正在使用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>
CSS是无关紧要的。
player.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");
ball.js脚本：
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");
和funcs.js脚本：
function move() {
player.move();
ball.move();
}
function back() {
player.back();
}
player.js中的move函数使播放器上下移动，而back函数使它改变方向。 当我只打电话给它时，它工作正常。 ball.js中的move函数使球移动。 当我只打电话给它时，它工作正常。 但是当我把它们都叫给他们时，球员会发疯，并且很快地上下运动，而球只是飞出了屏幕。 我的编码可能看起来有些奇怪，但是我在编写时遇到了其他一些问题，并且这种编写方式有效。
谢谢您的帮助。
1楼
Moishe Lipsker
1
已采纳
2015-07-26 23:31:52
如果您在控制台中暂停脚本执行并将鼠标悬停在Ball或Player函数中使用的this.move ，您将看到this.move指的是：
function move() {
player.move();
ball.move();
}
这意味着每次this.move在Player或Ball内部被调用时，都会在player.move()和ball.move()中ball.move()调用两次。