Dynamic crossword with javascript 2 players

dynamic crossword with javascript for 2 players with arrays plus css interface

long ago in the university I placed a project in which, had to register 2 players, in a form with which they should validate their fields name, surname etc that were not empty, every time a player was registered should be inserted in an array, when it reached 2 players, an iframe of html was sent to load the array with the 2 players, also with javascript it was necessary to know who started first, who started playing which was taken as the 1 position of the array, who started and placed in a javascript variable called turn that will start from 0.

an html table is loaded which has an id in its td which will recognize in what position it is, but this table will dynamically load it from script, the rows and columns will be created alone from an array, square as an array and with jquery ira creating the possible rows.

html code:




<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
license to https://www.mbajava.com/
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/style2.css">
          <link rel="stylesheet" href="css/menu.css">
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="js/crucigrama.js"></script>

       
      
    </head>
    <body>



        <!--navegacion-->
     
        <ul>
            <li><a href="#home" id="jugador1">Jugador1</a></li>
            <li><a href="#news" id="jugador2">Jugador2</a></li>
            <li style="float:right" >
                <a class="active2" href="index.html" id="cerrar_seccion">Salir</a></li>
            <li style="float:right"><a class="active3" href="#" id="turno">Turno</a></li>

        </ul>

        <!--navegacion-->


        <div id="puzzle_container" style=" background-color: #fff">
            <table id="puzzle">
            </table>
        </div>

        <div id="hints_container" style=" text-align: center  
             ;background-image: url('img/fondoblanco.jpg');">
            <h3>Vertical</h3>
            <div id="vertical_hints_container">
                <div id="vertical_hints"></div>  
            </div>
            <h3>Horizontal</h3>
            <div id="horizontal_hints_container">
                <div id="horizontal_hints">

                </div>  
            </div>




        </div>




        <div id="buttons_container">

         

            <div id="ensayo" style=" background-color: lavenderblush; font-style: normal; font-family: fantasy; font-size: 14px"></div>
        </div>
        <script>
            // tell the embed parent frame the height of the content
            if (window.parent && window.parent.parent) {
                window.parent.parent.postMessage(["resultsFrame", {
                        height: document.body.getBoundingClientRect().height,
                        slug: "7arnuq3y"
                    }], "*");
            }

            // always overwrite window.name, in case users try to set it manually
            window.name = "result";

        </script>
    </body>




</html>

Now let's load the first style:


<link rel="stylesheet" href="css/style.css">

First style code:


*, *:before, *:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
  background: #c1bdba;
  font-family: 'Titillium Web', sans-serif;
}

a {
  text-decoration: none;
  color: #1ab188;
  transition: .5s ease;
}
a:hover {
  color: #179b77;
}

.form {
  background: rgba(19, 35, 47, 0.9);
  padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}

.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}
.tab-group:after {
  content: "";
  display: table;
  clear: both;
}
.tab-group li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  transition: .5s ease;
}
.tab-group li a:hover {
  background: #179b77;
  color: #ffffff;
}
.tab-group .active a {
  background: #1ab188;
  color: #ffffff;
}

.tab-content > div:last-child {
  display: none;
}

h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}

label {
  position: absolute;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}
label .req {
  margin: 2px;
  color: #1ab188;
}

label.active {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  left: 2px;
  font-size: 14px;
}
label.active .req {
  opacity: 0;
}

label.highlight {
  color: #ffffff;
}

input, textarea {
  font-size: 22px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #1ab188;
}

textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}

.field-wrap {
  position: relative;
  margin-bottom: 40px;
}

.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}

