0

Buen día compañeros ,estoy aprendiendo JS y decidí hacer el juego de la Horca.Mi problema es el siguiente: tengo un teclado solo con letras y un botón de borrar y otro de play , lo que deseo saber es como desactivar todas las teclas hasta que se de en el botón play y poder jugar. aqui esta mi codigo en HTML y en JS.

<body>
<h1 id="titulo">LA HORCA</h1>
<div id="letras"></div>
<div style="position: relative; left: 0; top: 0;">
    <div class="horca" id="horc"></div>
    <div class="head" id="cabeza"></div>
    <div class="body" id="cuerpo"></div>
    <div class="arm1" id="brazo1"></div>
    <div class="arm2" id="brazo2"></div>
    <div class="leg1" id="pierna1"></div>
    <div class="leg2" id="pierna2"></div>
</div>
        <fieldset id="keyboard">
            //aqui tengo mi teclado.
            <table class="teclado">
                <tr>
                    <td><button id="l1" value="Q" onclick="letra(this)">Q</button></td>
                    <td><button id="l2" value="W" onclick="letra(this)">W</button></td>
                    <td><button id="l3" value="E" onclick="letra(this)">E</button></td>
                    <td><button id="l4" value="R" onclick="letra(this)">R</button></td>
                    <td><button id="l5" value="T" onclick="letra(this)">T</button></td>
                    <td><button id="l7" value="Y" onclick="letra(this)">Y</button></td>
                    <td><button id="l8" value="U" onclick="letra(this)">U</button></td>
                    <td><button id="l9" value="I" onclick="letra(this)">I</button></td>
                    <td><button id="l10" value="O" onclick="letra(this)">O</button></td>
                    <td><button id="l11" value="P" onclick="letra(this)">P</button></td>
                </tr><br><br>
                <tr>
                    <td><button id="l12" value="A" onclick="letra(this)">A</button></td>
                    <td><button id="l13" value="S" onclick="letra(this)">S</button></td>
                    <td><button id="l14" value="D" onclick="letra(this)">D</button></td>
                    <td><button id="l15" value="F" onclick="letra(this)">F</button></td>
                    <td><button id="l16" value="G" onclick="letra(this)">G</button></td>
                    <td><button id="l17" value="H" onclick="letra(this)">H</button></td>
                    <td><button id="l18" value="J" onclick="letra(this)">J</button></td>
                    <td><button id="l19" value="K" onclick="letra(this)">K</button></td>
                    <td><button id="l20" value="L" onclick="letra(this)">L</button></td>
                    <td><button id="l21" value="Ñ" onclick="letra(this)">Ñ</button></td>
                </tr><br><br>
                <tr>
                    <td><button id="l22" value="Z" onclick="letra(this)">Z</button></td>
                    <td><button id="l23" value="X" onclick="letra(this)">X</button></td>
                    <td><button id="l24" value="C" onclick="letra(this)">C</button></td>
                    <td><button id="l25" value="V" onclick="letra(this)">V</button></td>
                    <td><button id="l26" value="B" onclick="letra(this)">B</button></td>
                    <td><button id="l27" value="N" onclick="letra(this)">N</button></td>
                    <td><button id="l28" value="M" onclick="letra(this)">M</button></td>
                    <td><button id="l29" value="del" onclick="borrar()">DEL</button></td>
                    <td><button id="l30" value="play" onclick="imprimir()">▶</button></td>
                </tr>
            </div>
        </fieldset>
    </div>

y el script:

    //aqui tomo el valor de cada tecla pulsada.
    function letra(btn){
    var letter=btn.value;
    document.getElementById('letras').innerHTML+=" "+letter;
    return true;
    }

lo que necesito saber es como poder darle al botón de play activar los demás botones. por favor si alguien es muy amable en ayudarme con esta pregunta, de antemano les agradecería mucho.

0

2 respuestas 2

0

Con document.querySelectorAll('.teclado button') obtienes solo los botones que están dentro del contenedor con la clase teclado, así evitas incluir otros botones (Empezar, Terminar, etc.).

