Question

我正在尝试创建一个基本的赛车，让两个精灵互相攻击。经过一些调整后，我让我的赛车手以慢速向右移动550像素

我的赛车手和按钮让他们参加比赛

<center><button id="race">Race!!</button></center>
<div class="kimo"><img id="kimo" src="images/kimo.gif"  alt="Kimo" height="80"></div>
<div class="kahuna"><img id="kahuna" src="images/kahuna.gif"  alt="Kahuna" height="80"></div>

以下是为其设置动画的脚本

<script>
$("#race").click(function(){
$(".kimo").animate({"left": "+=550px"}, "slow");
$(".kahuna").animate({"left": "+=550px"}, "slow");
});
</script>

现在这里的速度显然是“慢”，但我想让它们在点击按钮时产生随机速度，以及仅使用动画一次。如同，赛车手总计移动550px。

我需要完成的其他事情：无论谁先到达550px的末尾，文字都会出现，宣布Kimo或Kahuna为胜利者。

感谢任何帮助。

Answer 1

您可以使用Math.random生成速度，但首先必须计算出最大和最小速度 - 最低速度非常重要，因为Math.random有可能生成一个数字很小，动画将花费任意长的时间来完成。

[编辑]：OP询问是否可以仅触发动画一次 - 我添加了.unbind()方法，并为该函数分配了处理程序。

<script>
// Assign handler name, so that we can unbind it specifically
$("#race").click(function animateSprite(){
    // Unbind after first click
    $(this).unbind('click', animateSprite);

    // Set minimum speed
    var minSpeed = 1000;

    // Get random speed
    var kimoSpeed = parseInt(minSpeed + Math.random()*1000, 10),
        kahunaSpeed = parseInt(minSpeed + Math.random()*1000, 10);

    // In this case, the lowest possible speed is 1000, 
    // and the highest possible speed is 2000.
    // You are of course free to adjust the speed.

    // Animate
    $(".kimo").animate({"left": "+=550px"}, kimoSpeed);
    $(".kahuna").animate({"left": "+=550px"}, kahunaSpeed);

    // And if you want to decide who is the fastest, and assuming that you have an element with the id of "announce"
    // Delay announcement by 500ms after the slowest racer
    setTimeout(function(){
        if(kimoSpeed < kahunaSpeed) {
            // Declare Kimo as winner, e.g.
            // $("#announce").text("Kimo has won the race!");
        } else {
            // Declare Kahuna as winner
            // $("#announce").text("Kahuna has won the race!");
        }
    }, Math.max.apply(Math, [kimoSpeed, kahunaSpeed])+500);
});
</script>

如何在jQuery中为我的赛车手生成随机速度？

1 个答案: