1

ゲーム「ピクセル」と同じように、マウスの方向と角度のスクリプトを実行しようとしています。mousemove イベントで要素を動かし、要素に方向を感じさせ、その先端をその方向に向けさせたいと考えています。メソッドがどのように機能するのか理解できないようです。マウスの動きの方向を特定の角度で把握するためにいくつかの異なるアプローチを試しましたが、うまくいきませんでした。これはゲームの例です。もちろんフラッシュですが、メソッドはjqueryで可能でなければなりません。http://www.agame.com/game/pixel.html

誰かがこれのためにjfiddleに出くわしたか、良いアプローチを知っているなら、私に知らせてください。

編集*

以下でこれを試してみましたが、ほとんど機能しますが、マウスの方向を左右に動かした場合のみです。上下逆さまにしてひっくり返した感じ

var follow = $(".you");
var xp = 0, yp = 0;
var loop = setInterval(function(){
xp += (mouseX - xp) / 5;
yp += (mouseY - yp) / 5;
follow.css({left:xp, top:yp});

}, 15);
var lastx = 0;
var lasty = 0;
var img = $('.you');
var offset = img.offset();
function mouse(evt){

var mouse_x = evt.pageX; var mouse_y = evt.pageY;
    var degree=getDirection(lastx,lasty,mouse_x,mouse_y);
     lastx=mouse_x;
     lasty=mouse_y;
   img.css('-moz-transform', 'rotate('+degree+'deg)');
    img.css('-webkit-transform', 'rotate('+degree+'deg)');
    img.css('-o-transform', 'rotate('+degree+'deg)');
    img.css('-ms-transform', 'rotate('+degree+'deg)');
   }
   $(".field").mousemove(mouse);


 function getDirection(x1, y1, x2, y2,ns)
{
var dx = x2 - x1;
var dy = y2 - y1;
return (Math.atan2(dx,  dy) / Math.PI * 180);
}
4

2 に答える 2

2

これで進行方向がわかります

function getDirection(x1, y1, x2, y2)
{
    var dx = x2 - x1;
    var dy = y2 - y1;

    return Math.atan2(dx,  dy) / Math.PI * 180;​
}

画像をどのように描いているのかよくわからないので、実装するのに役立ちません。

于 2012-04-29T22:26:33.210 に答える
0

あなたのコメントの1つで、上/左を使用すると言いますが、それは明らかに不十分です。画像は移動しますが、角度には何もしません。

CSSスタイルを使用する必要がありますtransform: rotate(45deg)。ここを見てください。残念ながら、transform比較的新しいため、実際にはブラウザの種類ごとにCSS行を追加する必要があります：-ms-transform: rotate(45deg)、など。度の代わりに-webkit-transform: rotate(45deg)使用することもできます。これが返されます。radMath.atan

ここも見てください。彼らは物事を単純化する回転プラグインを提案しています。

于 2012-04-29T22:42:33.117 に答える