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.