1

HTML/CSS/Javascript/jquery を使用して三目並べゲームを作成しようとしています。グリッドの内容をクリアするリセット ボタンがあります。リセット ボタンを押した後、グリッドの内容はクリアされますが、グリッドをクリックして再びスポットを選択することはできません。私のリセットボタンには次のコードがあります：

 $('#reset').click(function(){
   $('.cells').empty();
     //board_make();
 });

私のグリッド/ボードは、以下のコードを使用して作成されました。基本的に、グリッド内の各セルの要素を作成し、それぞれが「セル」のクラスを持ちます。

function board_make(){
  for (var i = 0; i < 3; i ++){
    array[i] = new Array(3);
    for (var j = 0; j < 3; j ++){
      array[i][j] = "A" ;
      if(j == 2){
        $('.board').append("<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div></br></br></br>");
      }
      else{
      $('.board').append("<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div>");
      }
    }
  }
}

最後に、グリッド内のセルがクリックされるたびに実行されるコードは次のとおりです。

$('.cells').click(function(){
    if ($(this).text() != symbol){
      var a = parseInt($(this).text()[0],10);
      var b = parseInt($(this).text()[1],10);
      array[a][b] = symbol;
      $(this).html("<p class='shown'>"+symbol+"</p>");
    }
    else{
      alert("Spot taken. Pick another spot.");
    }
    if ((winner_found === false) && (hor_match() || ver_match() || diag_match())){
        alert("Match found!");
        winner_found = true;
    }  
 });

コードとともに進行中の作業へのリンクは次のとおりです: http://jsbin.com/inazog/6/edit。

4

4 に答える 4

2

問題は、セルの行/列を示すために非表示のテキストを使用しているが、セルを空にするときに非表示のテキストを削除することです。

"<div class='cells'><p class='hidden'>"+i.toString()+j.toString()+"</div>"

var a = parseInt($(this).text()[0],10);  // $(this).text() is "" after you clear the cells.
var b = parseInt($(this).text()[1],10);

コードの修正バージョンについては、こちらを参照してください: http://jsbin.com/inazog/13/edit

于 2012-12-26T20:09:05.013 に答える
1

編集— 以下は問題ではありません。問題は、セルをクリアするときに、セルに隠されているインデックス値をクリアしていることにあるようです。つまり、非表示の<p>タグを削除しています。

そこにインデックスを貼り付ける代わりに、jQuery.data()メカニズムを使用します。

var cell = ${'<div/>', {'class': 'cells'});
cell.data('x-index', i).data('y-index', j);
$('.board').append(cell);

次に、非表示の要素を保持しなくても、セルのインデックス値を取得できます。

問題ではありませんが、悪い考えではありません。

それ以外の

$('.cells').click(function(){

次のようにイベント ハンドラを設定します。

$('body').on('click', '.cells', function() { ...

コンテナーを空にすると、すべての要素が失われ、イベント ハンドラーも失われます。Nuked されない外側の要素にハンドラーを設定することで、グリッドが再構築された後もハンドラーは有効なままになります。

必要に応じて、イベント ハンドラーを ".board" コンテナーに配置することもできます。

$('.board').on('click', '.cells', function() { ...
于 2012-12-26T19:59:13.240 に答える
0

  1. 変更: 再レンダリング時にクリック イベントが有効になるようにします$('.cells').click(function() 。 $('.board').on('click', '.cells', function()

  2. ボードに変更$('.cells').empty();し$('.board').empty();て再レンダリングします。

    board_make();

JSビン

于 2012-12-26T20:16:02.490 に答える