我正在研究拖钓鱼。鱼应该从两个方向游过屏幕。我有点难以理解如何设置阵列以便鱼可以游泳。我想的数组是这样的
Var fishPos = new Array
fishPos[0] = fish1
fishPos[1] = fish2
fishPos[2] = fish3
然后做鱼的功能..我真的不知道如何做动画鱼游泳...我正在尝试。如果我正在寻找的数组就是我刚刚在那里做的，我想我很受伤。谢谢。
好吧，这就是我到目前为止所拥有的，但仍然有问题，他们的鱼不会游泳......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fish tank</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// <![CDATA[
var fishPos = new Array(3);
var fishPos = 0;
var direction;
var begin;
fishPos[0] = "fish1.gif";
fishPos[1] = "fish2.gif";
fishPos[2] = "fish3.gif";
function fishSwim(fishNumber) {
document.getElementById("fish"+fishNumber).style.left = horizontal[fishPos[fishNumber] + "px";
++fishPos[fishNumber];
if (fishPos[fishNumber] == 49)
fishPos[fishNumber] = 0;
}
function startSwimming() {
setInterval(fish1Swim, 100);
}
// ]]>
</script>
</head>
<body onload="startSwimming();">
<p><span id="fish1" style=
"position:absolute; left:10px; top:10px"><img src="fish1.gif" alt="Image of a fish" /></span></p>
<p><span id="fish2" style=
"position:absolute; left:10px; top:120px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
<p><span id="fish3" style=
"position:absolute; left:10px; top:250px"><img src="fish2.gif" alt="Image of a fish" /></span></p>
</body>
</html>
最佳答案
你从错误的方向接近它。为了让您更轻松，您应该尝试使用动画插件，例如 http://www.spritely.net/ (需要 jQuery)。
如果你想自己制作它，你必须编写一个补间函数，它会在指定的时间内将你的对象从 A 点移动到 B 点，更改其动画帧，偏移其 Y 位置以给出这种鱼腥味/不稳定的运动效果等。创建位置数组并不是真正的正确方法。
在 Dev.Opera http://dev.opera.com/articles/view/javascript-animation/ 的这篇精彩文章中，您会发现很多关于如何开始创建自己的动画引擎的技巧。
如果您仅针对现代浏览器，您可以尝试使用 CSS3 动画 - 尽管这些动画尚未得到广泛支持。
关于javascript - 处理旅行动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5757157/