2

私は javascript/jquery を独学で学んでおり、サイド プロジェクトとしてドラッグ アンド ドロップ ゲームを作成することにしました。私が見つけた他のチュートリアルに基づいて、実際にそれを適応させたので、コードを簡単にしてください-うまくいけば、それほど怖くありません.

jquery ui ドロップ可能ライブラリを使用してゲームを実装しています。現在、アイテムが正しい場所にあるかどうかを確認し、スコアを 1 増やします。

しかし、私が抱えている問題は、アイテムが間違った場所にドロップされたときにスコアを1つ下げることができないことです.

正方形が正しいプレースホルダーに配置された場合、スコアに 1 が追加されますが、同じ正方形が正しいプレースホルダーから削除された場合、スコアから 1 を引く必要があります。

ここに私がこれまでに行ったことのデモがあり ます http://creativelabel.co.uk/drag-and-drop/

何か案は？

4

2 に答える 2

1

これにアプローチする 1 つの方法は、ドロップされた要素が有効な正方形に配置されたかどうかを格納することです。これは、無効な正方形に移動したときに、以前に有効な正方形にあったかどうかを確認し、そうである場合はスコアを 1 減らすことができることを意味します。

これが明確であることを願っています！

ライブ デモについては、http://jsfiddle.net/pET3y/を参照してください。

関連コード:

  if ( slotNumber == imgNumber ) {
    ui.draggable.addClass( 'img-match' );
    ui.draggable.data("valid", true);

    imgMatch++;
  }  else {
      if(ui.draggable.data("valid")) {
         imgMatch--;
         ui.draggable.data("valid", false); 
      }
  }

注：フィドルにはalert(ui.draggable.data("valid"));デバッグのアラートがあります

--

オンドラッグに変更するとスコアが下がる

ここで行うことは、ドラッグイベント ( と呼ばれる)をリッスンし、activateこれが呼び出されたときに関数を実行することです。この関数は、ドラッグされている要素が以前に正しい位置にあったかどうかをチェックし、正しい位置にあった場合は、正しい位置にないものとしてマークし、スコアを減らします。

参照: http://jsfiddle.net/3NkwJ/1/

      drop: handleDropEvent,
      activate: handleDragEvent //add new event
} );

そして、以下を追加します。

  function handleDragEvent( event, ui ) {
    if(ui.draggable.data("valid")) {
             imgMatch--;
             $('input[name=Score]').val(imgMatch);
             $('#score h1').text(imgMatch);
             ui.draggable.data("valid", false); 
    }      
  }
于 2012-09-05T15:19:21.233 に答える
0

私はコードをざっと読んだだけですが、このブロックの後

if ( slotNumber == imgNumber ) {
    ui.draggable.addClass( 'img-match' );
    imgMatch++;
}

else ステートメントを追加することはできますか

else
    imgMatch--;
于 2012-09-05T15:19:34.067 に答える