0

jQueryを使って簡単な数字ゲームを作ろうとしています。HTML テーブルを使用して 7x7 グリッドを作成しました。ユーザーがテーブル内のセルを強調表示および非強調表示できるように、いくつかの jQuery 関数を作成しました。ユーザーが選択した最初のセルが左端の列にある必要があり、次に選択された後続の各セルが、セルの右側に完全に接続されるまで、強調表示されているセルに隣接する必要があるようにしたいと思いますテーブル。セルには数字が含まれており、まだ確定していないゲーム的な機能がいくつかあります。

With a simple boolean and some if-logic I established that the first cell must be from the left column, but now I'm having trouble making sure that each subsequent cell be one that is adjacent to a highlighted cell. I have given each td in the table a numbered id, from 1-49 (7 rows of 7). When a user selects a cell I capture that cell's id in an array called cellCoord. I was hoping that something like this might work:

var thisCell = parseInt($(this).attr('id'));
if  (thisCell == (cellCoord[i]+1) || thisCell == (cellCoord[i]-1) ||
     thisCell == (cellCoord[i]+7) || thisCell == (cellCoord[i]-7))

Unfortunately it doesn't. Any suggestions?

An early draft of my efforts can be found here.

4

3 に答える 3

1

あなたのウェブサイトからテーブルを拾い上げて、クラスを追加して少し変更します

<table>
    <tr class="row">
        <td class="square candidate"></td>
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
    </tr>
    ...
</table>

CSS:

.square {
    width: 30px;
    height: 30px;
    border: white solid 1px;
    background-color: lightblue;
}

.highlighted {
    background-color: lime;
}

次に、隣接する正方形を選択します

$('.square').click(function () {
    if ($(this).hasClass('candidate')) {
        $(this).addClass('highlighted');
        // select adjacent squares
        // horizontal
        $(this).prev('.square').addClass('candidate');
        $(this).next('.square').addClass('candidate');
        // vertical
        var i = $(this).index();
        $(this).parent('.row').prev('.row').children(':eq(' + i + ')').addClass('candidate');
        $(this).parent('.row').next('.row').children(':eq(' + i + ')').addClass('candidate');
    }
});

.candidateすでに正方形に隣接している場合、正方形は.highlightedです。

于 2013-02-22T22:14:35.860 に答える
0

jQuery の.index()機能がこれを解決してくれます。アイテムのグループでどのアイテムが選択されているかがわかります。

http://api.jquery.com/index/

于 2013-02-22T21:45:35.873 に答える
0

各セルに x 座標と y 座標を割り当てます。また、「選択された」クラスを追加して、強調表示される div を実行します。例えば。

<div data-x="1" data-y="1"><div data-x="2" data-y="1">
<div data-x="1" data-y="2"><div data-x="2" data-y="2">

それから次のようなもの。

var div = $('#idOfDivJustClicked');
var x = div.data('x');
var y = div.data('y');

次に、jquery の attr セレクターを使用して、プラスまたはマイナス 1 の x または y 座標を含む div を検索します。これは正確なロジックではありません。似たようなものを実装する必要があります。

if ($('div[data-x=' + (x+1) + '][data-y=' + y + ']').hasClass('selected'))
{
    // found an adjacent highlighted cell
    // execute code
}
于 2013-02-22T21:46:05.513 に答える