Question

我正在学习javascript，使用画架库创建一个简单的游戏，用于学校课程。我想制作一个十字准线，通过在你指向你的目标时显示一个小动画给玩家一些反馈，使用我制作的最新版本。

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

这是我的一些代码，我将这两个函数放在一个自动收报机功能中。这些函数执行它们应该执行的操作（我通过向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：我用过的这个热门游戏似乎也出现了问题。

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

Answer 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;
    }
}

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

Easeljs精灵动画卡在框架上

1 个答案: