2

小学生向けのスペルゲームを作りました。ゲームのタッチ イベントでクリック イベントを作成して、タブレットと互換性を持たせたいと考えています。1 つのプログラムが両方と互換性があるように、クリック イベントと一緒にそれらを配置する方法はありますか、それともタブレット バージョンを作成する必要がありますか?

ここに、例としてクリックイベントの1つのコードがあります

$('.drag').on('click', function(e) {
e.preventDefault();
if (animation) return;
animation = true;
setTimeout(function() {
    animation = false;
}, 700);
$(".minibutton").css('visibility', 'hidden');
$('.next').css('visibility', 'hidden');

var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);

if (target.length) {
    target.addClass("occupied");
    b.clone().addClass(
    b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
        background: "transparent",
        position: "absolute",
        top: currentPos.top,
        left: currentPos.left
    }).animate({
        top: targetPos.top,
        left: targetPos.left
    }, "slow", function() {
        $(this).css({
            top: 0,
            left: 0
        }).appendTo(target);

        var spellWord = $('.drop-box.spellword');
        if (!spellWord.filter(':not(.occupied)').length) {
            var wordIsCorrect = 0;
            spellWord.each(function() {
                if ($(this).data("letter") == $(this).find("div").data("letter")) {
                    wordIsCorrect++;
                }
            });

            if (spellWord.length == wordIsCorrect) {

                spellWord.addClass('wordglow2');
                $(right).val('Right!');
                $(right).show();
                success.play();
                $(wrong).hide();
                score.right++;
                score.attempts++;

                if (score.right == 3) {

                    $('.answers').css('visibility', 'visible');
                    $('.answers').html("Well done! </br> You correctly spelt " + score.right + ". </br> Keep it up.").show();
                    $('table').fadeOut(3000);
                    $('.right').hide();
                    $('.box-style2').hide();
                    $('.box-style').hide();
                    $('.picstyle').hide();
                    $('.play').hide();
                    $('.minibutton2').hide();
                    $("#mysoundclip").attr('src', listOfWords[rndWord].audio);
                    audio.stop();
                    $("#mypic").attr('src', listOfWords[rndWord].pic);
                    pic.hide();

                }

                setTimeout(function() {
                    jQuery('.minibutton').trigger('click');
                }, 1500);

                setTimeout(function() {
                    jQuery(right).hide();
                }, 1500);

            } else {

                //spellWord.addClass("wordglow4").css('color', 'transparent');
                $(wrong).val('Wrong!');
                $(wrong).show();
                failure.play();
                $(right).hide();
                score.wrong++;
                score.attempts++;

                if (score.wrong == 3) {

                    $(".minibutton").css('visibility', 'visible');
                    $('.next').css('visibility', 'visible');

                }

                $('.drop-box.spellword').animate({
                    'opacity': 1
                }, 1500, function() {
                    $(this).removeClass('wordglow4').removeClass('occupied').html('')
                });

                setTimeout(function() {
                    jQuery(wrong).hide();
                }, 1500);


            }
        }
    });

}

});

私はこれまでこれをやったことがないので、誰かが私を正しい方向に向けることができますか.

ここに役立つフィドルがあります（サウンド警告!!）http://jsfiddle.net/smilburn/7Y7A5/8/

4

1 に答える 1

0

タップ イベントを追加して、モバイル バージョンに jQuery Mobile を含めることができます。

$('.drag').on('click tap', function(e) {...}
于 2012-10-15T09:12:40.660 に答える