Question

目的

我正在制作一个简单的“射击单词”游戏，用户需要点击一些带有单词的移动矩形来“射击”它们。

问题

所以我创建了一些对象并使用简单的kinetic.js补间移动它们。

创建Word

function createWord（value）{

//here comes some word object construction
var wordGroup = new Kinetic.Group({
    x: 0,
    y: 0
});
  var padding = 10;

wordGroup.label = new Kinetic.Text({
    x: padding,
    y: padding,
    text: value,
    fontFamily: 'Times New Roman',
    fontSize: 30,
    fill: 'white'
});

wordGroup.tag = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: wordGroup.label.width() + (padding << 1),
    height: wordGroup.label.height() + (padding << 1),
    fill: 'black',
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffset: {x:10,y:20},
    shadowOpacity: 0.5,
    cornerRadius: 10
});

wordGroup.add(wordGroup.tag);
wordGroup.add(wordGroup.label);

wordGroup.shoot = function(){ //shooting mechanism (simple stop from moving and remove from scene)
    wordGroup.tween.pause();
    wordGroup.clean();
      dropNextWord(); //drops fresh blood! (new word instead of shooted)
}

wordGroup.clean = function(){ //remove from scene and set it free to drop again
   wordGroup.remove();
   wordGroup.isActive = false;   
}

wordGroup.move = function(callback){ //animates word
    wordLayer.add(wordGroup);        
    moveToSide(wordGroup, callback); //calls moving function
}

wordGroup.on('click', function(e){
    wordGroup.shoot();
});

return wordGroup; 
}

补间

//move word to opposite side
function moveToSide(word, callback){
    var side = Math.random();

    var d = 100;

    spawnFromSide(word, side); //set random side word position

    tweenPosition = {
        x: word.x(),
        y: word.y()
    }

    if(side < 0.25){ //left
        tweenPosition.x = - d;
    } else if(side > 0.25 && side < 0.5){ //right
        tweenPosition.x = defaultStageWidth + d;
    } else if(side > 0.5 && side < 0.75){ //up
        tweenPosition.y = - d;
    } else { //down
        tweenPosition.y = defaultStageHeight + d;
    }

    word.tween = new Kinetic.Tween({
        node: word,
        duration: 4,
        easing: Kinetic.Easings.Linear,
        x: tweenPosition.x,
        y: tweenPosition.y,
        onFinish: function(){
            word.clean();
            callback();
        }
    });

    word.tween.play();
}

但问题是点击事件不会触发大量用户点击次数。我认为，这是由延迟的drawHit（）调用内部补间机制引起的，它在更新命中区域之前绘制新的对象位置，因此当我们拍摄对象时我们认为我们击中其当前位置时我们会错过，因为它的命中区域仍然具有相同的旧位置位置。

Schematic delay illustration

实例

http://jsfiddle.net/hd6z21de/7/

拍摄一分钟以观察此效果

Answer 1

通过监听画布触摸解决了这种奇怪的行为，并检查指针是否由我自己碰撞某些目标字符而不是使用他们自己的onclick事件。

//因为我的应用程序特定，我听画布，你可以简单地听你自己的图层甚至文档

$（“canvas”）。bind（'click'，function（event）{

        var x = (event.pageX) / stage.scaleX(); //you don't need to divide by scale if your stage isn't scaled as mine does
        var y = (event.pageY) / stage.scaleY();

        var wordArray = wordGroup.getChildren();

        for(var i = 0; i < wordArray.length; i++){ //go through all words and check if we shoot someone (is mouse position included in some word rect)
            if(x > wordArray[i].x() &&
            y > wordArray[i].y() &&
            x < (wordArray[i].x() + wordArray[i].width()) &&
            y < (wordArray[i].y() + wordArray[i].height())){
                wordArray[i].shoot(); //shoot that word
                break;
            }    
        }
}

Twecing的Kinetic.js形状不会触发大部分点击

1 个答案: