ajuda no projeto de conclusao

boa noite. eu tentei fazer meu código sem nenhum auxilio dos videos de projeto final, mas eu usei uma logica muito diferente dele, e não estou conseguindo exibir a letra quando o usuário acerta o chute, basicamente só falta isso para terminar, criticas e ideias para o código são bem vindas.

var entrada = $(".entrada"); // variavel da palavra secreta//
var sprite = $(".sprite") // sprite do bonequinho do jogo//
var ul =$(".texto"); // var para aparecer os quadradinhos da palavra
entrada.removeClass(); // isso é para a caixa da palavra
 secreta nao desaparecer de inicio//
var j=0;
var chute =$(".chute") // variavel do chute



  recebeFrase();
  adivinhaPalavras();


function recebeFrase(){
  $( "#entrada" ).on( "keydown", function() {
        if(event.which == 13){
            ul.removeClass(); // quando aperta enter, aparece 
o espaço para os quadrados//
            var text = entrada.val();

            var resultado = text.toLowerCase().split(''); // para deixar a palavra secreta minuscula

            entrada.addClass("entrada"); // para desaparecer a 
caixa de entrada da palavra secreta//
            chute.removeClass();// para aparecer a caixa de chute
            criaJogo(resultado);
            var max = text.length; // o tamanho da palavra secreta
            adivinhaPalavras(resultado,max);
          }

});}

function nextFrame(i) { // essa função é para passar 
o frame sempre q o usuario erra//
  var vetor = [
    ".sprite",".sprite frame1",".sprite frame2",".sprite frame3",".sprite frame4",".sprite frame5",".sprite frame6",".sprite frame7",".sprite frame8",".sprite frame9"
  ]
  sprite.addClass(vetor[i]);
  if(i==8){
        alert("ultima tentativa");
}
if(i==9){
    alert("game over");
    for(i=0;i<10;i++){
    sprite.removeClass(vetor[i]);// para remover os frames//
  }
  }
}

function criaJogo(text) {
  for(i=0;i<text.length;i++){
      var li = document.createElement('li'); // aqui q meu codigo fica
 bem diferente//
      ul.append(li);// basicamente eu crio um li, q eu estilizei 
no css para ficar com borda quadrada.
e para cada letra, ele cria um li com borda quadrada//
  }
}

function adivinhaPalavras(resultado,max) {
  var aux =0;
  var i=2;
    $("#chute").on("keydown", function() {
          if(event.which == 13){
            var chute1 = chute.val();
            for(j=0;j<max;j++){
              if(chute1 == resultado[j]){
                 aux++;  
// aqui deveria estar o codigo para quando acertar.
aparecer a letra na tela.
ja pensei em substituir os LI's, com LI's com string.
 mas ele cria um novo li ao lado//
              }
              if(j == max-1){
                if (aux == 0){ // se errou a letra, o frame vai passar para o proximo//
                  nextFrame(i);
                  i++;
                }
                chute.val('');
                aux =0;

                if(i==10){
                   i=2;
                   entrada.removeClass();
                   ul.addClass("texto");
                   chute.addClass("chute");
                   entrada.val('');
                   chute.val('');
                  $('#texto').empty()// aqui é para resetar o jogo
                }
              }
            }
    }
});}