0

Raphaël.js を使用して簡単なゲームを作成しようとしていますが、開発の非常に早い段階で問題に遭遇しました。カーソルの位置に円を付けて照準を合わせましたが、ターゲットをクリックしてもそうではありません。ターゲットのクリックイベントをトリガーしますが、狙いは.

background.mousemove(function(e){
    ePointer.attr({
        'fill':'none',
        'stroke':'none'
    }); 

    nx = e.clientX - $('#canvas').offset().left;
    ny = e.clientY - $('#canvas').offset().top;

    pointer.attr({
        'fill':'none',
        'stroke':'#CC0000',
        'stroke-width': 3,
        'cx':nx,
        'cy':ny
    });

});
background.click(function(e){
    pointer.animate(bClick);
    pointer.animate(bUnclick.delay(250));
    pointer.animate(bUnclick);
});

enemies.mousemove(function(e){
    pointer.attr({
        'fill':'none',
        'stroke':'none'
    });
    nx = e.clientX - $('#canvas').offset().left;
    ny = e.clientY - $('#canvas').offset().top;
    ePointer.attr({
        'cx':nx,
        'cy':ny,
        'fill': '#00CC00',
        'stroke':'none'
    });
});

jsfiddle リンクは、私ができるよりも多くのことを言うでしょう: http://jsfiddle.net/Uuqgx/6/

よろしくお願いします、ジョバンニ。

4

1 に答える 1

0

Raphaelのpaperオブジェクトには、Paper.getElementByPoint（x、y）というメソッドがあり、マウスの下で一番上のオブジェクトを取得します。もちろん、円はまだマウスの下にあるので、これだけでは役に立ちません。ただし、非表示にした場合は、現在のマウス座標を入力してこのメ​​ソッドを実行し、円を再表示すると、目に見える中断なしにその下に長方形が表示されます。

ePointer.click(function(e){
    score++
    tScore.attr({
        'text': 'Score: ' + score 
    });
    nx = e.clientX - document.getElementById('canvas').offsetLeft;
    ny = e.clientY - document.getElementById('canvas').offsetTop;

    //get targeted rectangle
    this.hide();    
    console.log(paper.getElementByPoint(nx, ny));
    this.show();

    ePointer.animate(eClick);
    ePointer.animate(eUnclick.delay(150));
    ePointer.animate(eUnclick);
});

ここでは、ターゲットの長方形をコンソールに記録しましたが、このように見つけたら、やりたいことが何でもできます。

jQueryはフィドルに存在しないため、これがjsFiddleで機能するためには、offset（）。TopがoffsetTopになることに注意してください。

フィドルを更新しました。

于 2013-02-05T19:48:47.410 に答える