viernes, 1 de marzo de 2013

Juego de Tres en raya con Jquery


Juego del Tres en raya programado a partir de Jquery ...





Código CSS

#tablero
{
width: 300px;
height: 300px;
border: 1px solid #000000;
}
#tablero tr td
{
width: 100px;
height: 100px;
}


Código Javascript ...

$(function()
{
$(".cero, .uno, .dos, .tres, .cuatro, .cinco, .seis, .siete, .ocho").click(function()
{
$(".cero").text("2");
for(x=0; x <=8; x++)
{
cero=$("#tablero tr td:eq("+0+")").text();
uno=$("#tablero tr td:eq("+1+")").text();
dos=$("#tablero tr td:eq("+2+")").text();
tres=$("#tablero tr td:eq("+3+")").text();
cuatro=$("#tablero tr td:eq("+4+")").text();
cinco=$("#tablero tr td:eq("+5+")").text();
seis=$("#tablero tr td:eq("+6+")").text();
siete=$("#tablero tr td:eq("+7+")").text();
ocho=$("#tablero tr td:eq("+8+")").text();
if (cero == "2" && uno == "2" && dos == "2")
{
alert("has perdido");
return;
}
if (tres == "2" && cuatro == "2" && cinco == "2")
{
alert("has perdido");
return;
}
if (seis == "2" && siete == "2" && ocho == "2")
{
alert("has perdido");
return;
}
if (cero == "2" && cuatro == "2" && ocho == "2")
{
alert("has perdido");
return;
}
if (dos == "2" && cuatro == "2" &&  seis == "2")
{
alert("has perdido");
return;
}
if (cero == "2" && tres == "2" && seis == "2")
{
alert("has perdido");
return;
}
if (uno == "2" && cuatro == "2" && siete == "2")
{
alert("has perdido");
return;
}
if (dos == "2" && cinco == "2" && ocho == "2")
{
alert("has perdido");
return;
}
}
clase = $(this).attr("class");
if (clase != "seleccionada")
{
$(this).css({backgroundColor: "#4E457C", color: "#4E457C"}).removeClass(clase).addClass("seleccionada").text("1");
 }
if (clase == "uno")
{
clase_delete = $("#tablero tr td:eq("+4+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+4+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+7+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+7+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+2+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+2+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
}
}
}
if (clase == "dos")
{
clase_delete = $("#tablero tr td:eq("+8+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+8+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+4+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+4+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+6+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+6+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+7+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+7+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
}
}
}
}
if (clase == "tres")
{
clase_delete = $("#tablero tr td:eq("+5+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+5+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+4+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+4+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+6+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+6+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
}
}
}
if (clase == "cuatro")
{
clase_delete = $("#tablero tr td:eq("+6+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+6+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+8+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+8+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+2+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+2+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+1+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+1+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
}
}
}
}
if (clase == "cinco")
{
clase_delete = $("#tablero tr td:eq("+3+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+3+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+4+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+4+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+8+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+8+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+7+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+7+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
}
}
}
}
if (clase == "seis")
{
clase_delete = $("#tablero tr td:eq("+8+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+8+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+4+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+4+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+2+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+2+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+3+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+3+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+7+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+7+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
}
}
}
}
}
if (clase == "siete")
{
clase_delete = $("#tablero tr td:eq("+1+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+1+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+8+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+8+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+6+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+6+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+5+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+5+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
}
}
}
}
if (clase == "ocho")
{
clase_delete = $("#tablero tr td:eq("+2+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+2+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
else
{
clase_delete = $("#tablero tr td:eq("+6+")").attr("class");
if(clase_delete != "seleccionada")
{
$("#tablero tr td:eq("+6+")").css({backgroundColor: "#000000"}).removeClass(clase_delete).addClass("seleccionada").text("2");
}
}
}
});
});


Código HTML ...

<table id="tablero">
<tr>
<td class="cero" style="background-color: #000000;"></td><td class="uno"></td><td class="dos"></td>
</tr>
<tr>
<td class="tres"></td><td class="cuatro"></td><td class="cinco"></td>
</tr>
<tr>
<td class="seis"></td><td class="siete"></td><td class="ocho"></td>
</tr>
</table>