8

水の中をボートのようにドラッグするように div を取得しようとしていますが、回転を正しく行うのに問題があります。

これが私がこれまでに持っているものです
:

JS

var start, stop;
$('#canoe').draggable({
    containment: '#board',
    cursor: 'none',
    cursorAt: {
        top: 5
    },
    drag: function (event, ui) {
        start = ui.position.left;
        setTimeout(function () {
            stop = ui.position.left;
        }, 150);
        $('#canoe').css({
            'transform': 'rotate(' + (start - stop) + 'deg)'
        });
    }
});

CSS

#board {
    height:100%;
    width:100%;
    background:blue;
}
#canoe {
    background: #fff;
    border-radius:100% 100% 100% 100%;
    height:60px;
    width:10px;
    position:absolute;
    left:50%;
    bottom:0;
    transform-origin:top center;
    transition: transform .2s;
}

HTML

<div id="board">
    <div id="canoe">A</div>
</div>

360 度回転しても、ボートの前部が常に先行するように回転を設定するより良い方法はありますか?

追加のコンテキスト:基本的なゲームに取り組んでいます

報奨金の更新: 回転方向を反転/切り替えせずに、1 つの連続した動きで円を描くように「ボート」をドラッグできるようにする必要があります。

4

2 に答える 2

2

必要がある：

  • 変わるpositionたびに保存
  • 変更時に、上記の位置間の線の角度を計算します
  • 最後に保存position

http://jsfiddle.net/AstDerek/799Tp/

動きは柔らかく見えませんが、希望に近いです。

水の抵抗をシミュレートしたい場合は、角度の変化を何らかの要因で減らし、船の角度が本来の角度と一致するまで、ドラッグが終了した後、一定の時間間隔などを使用して移動を続ける必要があります。新しいドラッグ イベントが開始されます。

于 2013-06-21T16:56:30.910 に答える