Ver las tres en raya en ventana emergente.
Este es el código exacto del documento que se muestra:
| <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Tic Tac Toe game</title> <link rel='stylesheet prefetch' href='http://getbootstrap.com/2.3.2/assets/css/bootstrap.css'> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="tic-tac-toe"> <div class="span3 new_span"> <div class="row"> <h1 class="span3">TRES EN RAYA</h1> <div class="span3"> <div class="input-prepend input-append"> <span class="add-on win_text">O ganó</span><strong id="o_win" class="win_times add-on">0</strong><span class="add-on">veces</span> </div> <div class="input-prepend input-append"> <span class="add-on win_text">X ganó</span><strong id="x_win" class="win_times add-on">0</strong><span class="add-on">veces</span> </div> </div> </div> <ul class="row" id="game"> <li id="one" class="btn span1" >+</li> <li id="two" class="btn span1">+</li> <li id="three" class="btn span1">+</li> <li id="four" class="btn span1">+</li> <li id="five" class="btn span1">+</li> <li id="six" class="btn span1">+</li> <li id="seven" class="btn span1">+</li> <li id="eight" class="btn span1">+</li> <li id="nine" class="btn span1">+</li> </ul> <div class="clr"> </div> <div class="row"><a href="#" id="reset" class="btn-success btn span3" >Reiniciar</a></div></div> </div> <script src='http://code.jquery.com/jquery-1.7.2.min.js'></script> <script src="js/index.js"></script> </body> </html> |
Este es el código del archivo .js
| // JavaScript Document $(document).ready(function() { var x = "x" var o = "o" var count = 0; var o_win = 0; var x_win = 0; $('#game li').click(function(){ if ($("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') || $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') || $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') || $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') || $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') || $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o')) { alert('O ha ganado el juego. Empezar uno nuevo') $("#game li").text("+"); $("#game li").removeClass('disable') $("#game li").removeClass('o') $("#game li").removeClass('x') $("#game li").removeClass('btn-primary') $("#game li").removeClass('btn-info') } else if ($("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') || $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') || $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') || $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') || $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') || $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x')) { alert('X ha ganado el juego. Empezar uno nuevo') $("#game li").text("+"); $("#game li").removeClass('disable') $("#game li").removeClass('o') $("#game li").removeClass('x') $("#game li").removeClass('btn-primary') $("#game li").removeClass('btn-info') } else if (count == 9) { alert('Nadie ha ganado. Empezará un nuevo juego.') $("#game li").text("+"); $("#game li").removeClass('disable') $("#game li").removeClass('o') $("#game li").removeClass('x') $("#game li").removeClass('btn-primary') $("#game li").removeClass('btn-info') count = 0 } else if ($(this).hasClass('disable')) { alert('Ya seleccionado') } else if (count%2 == 0) { count++ $(this).text(o) $(this).addClass('disable o btn-primary') if ($("#one").hasClass('o') && $("#two").hasClass('o') && $("#three").hasClass('o') || $("#four").hasClass('o') && $("#five").hasClass('o') && $("#six").hasClass('o') || $("#seven").hasClass('o') && $("#eight").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#four").hasClass('o') && $("#seven").hasClass('o') || $("#two").hasClass('o') && $("#five").hasClass('o') && $("#eight").hasClass('o') || $("#three").hasClass('o') && $("#six").hasClass('o') && $("#nine").hasClass('o') || $("#one").hasClass('o') && $("#five").hasClass('o') && $("#nine").hasClass('o') || $("#three").hasClass('o') && $("#five").hasClass('o') && $("#seven").hasClass('o')) { alert('O ganó') count = 0 o_win++ $('#o_win').text(o_win) } } else { count++ $(this).text(x) $(this).addClass('disable x btn-info') if ($("#one").hasClass('x') && $("#two").hasClass('x') && $("#three").hasClass('x') || $("#four").hasClass('x') && $("#five").hasClass('x') && $("#six").hasClass('x') || $("#seven").hasClass('x') && $("#eight").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#four").hasClass('x') && $("#seven").hasClass('x') || $("#two").hasClass('x') && $("#five").hasClass('x') && $("#eight").hasClass('x') || $("#three").hasClass('x') && $("#six").hasClass('x') && $("#nine").hasClass('x') || $("#one").hasClass('x') && $("#five").hasClass('x') && $("#nine").hasClass('x') || $("#three").hasClass('x') && $("#five").hasClass('x') && $("#seven").hasClass('x')) { alert('X ganó') count = 0 x_win++ $('#x_win').text(x_win) } } }); $("#reset").click(function () { $("#game li").text("+"); $("#game li").removeClass('disable') $("#game li").removeClass('o') $("#game li").removeClass('x') $("#game li").removeClass('btn-primary') $("#game li").removeClass('btn-info') count = 0 }); }); |
Ha sido obtenido de http://codepen.io/bananasimpicity/pen/reKcv
No hay comentarios:
Publicar un comentario