0

私は大学のプロジェクト用にシンプルな TicTacToe ゲームを作成しました。これは HTML と JavaScript を使用して動作します。デスクトップでは問題なく表示されますが、モバイルでは問題があります。モバイルでは、勝ったときに最終的な勝者のピースは表示されませんが、アラート ボックスなどの他のすべてのアイテムは表示されます。

http://stuffmadeby.me/test/tictactoe/このページを携帯電話のスマートフォンで表示する場合は、ここで試すことができます。

これを修正する方法はありますか？

PhoneGapを使用してこれをパッケージ化してシンプルなアプリにしたいので、デスクトップでは機能するがモバイルでは機能しないのは奇妙です。

    $(document).ready(function(e) {
    $('#messages').hide();
    var currentPlayer=1;
    square=new Array(3)
    square[0]=new Array(3);
    square[1]=new Array(3);
    square[2]=new Array(3);

    var Ximg = $('<img />').attr('src','images/x.png');
    var Oimg = $('<img />').attr('src','images/o.png');

    samego=false;
    endgame=false;

    $('.square').click(function() {
        samego=false;
        input=$(this).attr('id');
        arrayindex=input.split("");
        x=arrayindex[0];
        y=arrayindex[1];
            if(square[x][y]=='X'||square[x][y]=='O') {
                $('#messages').html("That square has already been filled! try again.");
                samego=true;
            } else {
                currentPlayer==1 ? square[x][y]='X' : square[x][y]='O';
                currentPlayer==1 ? $('#'+input).html('<img src="images/x.png"/>') :
                $('#'+input).html('<img src="images/o.png"/>');
            }
            checkStatus();
    }); /* ends .square click function */

    function checkStatus() {
        if(
            square[0][0]=='X'&&square[0][1]=='X'&&square[0][2]=='X'||
            square[0][0]=='X'&&square[1][1]=='X'&&square[2][2]=='X'||
            square[1][0]=='X'&&square[1][1]=='X'&&square[1][2]=='X'||
            square[2][0]=='X'&&square[2][1]=='X'&&square[2][2]=='X'||
            square[0][1]=='X'&&square[1][1]=='X'&&square[2][1]=='X'||
            square[2][0]=='X'&&square[1][1]=='X'&&square[0][2]=='X'||
            square[0][2]=='X'&&square[1][2]=='X'&&square[2][2]=='X'||
            square[0][0]=='X'&&square[1][0]=='X'&&square[2][0]=='X'
    )
    {
        $('#messages').show().html("Player 1 wins!");
        alert("Player 1 wins! Click to reset!");
        reinitialise();
        endgame=true;
    }
        if(
            square[0][0]=='O'&&square[0][1]=='O'&&square[0][2]=='O'||
            square[0][0]=='O'&&square[1][1]=='O'&&square[2][2]=='O'||
            square[1][0]=='O'&&square[1][1]=='O'&&square[1][2]=='O'||
            square[2][0]=='O'&&square[2][1]=='O'&&square[2][2]=='O'||
            square[0][1]=='O'&&square[1][1]=='O'&&square[2][1]=='O'||
            square[2][0]=='O'&&square[1][1]=='O'&&square[0][2]=='O'||
            square[0][2]=='O'&&square[1][2]=='O'&&square[2][2]=='O'||
            square[0][0]=='O'&&square[1][0]=='O'&&square[2][0]=='O'
    )
    {
        $('#messages').html("Player 2 wins!");
        alert("Player 2 wins! Click to reset!");
        reinitialise();
        endgame=true;
    }

    var filled=0;
    for(x=0;x<3;x++) {
        for(y=0;y<3;y++) {
            if(square[x][y]=='X'||square[x][y]=='O') {
                filled++;
            }
        }
    } /* ends var filled */

    if(!samego&&!endgame) {
        currentPlayer==1 ? currentPlayer=2 : currentPlayer=1;
    } /* ends if */

    if(filled==9) {
        $('#messages').html("It's a draw!");
        alert("It's a draw! Click to reset!");
        reinitialise();
    } /* ends filled==9 */

    endgame=false;
    $('#player').html('Current Player = Player '+currentPlayer);

    } /* ends function check status */

    function reinitialise() {
        $('#messages').hide();
        $('#messages').html('');    
        square[0][0]=''; $('#00').html('');
        square[0][1]=''; $('#01').html('');
        square[0][2]=''; $('#02').html('');
        square[1][0]=''; $('#10').html('');
        square[1][1]=''; $('#11').html('');
        square[1][2]=''; $('#12').html('');
        square[2][0]=''; $('#20').html('');
        square[2][1]=''; $('#21').html('');
        square[2][2]=''; $('#22').html('');
        currentPlayer=1;
    } /* ends function reintialise */

}); /* ends whole function */
4

0 に答える 0