javascript - jquery/Javascript シーケンスチェック

Question

シーケンスがグリッドに表示される Javascript ゲームを作成しています (8 つの動きとグリッドには合計 12 個のボタンがあります)。ユーザーはそのシーケンスを繰り返す必要があり、最後に 2 つのシーケンスを比較してスコアを付けたいと考えています。現時点では、どのボタンが押されたかを検出できますが、他に何をすべきかわかりません

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>

score 1 · Accepted Answer

変数に必要なものは 2 つあります。

ユーザーが一致させようとしているシーケンス。
ユーザーが実行したクリック

次に、これらを比較するだけです。ユーザーの操作がいつ完了したか (特定の回数のクリックや特定のボタンのクリックなど) を知る何らかの方法があり、これが timeToStop() という関数として実装されていると仮定します。真/偽のブール値を返します。

基本的に、timeToStop() になるまでクリックを収集し続けてから、2 つの配列を調べて比較します。

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 = [];
    }
});

score 0 · Accepted Answer

クリック履歴を追跡したいだけの場合は、素晴らしい配列を作成して、そこにIDをプッシュすることをお勧めします。

例えば：

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

}):

score 0 · Accepted Answer

それがどれほど役立つかはわかりませんが、あなたが説明したことのデモをしようとしました. これがラフ案です...

jsフィドル

フィドルを見るときは、ブラウザコンソールを使用して、何が記録されているかについての詳細を確認してください。

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);
});

javascript - jquery/Javascript シーケンスチェック

3 に答える 3

jsフィドル

Related

Reference