.button {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #1ab188;
  color: #ffffff;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}
.button:hover, .button:focus {
  background: #179b77;
}

.button-block {
  display: block;
  width: 100%;
}

.forgot {
  margin-top: -20px;
  text-align: right;
}

With the previous style we take care of the personalization of the body of the html buttons etc. now we continue with the 2 style that is in charge of the appearance of the crossword puzzle, like the edges, the frames, the turn changes the assigned turn, the next turn of the player etc.


<link rel="stylesheet" href="css/style2.css">


body {

                background-image: url("../img/mbajava.jpg");
                background-color: #ee6e73;
            }
            #puzzle {
                width:100%;
                margin: 0;
                padding: 10px;
                border: 1px solid black;
            }

            .square{
                width:50px;
                height:50px;
                margin: 0;
                padding: 0;
                border-collapse: collapse;
                position: relative;
            }

            .empty{
                background-color:black;
            }

            .letter{
                /* border: 1px solid black;
                 text-align: center;
                 cursor: pointer;*/

                border: 1px solid #000000;
                background: transparent;
                position: relative;
                z-index: 100;
                text-align: center;
                font-size: 20px;
                font-weight: bold;
                text-transform: uppercase;
                cursor: pointer;



            }

            #puzzle_container{
                float: left;
                /* width:50%*/
                height: 50%;
            }

            #hints_container{
                float: left;
                /*  width:50%*/
                height: 50%;
                margin-left: 25px;
                border-top-style: dotted;
                border-right-style: solid;
                border-bottom-style: dotted;
                border-left-style: solid;
            }

            #buttons_container{
                clear: both;
                padding-top: 20px;
                margin-left: 50px;
            }

            .active{
                border-color: red;
            }

            .question_number{
                position: absolute;
                font-size: 12px;
                color: grey;
                left: 3px;
                top: 3px;
            }

            td{
                position:relative;
            }

now we continue with the style of the menu that is the one at the top of the game:


ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #333;
            }

            li {
                float: left;
            }

            li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

            /* Change the link color to #111 (black) on hover */
            li a:hover {
                background-color: #111;
            } 

            .active {
                background-color: #4CAF50;
            }

            .active2 {
                background-color: #FF1744;
            }
            .active3 {
                background-color: #4CAF50;
            }

for now let's finish with the styles we keep loading jquery:


<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

for jquery we use version 1.8.3 we can upload online:


<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>

and finally we put my crossword script that is responsible for all of arming the crossword from 0, is dynamic is responsible for the cells and the search for the letter and word if it is correct to find the winner of both the word and the total of the crossword:


var turno = 0;
            var puntaje_asignado = 500;
            var jugadores = new Array();
            var puntaje_jugador1 = new Array();
            var puntaje_jugador2 = new Array();
            var respuestas_ya_realizadas = new Array();


//jugadores=parent.parent.get_array_username();


          jugadores.push("mbajava");
           jugadores.push("andres");

//alert(jugadores);

            $(window).load(function () {



                var grid = [
                    [0, 0, 0, 0, '1', 0, 0, 0, 0, 0, 0, '7', 0, 0, 0],
                    [0, 0, 0, 0, '1', 0, 0, 0, 0, 0, '8', '7,8', '8', '8', 0],
                    [0, 0, 0, 0, '1', 0, '2', 0, 0, 0, 0, '7', 0, 0, 0],
                    [0, '3', '3', '3', '3,1', '3', '3,2', '3', '3', '3,4', 0, '7', 0, 0, '10'],
                    [0, 0, 0, 0, 0, 0, '2', 0, 0, '4', 0, '7', 0, 0, '10'],
                    [0, 0, 0, 0, 0, 0, '2', 0, 0, '4', 0, '7', 0, 0, '10'],
                    [0, 0, '5', '5', '5', '5', '5,2', '5', 0, '4', 0, '7', 0, 0, '10'],
                    [0, 0, 0, 0, 0, 0, '2', 0, 0, '4', 0, '7', 0, 0, '10'],
                    [0, 0, 0, 0, 0, 0, '2', 0, 0, 0, 0, '7', 0, 0, '10'],
                    ['6', '6', '6', '6', '6', '6', '6,2', 0, 0, 0, 0, '9,7', '9', '9', '9,10'],
                    [0, 0, 0, 0, 0, 0, '2', 0, 0, 0, 0, 0, 0, 0, '10'],
                    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, '10'],
                    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, '10'],
                    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
                ];

