遊戲不能正常工作的重置功能

我一直在使用Jquery製作一個簡單的拼圖比賽遊戲，除了遊戲完成後，一切都還好，單擊模式框後它不能正確重設），並且您不能再單擊divs再次播放。遊戲不能正常工作的重置功能

要查看遊戲和代碼，請轉到http://codepen.io/acnorrisuk/pen/JdoGvP/ 我有console.logged值的數組，以便您可以通過遊戲欺騙您的方式來查看重置時會發生什麼。

復位功能低於：

function newBoard() { 
    // reset variables 
    tiles_flipped = 0; 
    temp_values.length = 0; 
    tile_values.shuffle(); 
    tile1 = ''; 
    tile2 = ''; 
    $("#board").empty(); 
    $(".tile").removeClass("transform"); 
    $("#score").html("<p>Pairs Found: " + 0 + "</p>"); 
    // gives each div a unique tile number and inserts images 
    for (var i = 0; i < tile_values.length; i++) { 
     $("#board").append("<div class='flip-container flip'>\ 
       <div class='tile flipper' id='" + i + "'>\ 
        <div class='front'></div>\ 
        <div class='back'><img src='" + 
      tile_values[i] + "'>\ 
       </div>\ 
      </div>\ 
     </div>"); 
    } 
};

來源

2015-04-25 Adam Norris

您要刪除所有核元件（那些與「瓦」級）當您創建一個新的董事會。這些tile元素具有綁定到它們的click-handler，但新添加的tile元素沒有綁定到它們的click處理程序。

您可以移動綁定點擊處理程序的代碼，使其位於newBoard()函數中（將圖元添加到板子之後），但更好的方法是使用事件代理。通過事件委託，您可以將點擊處理程序綁定到#board元素，該元素不會被刪除並重新添加。但處理程序仍然會調用tile元素。

只要改變這一點：

$(".tile").on("click", function() {

此;

$("#board").on("click", '.tile', function() {

jsfiddle

注：在我的jsfiddle註釋掉調用洗牌瓷磚所以更容易完成遊戲。

來源

2015-04-25 21:14:17

因爲你在你的newBoard功能附加到.tile#board，你需要delegate the click event：

// check if tiles match using a temporary array 
$("#board").on("click", '.tile', function() { 
    ... 
});

Updated Pen

來源

2015-04-25 21:14:26 Und3rTow

我能得到它的工作，看到http://codepen.io/anon/pen/bdNpGK。

問題是，您只是將onClick函數添加到第一組卡。當您重新設置主板時，您將刪除所有舊卡，添加了新卡，但從未再次設置點擊功能。而不是onClick事件中的匿名函數，它現在每次調用重置時都會添加適當的點擊函數。

function newBoard() { 
    ... 

    $(".tile").on("click", onClick); 
} 



function onClick() { 
    ... 
}

來源

2015-04-25 21:16:49 lhoworko

使用$(document).on("click",".tile",function() {...});

http://jsfiddle.net/cnmzxL0a/

來源

2015-04-25 21:31:24 talkhabi

非常感謝您的所有答覆。此問題現已得到解決使用：

$（「＃板」）上（「點擊」， '.tile'，函數（）{ :)

。

來源

2015-04-26 10:32:23

遊戲不能正常工作的重置功能

回答

相關問題