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>
No hay comentarios:
Publicar un comentario