Easeljs精灵动画卡在框架上答案

【问题标题】：Easeljs sprite animation stuck on frameEaseljs精灵动画卡在框架上
【发布时间】：2012-12-19 07:24:39
【问题描述】：

我正在学习 JavaScript，通过使用 easeljs 库制作一个简单的游戏，用于学校课程。我想制作一个十字准线，通过在您指向目标时显示一个小动画来向玩家提供一些反馈，使用我制作的命中测试。

但是，当十字准线接触到目标时，动画（应该是指向十字准线中间的两个小三角形）似乎卡在它的第一帧上。

这是我的一些代码，我将这两个函数放在一个ticker 函数中。这些函数做了它们应该做的事情（我通过向console.log发送一条消息来检查），但我认为一旦变量“hitTestControle”设置为true，动画就会在每次滴答时重置。如果您想查看所有代码，这里是“游戏”的链接： http://athena.fhict.nl/users/i279907/achtergrond/achtergrond.html

function hitTest() {
    if(distance(crossHair, block) < 60) {
        hitTestControle = true; 
} else {
        hitTestControle = false;
        console.log(hitTestControle);
    }
}

function hitTestControl() {
    if(hitTestControle == true) {
        crossHair.gotoAndPlay("move");
        console.log("hit");
    } else {
        crossHair.gotoAndPlay("stop");
    }
}

PS：我使用的这个 hittest 似乎也有问题。

function distance() {
    var difx = blok.x - crossHair.x;
    var dify = blok.y - crossHair.y;
    return Math.sqrt( (difx * difx) + (dify * dify) );
}

【问题讨论】：

标签： javascript animation if-statement sprite easeljs

【解决方案1】：

看起来您正在启动动画...将其设置为第一帧并启动它...每次 hitTestControle 为真。因为只要您将鼠标悬停在目标上，hitTestControle 就会为真，因此动画将永远不会到达第二帧。

您需要做的是在从 hitTestControle = false 转换为 hitTestControle = true 时启动动画，但一旦发生这种情况，您只需让它自动播放。

试着把你的 hitTestControl() 函数改成这样：

function hitTestControl() {
    if(hitTestControle == true && alreadyOverHit == false) {
        crossHair.gotoAndPlay("move");
        alreadyOverHit = true;
        console.log("hit");
    } else {
        crossHair.gotoAndPlay("stop");
        alreadyOverHit = false;
    }
}

换句话说，只启动一次动画，在您检测到命中的第一帧期间，然后不要触摸它，除非您离开目标并重新打开。

【讨论】：