javascript - jquery/Javascript 序列检查

Question

我正在制作一个 Javascript 游戏，其中的序列显示在网格上(8 个 Action ，网格总共有 12 个按钮)。用户必须重复该序列，最后我想比较两个序列并给出分数。目前我可以检测到按下了哪个按钮，但我不知道还能做什么

P.S:我想要实现的是将用户的选择保存在一个数组中，然后与“控制数组”进行比较，如果选择正确，则给出分数。

      <!-- 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

变量中需要有两件事:

• 用户尝试匹配的序列。
• 用户执行的点击次数

那么您只需比较这些即可。我假设您有某种方式知道用户何时完成(可能是一定数量的点击，或者可能是他们单击了特定按钮)，并且这是作为名为 timeToStop() 的函数实现的，该函数返回 bool 真/假值。

本质上，您只需继续收集点击次数，直到 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 = [];
    }
});