//alert(grid[3][4]);
                var preguntas = ["producto colombiano",
                    "capital de caldas",
                    "Forma de comunicarse con la mente",
                    "congregacion a dioses",
                    "1 de los 7 pecados capitales",
                    "compañía francesa fabricante de ropa ",
                    "cuarto",
                    "animal con 7 vidas",
                    "entidad que estudia el espacio",
                    "máquina digital que lee <br>y realiza operaciones para convertirlos en datos. "

                ];

                var repuestas = ["cafe",
                    "manizales",
                    "telepatia",
                    "altar",
                    "pereza",
                    "lacoste",
                    "habitacion",
                    "gato",
                    "nasa",
                    "computador"
                ];

                //Dibuja grid
                $.each(grid, function (i) {
                    var row = $('<tr></tr>');
                    $.each(this, function (j) {
                        if (this == 0) {
                            $(row).append('<td class="square empty"></td>');
                        } else {
                            var question_number = String(grid[i][j]).split(",");
                            // console.log("i" + i + " j" + j + "  question" + question_number)

                            var starting_number = '';
                            var question_number_span = '';

                            for (var k = 0; k < question_number.length; k++) {
                                var direction = saber_direccion(question_number[k]);
                                var startpos = get_empieza_en_la_posicion(question_number[k], direction);

                                if (direction == "horizontal" && startpos[0] == i && startpos[1] == j) {
                                    starting_number += question_number[k] + ",";

                                } else if (direction == "vertical" && startpos[0] == j && startpos[1] == i) {
                                    starting_number += question_number[k] + ",";
                                }

                            }
                            if (starting_number != "") {
                                question_number_span = '<span class="question_number">' + starting_number.replace(/(^,)|(,$)/g, "") + '</span>';
                            }
                            var postablai = i + 1;
                            var postablaj = j + 1;
                            $(row).append('<td>' + question_number_span + '<div class="square letter" id="' + postablai + '_' + postablaj + '" data-number="' + this + '" contenteditable="true" onclick="tomar_celda('' + postablai + '_' + postablaj + '')"></div></td>');
                        }
                    });
                    $("#puzzle").append(row);
                });

                //Draw hints
                var vertical_hints = $('<div id="vertical_hints"></div>');
                var horizontal_hints = $('<div id="horizontal_hints"></div>');
                $.each(preguntas, function (index) {

                    var direction = saber_direccion(index + 1);

                    if (direction == "horizontal") {
                        $(horizontal_hints).append('<div class="hint"><b>' + (index + 1) + '</b>.-' + preguntas[index] + '</hint>');
                    } else if (direction == "vertical") {
                        $(vertical_hints).append('<div class="hint"><b>' + (index + 1) + '</b>.-' + preguntas[index] + '</hint>');
                    }
                });
                $("#vertical_hints_container").append(vertical_hints);
                $("#horizontal_hints_container").append(horizontal_hints);


                $(".letter").keyup(function () {

                    var this_text = $(this).text();

                    if (this_text.length > 1) {
                        $(this).text(this_text.slice(0, 1));

                    }

                    if (this_text.length > 0) {
                        console.log("coloco una letra" + this_text);
                        cheakeamos_letra_por_letra();
                        miramos_si_gano();

                    }
                });


                $(".letter").click(function () {

                    //  document.execCommand('selectAll', false, null);

                    $(".letter").removeClass("active");
                    $(this).addClass("active");

                    $(".hint").css("color", "initial");

                    var question_numbers = String($(this).data("number")).split(",");

                    //alert("ss"+this.id);
                    $.each(question_numbers, function () {
                        //    alert("el this"+"#hints .hint:nth-child(" + this + ")");
                        //  $("#hints .hint:nth-child(" + this + ")").css("color", "yellow");
                    });
                });



                function cambia_turno() {
                    if (turno === 0) {
                        turno = 1;


                    } else {
                        turno = 0;
                    }
                    $("#turno").text("!!turno para :" + jugadores[turno]);


                    //efectos jquery


                    animacion_jquery("#turno");
                    //efectos jquery

                }


                function animacion_jquery(elid) {
                    $(elid).fadeTo("normal", 0.2, function () {
                        // función callback
                        $(elid).removeClass("active3").addClass("active2");
                    });

                    $(elid).fadeTo("normal", 1.0, function () {
                        $(elid).removeClass("active2").addClass("active3");
                    });


                    $(elid).animate({left: '+=150'}, "slow");
                    $(elid).animate({top: '+=150'}, "slow");
                    $(elid).animate({left: '-=150'}, "slow");
                    $(elid).animate({top: '-=150'}, "slow");

                }

                $("#solve").click(function () {
                    var contador = 0;

                    if ($(".letter.active").length === 0)
                        return;

                    var question_numbers = String($(".letter.active").data("number")).split(",");
                    $.each(question_numbers, function () {
                        // var separar_letras = question_numbers.split("");
                        var question_numbers2 = question_numbers[contador];

                        contador++;
                        //fillAnswer(this) ;

                        console.log("evaluamos la pregunta" + question_numbers2);
                        if (evaluar_respuesta(this) === 1) {

                            if (respuestas_ya_realizadas.indexOf(question_numbers2) !== -1) {
                                console.log("ya respondistes la pregunta" + question_numbers2);


                            } else {
                                respuestas_ya_realizadas.push(question_numbers2);
                                console.log("respuesta correcta la agregamos a la lista" + question_numbers2 + " contador" + contador);
                                agregamos_puntaje();


                            }
                            // respuestas_ya_realizadas.push(question_numbers);
                            //   alert("respuesta correcta" + contador);
                        } else {
                            console.log("respuesta incorrecta seguimos contador:" + contador + " pregunta:" + question_numbers2);

                        }

                        console.log("respuestas ya realizadas array es:" + respuestas_ya_realizadas);
                    });




                });

                function el_ganador_del_juego() {
                    if (respuestas_ya_realizadas.length === repuestas.length) {
                        if(sum(puntaje_jugador1)>sum(puntaje_jugador2)){
                        alert("se acabo el juego el ganador es:"+jugadores[0]);     
                            
                        } else if(sum(puntaje_jugador2)>sum(puntaje_jugador1)){
                        alert("se acabo el juego el ganador es:"+jugadores[1]);     
                            
                        }else{
                      alert("se acabo el juego hubo un empate");        
                            
                        }                      
                    } else {
                        //alert("no se ha terminado el juego"+respuestas_ya_realizadas.length
                            //    +" y respuestas"+repuestas.length);

                    }
                }

                function miramos_si_gano() {
                    var contador = 0;

                    if ($(".letter.active").length === 0)
                        return;

                    var question_numbers = String($(".letter.active").data("number")).split(",");
                    $.each(question_numbers, function () {
                        // var separar_letras = question_numbers.split("");
                        var question_numbers2 = question_numbers[contador];

                        contador++;
                        //fillAnswer(this) ;

                        console.log("evaluamos la pregunta" + question_numbers2);
                        if (evaluar_respuesta(this) === 1) {

                            if (respuestas_ya_realizadas.indexOf(question_numbers2) !== -1) {
                                console.log("ya respondistes la pregunta" + question_numbers2);


                            } else {
                                respuestas_ya_realizadas.push(question_numbers2);
                                console.log("respuesta correcta la agregamos a la lista" + question_numbers2 + " contador" + contador);
                                agregamos_puntaje();
                                el_ganador_del_juego();
                            }
                            // respuestas_ya_realizadas.push(question_numbers);
                            //   alert("respuesta correcta" + contador);
                        } else {
                            console.log("respuesta incorrecta seguimos contador:" + contador + " pregunta:" + question_numbers2);

                        }

                        console.log("respuestas ya realizadas array es:" + respuestas_ya_realizadas);
                    });

                }

                function agregamos_puntaje() {
                    if (turno === 0) {
                        puntaje_jugador1.push(puntaje_asignado);
                        animacion_jquery("#jugador1");
                    } else {
                        puntaje_jugador2.push(puntaje_asignado);
                        animacion_jquery("#jugador2");

                    }
                    enviamos_puntaje_a_la_interfaz();
                }

                function enviamos_puntaje_a_la_interfaz() {

                    $("#jugador1").text(jugadores[0] + ":" + sum(puntaje_jugador1));
                    $("#jugador2").text(jugadores[1] + ":" + sum(puntaje_jugador2));
                    $("#jugador1").removeClass("active3");
                    $("#jugador2").removeClass("active3");

                }

                function sum(array) {
                    var acum = 0;
                    for (var i = 0; i < array.length; i++) {
                        acum = acum + array[i];
                    }
                    return acum;
                }

                $("#check").click(function () {
                    // $("#puzzle td div").css("color", "initial");
                    for (var i = 0; i < repuestas.length; i++) {
                        comprobar_respuesta(i + 1);

                    }
                });

                function cheakeamos_letra_por_letra() {
                    for (var i = 0; i < repuestas.length; i++) {
                        comprobar_respuesta(i + 1);

                    }
                }




                function evaluar_respuesta(numero_pregunta) {

                    var bandera = 1;

                    var question_answer = repuestas[numero_pregunta - 1];
                    var la_direccion_a_donde_va = saber_direccion(numero_pregunta);
                    var empieza_en_la_posicion = get_empieza_en_la_posicion(numero_pregunta, la_direccion_a_donde_va);
                    var answer_letters = question_answer.split("");


                    if (la_direccion_a_donde_va === "horizontal") {
                        for (var i = 0; i < answer_letters.length; i++) {

                            if (evaluar_respuesta_ayuda($("#puzzle tr:nth-child(" + (empieza_en_la_posicion[0] + 1) + ") td:nth-child(" +
                                    (empieza_en_la_posicion[1] + 1 + i) + ") div").text(), answer_letters[i]) === 0) {
                                bandera = 0;

                            }

                        }

                    } else if (la_direccion_a_donde_va === "vertical") {
                        for (var i = 0; i < answer_letters.length; i++) {


                            if (evaluar_respuesta_ayuda($("#puzzle tr:nth-child(" + (empieza_en_la_posicion[1] + 1 + i) + ") td:nth-child(" +
                                    (empieza_en_la_posicion[0] + 1) + ") div").text(), answer_letters[i]) === 0) {//si al recorrer la letra de la tabla en esa parte es diferente a la letra de la respuesta no ha ganado

                                bandera = 0;
                            }

                        }

                    }
                    return bandera;
                }

                function evaluar_respuesta_ayuda(lo_que_esta_en_la_casilla, la_respuesta) {
                    // alert("lo que llega es:" + lo_que_esta_en_la_casilla + "   " + la_respuesta);
                    if (lo_que_esta_en_la_casilla === la_respuesta)
                    {
                        //     alert("si esta bien");
                        return 1;
                    } else {
                        //   alert("esta mal")
                        return 0;
                    }
                }



