jquery - 画像を次のセルに移動する方法

Question

迷路を作ろうとしていて、テーブルを使っています。キーボードコントロール（左=次のセルに移動、下=次の行に移動など）で制御したい。クエリでそれは可能ですか？テーブル内の特定のセルに移動する必要があります。

Answer 1

私が考えることができる最も簡単な方法は、すべての要素をposition: absoluteテーブルに配置するのではなく、設定することです。の方が移動しやすいからですposition: absolute。

$.animate移動するときは、アニメーション効果が必要になります。自分で計算し（それほど難しくないと思います）、次のようなパラメータを設定する必要があります。

$('.block').click(function() {
    $(this).animate({
        left: 100,
        top: 200
    }, 3000); // animation time is 3 seconds
});

Answer 2

これができることです。開始点はテーブルの最初の tr と td です。プレーヤーの位置が td の赤い背景であるこのスネーク スタイルを実行します。パディングを設定して、ボックスを大きくすることができます。

2 つの変数 tr と td を特定します。両方を 0 に設定し、背景を赤に設定します。

jquery を使用して、上下左右のプレスを検出します。正しければ、td+=1。左の場合、td-=1。アップの場合、tr+=1、ダウンの場合、tr+=1。次に、条件を指定してその壁を設定します。tr == 0 かつ to == 0 の場合、壁があるため歩けません。それから、それは壁なので、そのセルも青か何かにする必要があります。以下のように、n 番目の子セレクターと .css を使用してそれを行うことができます。

どのボックスにいるかを知るには、n 番目の子セレクターと .css を使用します。

最初の行の 2 番目のセルを選択するには、 $('table tr:nth-child(1) td:nth-child(2)').css([ここで css に変更を加えます]); 背景色の中に設定できます。

壁については、tr と tds を含む配列に事前に決定された値を設定し、それらをループアウトして、それぞれに .css() を配置してセルを青くすることができます。

私は携帯電話でこれらすべてを入力しています。私がはっきりしていたことを願っています。さらに説明が必要な場合はお知らせください。