javascript - jqueryでdivを移動する

Question

こんにちは、これは私の最初の投稿です。私はjavascriptとjqueryを使用してゲームを設計しています.現在、プレーヤーを表すdivがあり、キャラクターを動かす方法がわかりません.現在、div
<div id="player"></div>
を持っているだけです.これにはjqueryを使用したいのですが、喜んで使用します.通常のJavaScriptも使用します。

編集:矢印キーを使用して div を移動する必要があります。

Answer 1

jQuery では非常に多くのコードが必要になります。基本的にゲーム開発用の他の言語を使用することをお勧めします。

ただし、これを試すことができます：

div {
  margin-left: 100px;
}

これにより、div に 100px のマージンが設定されます。

$('#player').hover(function () {
 $(this).css('margin-left', '200px');
});

これにより、div が左から 100 ピクセル以上移動します。を使用animateしてこれをアニメーション化するか、このプロセスを遅くして、彼が動いているように見せることができます. このようにして、彼が体（腕、脚など）を動かしているように見えるように画像を変更する機会が得られます。

次に、彼をジャンプさせるには:

$('#player').click(function () {
  $(this).css('margin-bottom', '50px');
});

しかし、それはうまくいきません。体の部分を動かすように、画像自体が動くわけではありません。

jQueryでのゲーム開発には基本的かつ必要なツールになると思いanimateます。これにより、画像を変更できる時間間隔で関数を作成できるため、プレーヤーが移動するだけでなく移動するように見えるようになります他の場所に置きます。

通常の JS を使用するには、jQuery よりもさらに多くのコードが必要になります。したがって、jQuery を実行し続けます。

ここにチェックしたいプラグインがあります！

http://gamequeryjs.com/あなたが言ったように、jQuery に固執したいというその jQuery。

Answer 2

最善の方法はJQueryを使用することです.animate()

説明: CSS プロパティのセットのカスタム アニメーションを実行します。

動作デモの サンプルコード

 $( "#player" ).click(function(){
      $( this ).animate({ "left": "+=50px" }, "slow" );
 });

.animate()