//borramos
                function fillAnswer(question_number) {
                    //  $("#puzzle td div").css("color", "initial");

                    var question_answer = repuestas[question_number - 1];
                    var direction = saber_direccion(question_number);
                    var startpos = get_empieza_en_la_posicion(question_number, direction);
                    var answer_letters = question_answer.split("");

                    if (direction === "horizontal") {
                        for (var i = 0; i < answer_letters.length; i++) {
                            $("#puzzle tr:nth-child(" + (startpos[0] + 1) + ") td:nth-child(" + (startpos[1] + 1 + i) + ") div").text(answer_letters[i]);
                        }

                    } else if (direction === "vertical") {
                        for (var i = 0; i < answer_letters.length; i++) {
                            $("#puzzle tr:nth-child(" + (startpos[1] + 1 + i) + ") td:nth-child(" + (startpos[0] + 1) + ") div").text(answer_letters[i]);
                        }

                    }
                }
//borramos


                function saber_direccion(numero_de_la_pregunta) {
                    var dire = "vertical";
                    console.log("numero pregunta:" + numero_de_la_pregunta);
                    //recorremos la matriz array 
                    //y miramos si por los lados o arriba o abajo esta el mismo numero para saber la direccion
                    for (var i = 0; i < grid.length; i++) {
                        for (var j = 0; j < grid.length; j++) {
                            if (String(grid[i][j]).indexOf(numero_de_la_pregunta) !== -1) {

                                var errori = i - 1;
                                var errorj = j - 1;


                                if (grid[i + 1][j] === numero_de_la_pregunta) {
                                    dire = "vertical";

                                }
                                if (errori !== -1) {
                                    if (grid[i - 1][j] === numero_de_la_pregunta) {
                                        dire = "vertical";
                                    }
                                }



                                if (grid[i][j + 1] === numero_de_la_pregunta) {
                                    dire = "horizontal";

                                }
                                if (errorj !== -1) {
                                    if (grid[i][j - 1] == numero_de_la_pregunta) {
                                        dire = "horizontal";
                                    }
                                }
                            }
                        }
                    }

                    return dire;
                }

                function get_empieza_en_la_posicion(pregunta_numero, direction) {
                    if (direction == "horizontal") {
                        for (var i = 0; i < grid.length; i++) {
                            for (var j = 0; j < grid.length; j++) {
                                if (String(grid[i][j]).indexOf(pregunta_numero) != -1) {
                                    return [i, j];
                                }
                            }
                        }
                    } else if (direction == "vertical") {
                        for (var i = 0; i < grid.length; i++) {
                            for (var j = 0; j < grid.length; j++) {
                                if (String(grid[j][i]).indexOf(pregunta_numero) != -1) {
                                    return [i, j];
                                }
                            }
                        }
                    }
                }





                function comprobar_respuesta(numero_pregunta) {
                    var question_answer = repuestas[numero_pregunta - 1];
                    var direction = saber_direccion(numero_pregunta);
                    var startpos = get_empieza_en_la_posicion(numero_pregunta, direction);
                    var respuesta_separado_por_comas = question_answer.split("");

                    if (direction === "horizontal") {
                        for (var i = 0; i < respuesta_separado_por_comas.length; i++) {
                            if ($("#puzzle tr:nth-child(" + (startpos[0] + 1) + ") td:nth-child(" + (startpos[1] + 1 + i) + ") div").text()
                                    !== question_answer[i] &&
                                    $("#puzzle tr:nth-child(" + (startpos[0] + 1) + ") td:nth-child(" + (startpos[1] + 1 + i) + ") div").text() !== "") {

                                $("#puzzle tr:nth-child(" + (startpos[0] + 1) + ") td:nth-child(" + (startpos[1] + 1 + i) + ") div").css("color", "red");

                                cambia_turno();
                                console.log("letra incorrecta continua el turno" + turno);
                            } else if ($("#puzzle tr:nth-child(" + (startpos[0] + 1) + ") td:nth-child(" + (startpos[1] + 1 + i) + ") div").text()
                                    === question_answer[i] &&
                                    $("#puzzle tr:nth-child(" + (startpos[0] + 1) + ") td:nth-child(" + (startpos[1] + 1 + i) + ") div").text() !== "") {

                                $("#puzzle tr:nth-child(" + (startpos[0] + 1) + ") td:nth-child(" + (startpos[1] + 1 + i) + ") div").css("color", "green");
                                console.log("letra correcta continua el turno" + turno);
                            }
                        }

                    } else if (direction === "vertical") {
                        for (var i = 0; i < respuesta_separado_por_comas.length; i++) {



                            if ($("#puzzle tr:nth-child(" + (startpos[1] + 1 + i) + ") td:nth-child(" + (startpos[0] + 1) + ") div").text()
                                    != question_answer[i]
                                    && $("#puzzle tr:nth-child(" + (startpos[1] + 1 + i) + ") td:nth-child(" + (startpos[0] + 1) + ") div").text() != "") {
                                //  alert("respuesta invalidad");
                                $("#puzzle tr:nth-child(" + (startpos[1] + 1 + i) + ") td:nth-child(" + (startpos[0] + 1) + ") div").css("color", "red");
                                cambia_turno();
                                console.log("letra incorrecta continua el turno" + turno);
                            } else if ($("#puzzle tr:nth-child(" + (startpos[1] + 1 + i) + ") td:nth-child(" + (startpos[0] + 1) + ") div").text()
                                    === question_answer[i]
                                    && $("#puzzle tr:nth-child(" + (startpos[1] + 1 + i) + ") td:nth-child(" + (startpos[0] + 1) + ") div").text() != "") {
                                //  alert("respuesta correcta");
                                $("#puzzle tr:nth-child(" + (startpos[1] + 1 + i) + ") td:nth-child(" + (startpos[0] + 1) + ") div").css("color", "green");
                                console.log("letra correcta continua el turno" + turno);
                            }
                        }




                    }
                }

