0

我为一个大学项目制作了一个简单的井字游戏，它使用 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