1

我正在编写一个简单的记忆游戏，并且需要使其可与鼠标和键盘一起使用。我可以为箭头键构建监听器以便在卡片网格中移动，但我不能让 Enter 键事件模拟​​启动 openCard 函数的“单击”事件。这是代码：

-HTML（这基本上是卡片网格）

<div id="game_container">
        <div id="game_board">
            <div id="card1" class="browsable colorcard firstinline"><div class="colour"></div></div>
            <div id="card2" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card3" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card4" class="browsable colorcard lastinline"><div class="colour"></div></div>
            <div id="card5" class="browsable colorcard firstinline"><div class="colour"></div></div>
            <div id="card6" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card7" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card8" class="browsable colorcard lastinline"><div class="colour"></div></div>
            <div id="card9" class="browsable colorcard firstinline"><div class="colour"></div></div>
            <div id="card10" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card11" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card12" class="browsable colorcard lastinline"><div class="colour"></div></div>
            <div id="card13" class="browsable colorcard firstinline"><div class="colour"></div></div>
            <div id="card14" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card15" class="browsable colorcard"><div class="colour"></div></div>
            <div id="card16" class="browsable colorcard lastinline"><div class="colour"></div></div>                
            <div class="fixfloat"></div>
            <div id="msg"></div>
        </div>

这是jQuery部分：

$(document).ready(function() {

$(".colour").hide();
$("#game_board div").click(openCard);
$(".browsable:first").addClass("selected");

shuffle();

$(document).keydown(function(e) {
    var cur_idx = $(".browsable").index($(".selected"));
    var max_idx = $(".browsable").length - 1;
    var row_length = 4;
    switch (e.keyCode) {
        case 13:
            // Perform some action when enter is placed
            // HERE should I define what happens when I press ENTER
            break;
        case 37:
            // Navigate left
            if (cur_idx === 0) {
                var next_idx = 0;
            } else {
                var next_idx = cur_idx - 1;
            }
            break;
        case 38:
            // Navigate up
            if ((cur_idx - row_length) <= 0) {
                var next_idx = 0;
            } else {
                var next_idx = (cur_idx - row_length);
            }
            break;
        case 39:
            // Navigate right
            if (cur_idx === max_idx) {
                var next_idx = cur_idx;
            } else {
                var next_idx = cur_idx + 1;
            }
            break;
        case 40:
            // Navigate down
            if ((cur_idx + row_length) >= max_idx) {
                var next_idx = max_idx;
            } else {
                var next_idx = (cur_idx + row_length);
            }
            break;
    }
    if (typeof next_idx !== 'undefined') {
        $(".browsable.selected").removeClass("selected");
        $(".browsable").eq(next_idx).addClass("selected");
    }
});

function openCard() {

    id = $(this).attr("id");

    if ($("#" + id + " .colour").is(":hidden")) {
        $("#game_board div").unbind("click", openCard);

        $("#" + id + " .colour").slideToggle('fast');

        if (coloropened === "") {
            boxopened = id;
            coloropened = $("#" + id + " .colour").css("background-color");
            setTimeout(function() {
                $("#game_board div").bind("click", openCard);
            }, 300);
        } else {
            currentopened = $("#" + id + " .colour").css("background-color");
            if (coloropened !== currentopened) {
                // close again

                setTimeout(function() {
                    $("#" + id + " .colour").fadeOut(1000);
                    $("#" + boxopened + " .colour").fadeOut(1000);
                    boxopened = "";
                    coloropened = "";
                }, 400);
                points--;
                $("#points").html("" + points);
            } else {
                // found
                $("#" + boxopened + ".colorcard").css('visibility', 'hidden');
                $("#" + id + ".colorcard").css('visibility', 'hidden');
                found++;
                points++;
                boxopened = "";
                coloropened = "";
                $("#points").html("" + points);
            }
            setTimeout(function() {
                $("#game_board div").bind("click", openCard);
            }, 400);
        }

        count++;
        $("#count").html("" + count);

        if (found === 8) {
            $("#msg").show();
        }
    }
}

$('#restart_button').click(function() {
    resetGame();
});

});

谢谢！

4

1 回答 1

0

尝试触发来调用点击事件.... 也插入 Keycode 尝试哪个.... 这将适用于捕获Enter键事件：

$(document).keypress(function(e) {
    if(e.which == 13) {
        $("#game_board div").trigger('click');
    }
});
于 2013-09-21T03:56:33.457 回答