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> </p> <p><div class="tic-tac-toe"> <table class="scoreboard"> <tbody><tr> <td>Giocatore 1</td> <td width="30px"> </td> <td>Giocatore 2</td> </tr> <tr> <td class="score X">0</td> <td> </td> <td class="score O">0</td> </tr> </tbody></table> </div></p> <p> </p> <p><button class="btn-reset">Reset</button> <button class="reload" onclick="location.reload(true);">Reload</button></p> <p> </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>
Rispondi quotando
