jogo-da-forca/forca.html at master · gabriersdev/jogo-da-forca · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jogo da forca</title>
  <link rel="shortcut icon" href="./imagens/logo.svg" type="image/x-icon">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Cabeçalho -->
  <header>
    <div class="card-imagem">
      <img src="./imagens/logo.svg" alt="">
    </div>
  </header>

  <!-- Conteúdo principal -->
  <center>
    <main>
      <section class="pagina pagina-forca">
        <div class="jogo-container">
          <div class="forca-container">
            <svg height="250" width="200" class="forca">
              <!-- forca -->
              <line x1="60" y1="20" x2="140" y2="20" />
              <line x1="140" y1="20" x2="140" y2="50" />
              <line x1="60" y1="20" x2="60" y2="230" />
              <line x1="20" y1="230" x2="100" y2="230" />

              <!-- cabeça -->
              <circle cx="140" cy="70" r="20" class="forca-parte" />
              <!-- corpo -->
              <line x1="140" y1="90" x2="140" y2="150" class="forca-parte" />
              <!-- braços -->
              <line x1="140" y1="120" x2="120" y2="100" class="forca-parte" />
              <line x1="140" y1="120" x2="160" y2="100" class="forca-parte" />
              <!-- pernas -->
              <line x1="140" y1="150" x2="120" y2="180" class="forca-parte" />
              <line x1="140" y1="150" x2="160" y2="180" class="forca-parte" />
            </svg>
          </div>

        <div class="input-alternativo">
          <input type="text" class="input-pg-forca" id="teclado" onkeypress="return apenasLetrasSemAcento(event)" onkeyup="verificarTextoDigitado(this.value)" autocomplete="off">
          <button class="btn-controle" title="Ativa ou desativa o teclado" onclick="controlarTeclado()"><i class="fa-solid fa-keyboard"></i></button>
        </div>

        <div class="painel-letras">
          <div class="letras-corretas">
          </div>

          <div class="letras-erradas">
          </div>
        </div>

        <div class="botoes-pg-forca">
          <button class="btn-outra-pagina btn-principal" onclick="recarregarPagina()">Novo jogo</button>
          <a href="./index.html"><button class="btn-outra-pagina btn-secundario">Desistir</button></a>
        </div>
      </section>
    </main>
  </center>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="script.js"></script>
</body>
</html>