jQuery/Javascript序列檢查

Question

我正在製作一個Javascript遊戲，其中一個序列顯示在網格上（8次移動，網格總共有12個按鈕）。用戶必須重複該序列，最後我想比較兩個序列並給出分數。此刻我可以檢測到哪個按鈕被按下，但我不知道還有什麼要做

PS：我想要實現的是將用戶的選擇保存在數組中，然後與「控件陣列「如果選擇是正確的，給一個分數。

 <!-- Game --> 
    <div data-role="page" id="page2"> 
     <div id="header" data-theme="a" data-role="header"> 
      <a id="back" data-role="button" data-transition="flip" href="#page1" data-icon="back" data-iconpos="left" class="ui-btn-left"> 
       Back 
      </a> 
      <a data-role="button" href="#page1" data-icon="star" data-iconpos="left" class="ui-btn-right"> 
       Score 
      </a> 
      <h3 id="title"> 
       Salsa-App 
      </h3> 
     </div> 
     <div data-role="content"> 
      <div id="grid" class="ui-grid-c"> 
       <div class="ui-block-a"> 
        <a id="a1" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom"> 
         A1 
        </a> 
       </div> 
       <div class="ui-block-b"> 
        <a id="a2" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom"> 
         A2 
        </a> 
       </div> 
       <div class="ui-block-c"> 
        <a id="a3" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom"> 
         A3 
        </a> 
       </div> 
       <div class="ui-block-d"> 
        <a id="a4" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom"> 
         A4 
        </a> 
       </div> 
       <div class="ui-block-a"> 
        <a id="b1" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom"> 
         B1 
        </a> 
       </div> 
       <div class="ui-block-b"> 
        <a id="b2" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom"> 
         B2 
        </a> 
       </div> 
       <div class="ui-block-c"> 
        <a id="b3" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom"> 
         B3 
        </a> 
       </div> 
       <div class="ui-block-d"> 
        <a id="b4" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom"> 
         B4 
        </a> 
       </div> 
       <div class="ui-block-a"> 
        <a id="c1" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom"> 
         C1 
        </a> 
       </div> 
       <div class="ui-block-b"> 
        <a id="c2" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom"> 
         C2 
        </a> 
       </div> 
       <div class="ui-block-c"> 
        <a id="c3" data-role="button" data-transition="flow" href="#page1" data-icon="star" data-iconpos="bottom"> 
         C3 
        </a> 
       </div> 
       <div class="ui-block-d"> 
        <a id="c4" data-role="button" href="#page1" data-icon="star" data-iconpos="bottom"> 
         C4 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <script>   
     //App custom javascript        
      $(document).ready(function() {     
       $('a[data-role="button"]').click(function(){ 
       var whichButton; 
       whichButton = $(this).attr("id"); 

       alert(whichButton); 
        });   
       }); 

    </script>    

Answer 1

我不知道它有多大的幫助，但我試圖做一個你所描述的演示。這裏是草稿...

jsFiddle

請記住，當你看到小提琴，使用瀏覽器控制檯上被記錄一個多小的更多信息。

var blox = $(".ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d"), 
    tmrGame, 
    curPattern = new Array(), 
    usrPattern = new Array(), 
    aniTime = 1000, 
    clkCount = 0, 
    total=0; 

function gameOn(i) { 
    if (i == 0) { 
     curPattern = new Array(); 
     usrPattern = new Array(); 
    }; 
    if (i < 8) { 
     var randI = Math.floor(Math.random()*12); 
      block = $(blox[randI]); 
     curPattern.push(block.children("a").prop("id")); 
     block.addClass("highlight") 
      .animate({ opacity: 0 }, aniTime, 'linear', function(e) { 
      $(this).removeClass("highlight").css("opacity", 1); 
     }); 
     i++; 
     tmrGame = setTimeout(function() { gameOn(i); }, aniTime+100); 
    } 
    else { 
     $(document).css("cursor", "default"); 
     blox.css("cursor", "pointer"); 
     console.log(curPattern); 
     blox.on("click", btnClickEvent); 
     clearTimeout(tmrGame); 
    }; 
}; 

tmrGame = setTimeout(function() { $(document).css("cursor", "wait"); blox.css("cursor", "wait"); gameOn(0); }); 

function btnClickEvent() { 
    var block = $(this); 
    if (clkCount < 8) { 
     usrPattern.push(block.children("a").prop("id")); 
     clkCount++; 
    }; 

    if (clkCount == 8) { 
     blox.off("click", btnClickEvent); 
     total=0; 
     for(x in curPattern) { 
      if (curPattern[x] == usrPattern[x]) total++; 
     }; 
     var perc = ((total/8)*100)+"%"; 
     console.log(usrPattern, perc); 
     $("#score").text(perc); 
    }; 
}; 

$("#restart").click(function(e) { 
    clkCount = 0; 
    clearTimeout(tmrGame); 
    blox.stop().css("opacity", 1); 
    $("#score").text("00%"); 
    tmrGame = setTimeout(function() { $(document).css("cursor", "wait"); blox.css("cursor", "wait"); gameOn(0); }, 1000); 
}); 

Answer 2

如果你只是想跟蹤點擊歷史，我建議你只是一個偉大的數組，並開始在那裏推送ID。

E.g：

var history = []; 
$('a').click(function(){ 
    history.push($(this).id 

}): 

Answer 3

這裏你必須變量兩件事情：

• 用戶嘗試匹配序列。
• 的點擊次數爲用戶進行

然後你只需要比較這些。我假定你有一些知道用戶何時完成的方式（可能是一定數量的點擊，或者他們點擊了特定的按鈕），並且這是作爲一個函數timeToStop（）實現的，它返回一個布爾值true/false值。

本質上，你只是不斷收集點擊，直到它是timeToStop（），然後你通過並比較兩個數組。

sequence = ['a1','a4','c1','a1','a3','b1','b4','c4'];  //in the real game, you'd do this dynamically somehow 
userClicks = []; 

$('a[data-role="button"]').click(function(){ 
    var whichButton = $(this).attr("id"); 
    userClicks.push(whichButton); 

    if (timeToStop()) {     
     var errorStep = -1; 
     for(int i = 0; i < sequence.length; i++) { 
      if (sequence[i] != userClicks[i]) { 
       errorStep = i; 
       break; 
      } 
     } 
     if (errorStep >= 0) { 
      alert("Sorry, you messed up at step " + (errorStep + 1) + "!"); 
     } else { 
      alert("Congratulations - you nailed it!"); 
     } 
     //Reset for the next round (if you're not reloading the page) 
     sequence = [];  //define new sequence (somehow?) 
     userClicks = []; 
    } 
});