Con una sola función puedes activarlos o desactivarlos usando el atributo disabled, verdadero para desactivar y falso para activar.

// Variable para cargar todos los botones
let buttons;

// Cuando el DOM esté cargado
window.onload = function() {
    buttons = document.querySelectorAll('.teclado button');
    buttonsAct(true);
}

// Función para activar / desactivar botones
function buttonsAct(status) {
    buttons.forEach(function(item) {
        item.disabled = status;
    });
}

//aqui tomo el valor de cada tecla pulsada.
function letra(btn){
    var letter=btn.value;
    document.getElementById('letras').innerHTML+=" "+letter;
    return true;
}
<body>
<h1 id="titulo">LA HORCA</h1>
<div id="letras"></div>
<div style="position: relative; left: 0; top: 0;">
    <div class="horca" id="horc"></div>
    <div class="head" id="cabeza"></div>
    <div class="body" id="cuerpo"></div>
    <div class="arm1" id="brazo1"></div>
    <div class="arm2" id="brazo2"></div>
    <div class="leg1" id="pierna1"></div>
    <div class="leg2" id="pierna2"></div>
</div>
<div>
    <button id="empezar" onclick="buttonsAct(false);">Empezar</button>
</div>
        <fieldset id="keyboard">
            //aqui tengo mi teclado.
            <table class="teclado">
                <tr>
                    <td><button id="l1" value="Q" onclick="letra(this)">Q</button></td>
                    <td><button id="l2" value="W" onclick="letra(this)">W</button></td>
                    <td><button id="l3" value="E" onclick="letra(this)">E</button></td>
                    <td><button id="l4" value="R" onclick="letra(this)">R</button></td>
                    <td><button id="l5" value="T" onclick="letra(this)">T</button></td>
                    <td><button id="l7" value="Y" onclick="letra(this)">Y</button></td>
                    <td><button id="l8" value="U" onclick="letra(this)">U</button></td>
                    <td><button id="l9" value="I" onclick="letra(this)">I</button></td>
                    <td><button id="l10" value="O" onclick="letra(this)">O</button></td>
                    <td><button id="l11" value="P" onclick="letra(this)">P</button></td>
                </tr><br><br>
                <tr>
                    <td><button id="l12" value="A" onclick="letra(this)">A</button></td>
                    <td><button id="l13" value="S" onclick="letra(this)">S</button></td>
                    <td><button id="l14" value="D" onclick="letra(this)">D</button></td>
                    <td><button id="l15" value="F" onclick="letra(this)">F</button></td>
                    <td><button id="l16" value="G" onclick="letra(this)">G</button></td>
                    <td><button id="l17" value="H" onclick="letra(this)">H</button></td>
                    <td><button id="l18" value="J" onclick="letra(this)">J</button></td>
                    <td><button id="l19" value="K" onclick="letra(this)">K</button></td>
                    <td><button id="l20" value="L" onclick="letra(this)">L</button></td>
                    <td><button id="l21" value="Ñ" onclick="letra(this)">Ñ</button></td>
                </tr><br><br>
                <tr>
                    <td><button id="l22" value="Z" onclick="letra(this)">Z</button></td>
                    <td><button id="l23" value="X" onclick="letra(this)">X</button></td>
                    <td><button id="l24" value="C" onclick="letra(this)">C</button></td>
                    <td><button id="l25" value="V" onclick="letra(this)">V</button></td>
                    <td><button id="l26" value="B" onclick="letra(this)">B</button></td>
                    <td><button id="l27" value="N" onclick="letra(this)">N</button></td>
                    <td><button id="l28" value="M" onclick="letra(this)">M</button></td>
                    <td><button id="l29" value="del" onclick="borrar()">DEL</button></td>
                    <td><button id="l30" value="play" onclick="imprimir()">▶</button></td>
                </tr>
            </div>
        </fieldset>
    </div>

0

podrias intentar algo aprecido a esto

var teclado = false;

cuando se presione play, cambiar la variable teclado a verdaderos

    function letra(letras){
if(teclado == false){
preventDefault();
}
    }

cuando se presione una tecla si no se a presionado antes play no hara nada.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.