6

現在、ゲームのデバイス（Samsung galaxy S2）でタッチスタート機能をテストしています。私はAndroidのphonegapでラップされたjavascriptとjqueryを使用してプログラミングしており、現在次のような問題があります。

  • タッチスタートイベント（たとえば、攻撃ボタンの「タッチスタート」イベントをトリガーしてJavaScriptを実行し、攻撃アクションを実行する）により、画面が一時的にぼやけてから1秒以内に通常の状態に戻り、画像がちらつくような画面のちらつきが発生します。ぎくしゃくする）。私はcss変換やトランジションを使用しておらず、単純なcssと画像だけを使用しています。

誰かが私と同じような問題に遭遇した場合は教えてください。それがハードウェアの問題であろうとタッチスタートの問題であろうと、私がその問題を解決できるのは少し途方に暮れています。

以下のナビゲーションコントロール（左、上、下、右のタッチスタートタップ）のサンプルJavascript：

if ('ontouchstart' in document.documentElement) {
        var left = document.getElementById('left');
        left.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var l_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var l_xy = l_oldCell.split('_');
            var l_x = l_xy[0];
            var l_y = l_xy[1];

            if(l_y == 1)
            {
                direction = "left";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var l_newCell = l_x + '_' + (parseInt(l_y) - 1);

            //  validate if next cell is empty
            if($('#' + l_newCell + ':has(".shadow")').val() != undefined
            || $('#' + l_newCell + ':has(".ally")').val() != undefined
            || $('#' + l_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "left";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + l_newCell).append($('#' + controlsPlayerChar));
            $('#' + l_oldCell + ' ' + '#' + controlsPlayerChar).remove();   

            //  set char direction to 'left' and set next footstep
            setDirection('left');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });

        var up = document.getElementById('up');
        up.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var u_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var u_xy = u_oldCell.split('_');
            var u_x = u_xy[0];
            var u_y = u_xy[1];

            if(u_x == 1)
            {
                direction = "up";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var u_newCell = (parseInt(u_x) - 1) + '_' + u_y;

            //  validate if next cell is empty
            if($('#' + u_newCell + ':has(".shadow")').val() != undefined
            || $('#' + u_newCell + ':has(".ally")').val() != undefined
            || $('#' + u_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "up";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + u_newCell).append($('#' + controlsPlayerChar));
            $('#' + u_oldCell + ' ' + '#' + controlsPlayerChar).remove();

            //  set char direction to 'up' and set next footstep
            setDirection('up');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });

        var down = document.getElementById('down');
        down.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var d_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var d_xy = d_oldCell.split('_');
            var d_x = d_xy[0];
            var d_y = d_xy[1];

            if(d_x == rows)
            {
                direction = "down";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var d_newCell = (parseInt(d_x) + 1) + '_' + d_y;
            //  validate if next cell is empty
            if($('#' + d_newCell + ':has(".shadow")').val() != undefined
            || $('#' + d_newCell + ':has(".ally")').val() != undefined
            || $('#' + d_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "down";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + d_newCell).append($('#' + controlsPlayerChar));
            $('#' + d_oldCell + ' ' + '#' + controlsPlayerChar).remove(); 

            //  set char direction to 'down' and set next footstep
            setDirection('down');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });

        var right = document.getElementById('right');
        right.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var r_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var r_xy = r_oldCell.split('_');
            var r_x = r_xy[0];
            var r_y = r_xy[1];
            if(r_y == cols)
            {
                direction = "right";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var r_newCell = r_x + '_' + (parseInt(r_y) + 1);

            //  validate if next cell is empty
            if($('#' + r_newCell + ':has(".shadow")').val() != undefined
            || $('#' + r_newCell + ':has(".ally")').val() != undefined
            || $('#' + r_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "right";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + r_newCell).append($('#' + controlsPlayerChar));
            $('#' + r_oldCell + ' ' + '#' + controlsPlayerChar).remove();

            //  set char direction to 'right' and set next footstep
            setDirection('right');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });
}

上記のスクリプトに関して何か問題があると思われる場合はお知らせください。タッチスタートイベントを追加する方法は、たとえば攻撃を開始したり、オプションメニューを起動したりする場合など、スクリプトの他の領域でも同じです。

4

3 に答える 3

1

これはタップハイライトのようです。

-webkit-tap-highlight-colorコントロールに CSS プロパティを適用してこの効果を無効にするか、*セレクターを使用してすべての要素でこれを無効にすることができます。

例えば：

.someelement {
    -webkit-tap-highlight-color: transparent;
}
于 2012-02-14T10:52:39.757 に答える
1

まず、イベントで preventDefault() を呼び出していることを確認してください。マウスイベントもターゲットにしている場合、タッチで発生する可能性があることに気付きました。それ以外の場合は、少し異なる方法でタッチ ハイライトを無効にします。試す：

 -webkit-tap-highlight-color: rgba(0,0,0,0);

ボタンのCSSで。

于 2012-02-16T00:10:01.697 に答える
1

translate3d 変換を使用しているときに、この問題に遭遇しました。

設定することで修正しました

* { -webkit-transform: translate3d(0,0,0,); }

すべての要素が 3d 空間用に初期化されるように

于 2012-02-15T14:09:31.870 に答える