Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Mar 2019
    Messaggi
    41

    [jQuery] sostituire elementi sulle griglie piccole

    Salve a tutti ho una pagina del gioco Ultimate Tic-Tac-Toe e quello che sto cercando di fare è se tramite JavaScript(jQuery) "X" o "O" vincono vengano sostituiti con una "X" o "O" grande e in caso di pareggio venga sostituito con il segno "-"(meno) grande invece di sovrapporli sulla griglia piccola ma non saprei come fare. Allego il codice della pagina e un'immagine per far capire quello che sto cercando di modificare/aggiungere ma non saprei come procedere perchè non sono esperto di programmazione web. Grazie per la cordialità.
    codice:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="user-scalable=no, shrink-to-fit=no, initial-scale=0.23, minimum-scale=0.23, maximum-scale=0.23">
        <title>Ultimate Tic-Tac-Toe</title>
        <script src="https://code.jquery.com/jquery-1.4.3.min.js"></script>
    
    <style type="text/css">
    * {font-family: Auto Digital; text-align: center; margin: 0;}
    body {text-align: center;}
    .reload {width: 120px; height: 40px; font-family: Auto Digital; font-size: 30px; color: #ffffff; background: #000000;}
    .btn-reset {width: 120px; height: 40px; font-family: Auto Digital; font-size: 30px; color: #ffffff; background: #ff0000;}
    .tic-tac-toe .scoreboard {margin: auto; text-align: center; font-size: 30px;}
    .tic-tac-toe .scoreboard .score {text-align: center; font-size: 80px;}
    .tic-tac-toe .scoreboard .score.X {color: #bb5700; background: #fdfc0c; border: 10px solid #bb5700;}
    .tic-tac-toe .scoreboard .score.O {color: #ffd400; background: #c30000; border: 10px solid #ffd400;}
    div {display: inline-block; *display: inline; *zoom: 1;}
    .grid {padding: 4px; border: 2px solid #000;}
    .current-grid {background: #1d1d1d;}
    .button {background: #00c1f6; border: 2px solid #000000; width: 80px; height: 80px; margin: 2px; text-align: center; vertical-align: middle;}
    .X-won {background: #fdfc0c;}
    .O-won {background: #c30000;}
    .no-win {background: #ccc;}
    .X-selected {background: #fdfc0c; border: 2px solid #bb5700;color: #bb5700; font-size: 82px; line-height: 82px;}
    .O-selected {background: #c30000; border: 2px solid #ffd400; color: #ffd400; font-size: 82px; line-height: 82px;}
    #game {left: 0px; right: 0px; width: 880px; min-width: 100%; display: inline-block; *display: inline; *zoom: 1;}
    </style>
    </head>
    <body>
            <h1>Ultimate Tic-Tac-Toe!</h1>
        <p>&nbsp;</p>
        <p><div class="tic-tac-toe">
                <table class="scoreboard">
                    <tbody><tr>
                        <td>Giocatore 1</td>
                        <td width="30px">&nbsp;</td>
                        <td>Giocatore 2</td>
                    </tr>
                    <tr>
                        <td class="score X">0</td>
                        <td> &nbsp; </td>
                        <td class="score O">0</td>
                    </tr>
                </tbody></table>
        </div></p>
        <p>&nbsp;</p>
        <p><button class="btn-reset">Reset</button>&nbsp;<button class="reload" onclick="location.reload(true);">Reload</button></p>
        
        <p>&nbsp;</p>
    <script>
    var isXTurn = true;
            var currentGrid = -1;
            
            var scores = {
                X: 0,
                O: 0
            },
            data = {};
            
            $('.btn-reset').click(function(){
          reset_btn = init();
        });
    
            $(function() {
                $('body');
                for (var i = 0; i < 9; i++) {
                    $('#game');
                    if (i % 3 == 2) {
                        $('#game');
                    }
                    for (var j = 0; j < 9; j++) {
                        $('#grid' + i);
                        if (j % 3 == 2) {
                            $('#grid' + i);
                        }
                    }
                }
                $('.button').click(function() {
                    var parent = $(this).parent();
                    var me = isXTurn ? 'X' : 'O';
    
                    if ($(this).is('.X-selected, .O-selected') || parent.is('.X-won, .O-won') ||
                        (currentGrid >= 0 && parent.attr('id') != 'grid' + currentGrid)) {
                        return;
                    }
                    $(this).addClass(me + '-selected').html(me);
                    if (checkForWin($(this), ('.' + me + '-selected'))) {
                        parent.addClass(me + '-won');
                        if (checkForWin(parent, ('.' + me + '-won'))) {
                            alert(me + ' vince la partita!');
                            scores[me]++;
                            updateScoreboard();
                            resetGame();
                            return;
                        }
                        else if ($('.grid.X-won, .grid.O-won, .grid.no-win').length == 9) {
                            alert('Pareggio!');
                            empty();
                            return;
                        }
                    }
                    else if (parent.children('.X-selected, .O-selected').length == 9) {
                        parent.addClass('no-win');
                    }
                    currentGrid = +($(this).attr('id').slice(-1));
                    $('.grid').removeClass('current-grid');
                    if ($('#grid' + currentGrid).is('.X-won, .O-won, .no-win')) {
                        currentGrid = -1;
                    }
                    else {
                        $('#grid' + currentGrid).addClass('current-grid');
                    }
                    isXTurn = !isXTurn;
                });
    
                function checkForWin(elem, match) {
                    var index = +(elem.attr('id').slice(-1));
                    var prefix = '#' + (elem.hasClass('button') ? elem.attr('id').slice(0, 8) : 'grid');
    
                    if (elem.nextUntil('br').add(elem.prevUntil('br')).filter(match).length == 2) {
                        return true;
                    }
    
                    if ($(prefix + (index % 3)).add($(prefix + (index % 3 + 3))).add($(prefix + (index % 3 + 6))).filter(match).length == 3) {
                        return true;
                    }
    
                    if ($(prefix + 0).add($(prefix + 4)).add($(prefix + 8)).filter(match).length == 3) {
                        return true;
                    }
                    if ($(prefix + 2).add($(prefix + 4)).add($(prefix + 6)).filter(match).length == 3) {
                        return true;
                    }
                    return false;
                }
            });
    
            function empty() {
                isXTurn = true;
                currentGrid = -1;
                $('div').removeClass('X-won O-won no-win current-grid X-selected O-selected');
                $('.button').empty();
                $('.turn').empty();
            data = {};
        }
            
            function resetGame() {
                isXTurn = true;
                currentGrid = -1;
                $('div').removeClass('X-won O-won no-win current-grid X-selected O-selected');
                $('.button').empty();
                $('.turn').empty();
            }
            
            function init() {
            empty();
            scores = {
                X: 0,
                O: 0
            };
            updateScoreboard();
        }
            
            function updateScoreboard() {
            $('.score.X').html(scores.X);
            $('.score.O').html(scores.O);
        }
    </script>
    
    
    <div id="game"><div class="grid" id="grid0"><div class="button" id="button0-0"></div><div class="button" id="button0-1"></div><div class="button" id="button0-2"></div><br><div class="button" id="button0-3"></div><div class="button" id="button0-4"></div><div class="button" id="button0-5"></div><br><div class="button" id="button0-6"></div><div class="button" id="button0-7"></div><div class="button" id="button0-8"></div><br></div><div class="grid" id="grid1"><div class="button" id="button1-0"></div><div class="button" id="button1-1"></div><div class="button" id="button1-2"></div><br><div class="button" id="button1-3"></div><div class="button" id="button1-4"></div><div class="button" id="button1-5"></div><br><div class="button" id="button1-6"></div><div class="button" id="button1-7"></div><div class="button" id="button1-8"></div><br></div><div class="grid" id="grid2"><div class="button" id="button2-0"></div><div class="button" id="button2-1"></div><div class="button" id="button2-2"></div><br><div class="button" id="button2-3"></div><div class="button" id="button2-4"></div><div class="button" id="button2-5"></div><br><div class="button" id="button2-6"></div><div class="button" id="button2-7"></div><div class="button" id="button2-8"></div><br></div><br><div class="grid" id="grid3"><div class="button" id="button3-0"></div><div class="button" id="button3-1"></div><div class="button" id="button3-2"></div><br><div class="button" id="button3-3"></div><div class="button" id="button3-4"></div><div class="button" id="button3-5"></div><br><div class="button" id="button3-6"></div><div class="button" id="button3-7"></div><div class="button" id="button3-8"></div><br></div><div class="grid" id="grid4"><div class="button" id="button4-0"></div><div class="button" id="button4-1"></div><div class="button" id="button4-2"></div><br><div class="button" id="button4-3"></div><div class="button" id="button4-4"></div><div class="button" id="button4-5"></div><br><div class="button" id="button4-6"></div><div class="button" id="button4-7"></div><div class="button" id="button4-8"></div><br></div><div class="grid" id="grid5"><div class="button" id="button5-0"></div><div class="button" id="button5-1"></div><div class="button" id="button5-2"></div><br><div class="button" id="button5-3"></div><div class="button" id="button5-4"></div><div class="button" id="button5-5"></div><br><div class="button" id="button5-6"></div><div class="button" id="button5-7"></div><div class="button" id="button5-8"></div><br></div><br><div class="grid" id="grid6"><div class="button" id="button6-0"></div><div class="button" id="button6-1"></div><div class="button" id="button6-2"></div><br><div class="button" id="button6-3"></div><div class="button" id="button6-4"></div><div class="button" id="button6-5"></div><br><div class="button" id="button6-6"></div><div class="button" id="button6-7"></div><div class="button" id="button6-8"></div><br></div><div class="grid" id="grid7"><div class="button" id="button7-0"></div><div class="button" id="button7-1"></div><div class="button" id="button7-2"></div><br><div class="button" id="button7-3"></div><div class="button" id="button7-4"></div><div class="button" id="button7-5"></div><br><div class="button" id="button7-6"></div><div class="button" id="button7-7"></div><div class="button" id="button7-8"></div><br></div><div class="grid" id="grid8"><div class="button" id="button8-0"></div><div class="button" id="button8-1"></div><div class="button" id="button8-2"></div><br><div class="button" id="button8-3"></div><div class="button" id="button8-4"></div><div class="button" id="button8-5"></div><br><div class="button" id="button8-6"></div><div class="button" id="button8-7"></div><div class="button" id="button8-8"></div><br></div><br></div>
    
    </body>
    
    </html>
    Immagini allegate Immagini allegate

  2. #2
    Utente di HTML.it
    Registrato dal
    Mar 2019
    Messaggi
    41
    Ho riprovato ma non saprei come fare per sostituire "X" o "O" quando vincono con una "X" o "O" grande sulle griglia piccola e in caso di pareggio venga sostituito con il segno - (meno) sulla griglia piccola. Spero che qualcuno mi può aiutare.

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.