jueves, 10 de marzo de 2016

Juego de las Tres en Raya (2)

Intentando resolver el problema del no funcionamiento en el iOS, he encontrado este otro juego de tres en raya.



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">&nbsp;</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