//mostrarmos jugadores

                if (jugadores.length > 0) {
                    //  alert(jugadores);
                    $("#jugador1").html("" + jugadores[0]);
                    $("#jugador2").html("" + jugadores[1]);

                    $("#turno").html("!comienza  a jugar " + jugadores[turno]);


                }

//mostrarmos jugadores




                /*  $("#cerrar_seccion").click(function () { 
                 
                 
                 }); */
            });//cerrando windowsload


            function tomar_celda(posicion) {
                var elpost = "#" + posicion;

                var laultima_letra = $(elpost).text();
//alert(donde_puso_la_letra);
            }

finally we finish, I hope I helped you do not forget about the credits quote my page mbajava thanks see you in another tutorial

Technology

Dynamic crossword with javascript 2 players

dynamic crossword with javascript for 2 players with arrays plus css interface

Post a Comment

0 Comments

translator page

Followers

Popular Posts

Tetris en java2D games codigo netbeans

File chooser dialog can only be shown with a user activation. Bot Uipath

juego ping pong en java codigo clasico de los 80

Facebook

PageNavi Results No.

Random Posts

Categories

Tags

Recent Posts

Menu Footer Widget

Technology

Dynamic crossword with javascript 2 players

dynamic crossword with javascript for 2 players with arrays plus css interface

You may like these posts

Post a Comment

0 Comments

translator page

Followers

Social Plugin

Popular Posts

Tetris en java2D games codigo netbeans

File chooser dialog can only be shown with a user activation. Bot Uipath

juego ping pong en java codigo clasico de los 80

Facebook

PageNavi Results No.

Random Posts

Categories

Tags

Recent Posts

Menu Footer Widget