Question

此游戏在用户点击第一张图片后开始 - 然后消失，游戏图片（div）出现。

我拥有所有功能，包括得分，30秒的计时器......但是遗漏了一件我无法弄清楚的简单事情。

图像应该在任何方向上随机移动，但只能水平移动。我通过改变样式：左侧属性动态地为水平方向实现了移动方法，但是当我尝试更改样式时，垂直更改没有响应：top。

请帮忙。提前谢谢。

<BASE HREF="http://my.campuscruiser.com/cruiser/waldenu/tushar.gerg/game.html"/>
<html> 
<head> 
<title>Image click Game!</title> 
<script> 

var score = 0;
var left=400;
var top = 100;
var deltaX=0;
var deltaY=0;
var width;
var height;
var interval;

function delayedAlert() {
  window.setTimeout(alert, 30000);
}

function alert() {
  clearInterval(interval);
var game = document.getElementById('game');
game.style.display= 'none';
var end = document.getElementById('end');
end.style.display = 'block';
document.getElementById("Finalscore").value = score;
}


function play() {

var game = document.getElementById('game');
var firstDiv = document.getElementById('firstDiv');
height = window.innerHeight;
width = window.innerWidth;

firstDiv.style.display= 'none';
game.style.display= 'block';

newDir();
  interval = setInterval("move()", 10);
delayedAlert();
 }

function newDir() {
 deltaX=Math.floor(Math.random()*11)-5;
 deltaY=Math.floor(Math.random()*11)-5;

} 

 function move() {


 left= left+deltaX;
 top = top+deltaY;

if (left<=0) {
newDir();
deltaX=Math.abs(deltaX);
 left= left+deltaX;
}

if (left>=width) {
newDir();
deltaX=(-1)*Math.abs(deltaX);
 left= left+deltaX;
}

if (top<=0) {
newDir();
deltaY=Math.abs(deltaY);
 top = top+deltaY;
}

if (top>=height) {
newDir();
deltaY=(-1)*Math.abs(deltaY);
 top = top+deltaY;
}

 var im= document.getElementById('image');
 im.style.top=top;
 im.style.left=left;


 }

function addScore()
{
  score++;
document.getElementById("score").value = score;
return;
}

</script> 
</head> 
<body> 

<div id ="firstDiv" style="display : block">
    <img onClick = "play();" src="pics/playgame.gif"/></a>
</div>

        <div id="game" style="display : none">
        <p>Score: <input type= "text" id="score" size="3" value="0"></form>   Game ends in 30 seconds -- HURRY</p>

        <img id="image" src="pics/gameImage.gif"  onClick = "addScore();" style="position:relative; left: 400; top: 100; height: 100; width: 80"/>
        </div>

<div id="end" style ="display: none">
<h1>Game Ended - 30 Seconds up</h1>
<p>Score: <input type= "text" id="Finalscore" size="3"></form> </p>
</div>

</body> 
</html>

Answer 1

您已将top定义为与默认window.top变量冲突的全局变量。尝试将其重命名为其他更好或更好的方法，不要将其作为全局变量开始。（另外，如果进行搜索和替换，请不要更改第82行的im.style.top实例。）

游戏中的简单javaScript错误 - 图像不垂直移动

1 个答案: