2

編集**

私の単語ゲームには、3 文字の単語のグリッドがあります。

ゲームの目的は、横にある対応する文字をクリックして単語を綴ることです。

グリッド内の領域が強調表示されると、綴る単語がユーザーに示されます。ユーザーがグリッドの横にある文字をクリックすると、強調表示された領域に移動します。

文字をクリックすると、グリッド内の対応する領域にアニメーションが表示されます。できるだけユーザーフレンドリーにしたいので、「keyDown()」を追加して、ユーザーが「a」を押すと画面上でアニメーション化されるようにします。

文字はこのように HTML に格納されます

<div class="tiles-wrapper">

        <div id="drag1" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="a">
        <p>a</p>
        </div>

        <div id="drag2" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="b">
        <p>b</p>
        </div>

        <div id="drag3" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="c">
        <p>c</p>
        </div>

        <div id="drag4" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="d">
        <p>d</p>
        </div>

        <div id="drag5" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="e">
        <p>e</p>
        </div>

        <div id="drag6" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="f">
        <p>f</p>
        </div>

        <div id="drag7" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="g">
        <p>g</p>
        </div>

        <div id="drag8" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="h">
        <p>h</p>
        </div>

        <div id="drag9" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="i">
        <p>i</p>
        </div>

         <div id="drag10" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="j">
        <p>j</p>
        </div>

        <div id="drag11" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="k">
        <p>k</p>
        </div>

        <div id="drag12" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="l">
        <p>l</p>
        </div>

        <div id="drag13" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="m">
        <p>m</p>
        </div>

        <div id="drag14" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="n">
        <p>n</p>
        </div>

        <div id="drag15" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="o">
        <p>o</p>
        </div>

        <div id="drag16" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="p">
        <p>p</p>
        </div>

        <div id="drag17" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="q">
        <p>q</p>
        </div>

        <div id="drag18" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="r">
        <p>r</p>
        </div>

        <div id="drag19" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="s">
        <p>s</p>
        </div>

        <div id="drag20" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="t">
        <p>t</p>
        </div>

        <div id="drag21" class="drag ui-widget-content player-tiles2" tabindex="0" data-letter="u">
        <p>u</p>
        </div>

        <div id="drag22" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="v">
        <p>v</p>
        </div>

        <div id="drag23" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="w">
        <p>w</p>
        </div>

        <div id="drag24" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="x">
        <p>x</p>
        </div>

        <div id="drag25" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="y">
        <p>y</p>
        </div>

        <div id="drag26" class="drag ui-widget-content player-tiles" tabindex="0" data-letter="z">
        <p>z</p>
        </div>

スクリプトをいくつか持っていますが、リンクする方法がわかりません

$(document).keypress(function(e){  

        if (e.which >= 97 && e.which <= 122) {  
              animateDrag(String.fromCharCode(e.which));  
    } 

});

http://jsfiddle.net/smilburn/Dxxmh/88/

4

2 に答える 2

1

click次のように、適切な文字 div でイベントをトリガーすることで実行できます。

$(document).keypress(function(e){ 
            if (e.which >= 97 && e.which <= 122) {  
                  letter = String.fromCharCode(e.which);
                  $(".drag[data-letter='"+letter+"']").trigger('click');
            }

});

実際のデモを見る

于 2012-11-01T12:38:49.073 に答える
0 
$().ready(function() {
   $('div.player-tiles, div.player-tiles2').keypress(function(e) {
      if (e.which >= 97 && e.which <= 122) {  
          animateDrag(String.fromCharCode(e.which));  
      } 
   })
})
于 2012-11-01T12:38:34.620 に答える