Question

我是JavaScript的新手，我试图让这个动画在屏幕上移动虽然无济于事，有人可以用我的代码帮助我吗？添加了更多代码，我试图让图像沿屏幕对角移动，尝试调用slowmovingmeteor（）函数。

Java脚本

var meteoranim = new Array(6);
var curmeteor = 0;
var leftposition = 0;
var topposition = 0; 

for(var t = 0; t<6; ++t){
meteoranim[t] = new Image();
meteoranim[t].src = "images/meteor" + t + ".png";

}

function meteoranimation(){
if(curmeteor == 5)
curmeteor = 0;
else
++curmeteor;
document.getElementById('meteor').src = meteoranim[curmeteor].src;
    }

  function slowmovingmeteor(){
var slowmeteor = document.getElementById("meteor");
slowmeteor.style.left = leftposition + "px";
slowmeteor.style.top = topposition + "px";
slowmeteor.style.visibility = "visible";
topposition += 6;
leftposition += 4;

if (topposition <= -20){
    topposition = -10;
    leftposition = -10; 
}
if (curmeteor == 5)
curmeteor =0;
if (leftposition > 1000){
topposition = -10;
leftposition = -10;
}
else 
document.getElementById('meteor').src = meteoranim[curmeteor].src;
++curmeteor


}

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Primordial Casino Casino</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link media="screen" href="styles/casinostyles.css" rel="stylesheet" type="text/css">


<script src="casinoAnimation.js" type="text/javascript">
</script>
</head>

<body id="wrapper" onLoad="
setInterval('caveboyanimation()', 150);
setInterval('slowmovingmeteor()', 80);
setInterval('campfireanimation()', 100);">

<header ><h1 class="casinotitle">Primordial Casino</h1>
</header>



<div>
<img class="caveboy" src="images/caveboy0.png" id="caveboy"  alt="Image of a cave boy"/>
<img src="images/campfire0.png" id="firepit" alt="Image of a fire pit"/>
<img src="images/meteor0.png" id="meteor" alt="Image of a meteor"/>

<canvas width="650" height="450">

</canvas>

</div>
<div id="footer">
<p>&copy; Primordial Casino</p>
<p>Thanks to ipicturee.com for the background image</p>

</div>
</body>
</html>

JavaScript动画不会在我的屏幕上移动

0 个答案: