Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

[Projeto] Gente aproveitei essas aulas e um código para o joguinho JoKenPo

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="./style/reset.css" />
    <link rel="stylesheet" href="./style/style.css" />
    <title>Jokenpo</title>
  </head>
  <body>
    <div class="container">
      <header class="header"><h1 class="page-title">Jo-Ken-Po</h1></header>
      <main class="main">
        <img src="./imgs/jokenpo.png" alt="" class="scr" />
        <div class="images">
          <button class="btn btn-pedra" onclick="jogar('pedra')">
            <div class="opcao">
              <img src="./imgs/pedra.png" alt="" class="jo" id="pedra" />
              <label for="pedra">Pedra</label>
            </div>
          </button>
          <button class="btn btn-papel" onclick="jogar('papel')">
            <div class="opcao">
              <img src="./imgs/papel.png" alt="" class="ken" id="papel" />
              <label for="papel">Papel</label>
            </div>
          </button>
          <button class="btn btn-tesoura" id="tesoura" onclick="jogar('tesoura')">
            <div class="opcao">
              <img src="./imgs/tesoura.png" alt="" class="po" id="tesoura" />
              <label for="tesoura">Tesoura</label>
            </div>
          </button>
        </div>
        <div class="jogada">
          <div class="jogada-player">
            <span>PLAYER</span>
            <img src="" alt="" id="imgP" />
          </div>
          <div class="jogada-cpu">
            <span>CPU</span><img src="" alt="" id="imgC" />
          </div>
        </div>
        <div class="footer"></div>
      </main>
    </div>
    <script src="./js/scripts.js"></script>
  </body>
</html>

Eu não sei como subir as imagens, a estrutura do código para vocês verem rodando. Mas ficou tão legal!

body {
  font-family: "Roboto Mono", monospace;
  min-height: 100vh;
  max-height: 100vh;
  background-color: antiquewhite;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.container {
  text-align: center;
}

.page-title {
  color: #282323;
}
.header{
  padding:0
}

.scr {
  height: 250px;
}

.main {
}

.images {
  display: flex;
  flex-direction: row;
  justify-content: space-around
}

.jogada {
  display: flex;
  justify-content: center;
  height: 50%;
}

.jogada-player, .jogada-cpu{
  display: flex;
  width: 350px;
  height: 30vh;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
}

.opcao {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.opcao label{
  font-weight: 600;
  color: #282323;
  font-size: 20px;
}

span {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.btn {
  background-color: transparent;
  border: none;
}

.footer {
  color: #282323;
}

Logo do jogo

7 respostas

Papel

Pedra

Tesoura

Oi Antonio, tudo bem?

Parabéns por ir além e criar o seu próprio projeto! Adorei muito a ideia, parabéns de verdade :D

E muito obrigada por postar aqui o seu código. Mais pra frente, nos cursos, você vai aprender a publicar o seu site. E ah aproveita para postar nas redes sociais o seu projeto, pode fazer um vídeozinho explicando quais ferramentas você utilizou e as dificuldades que superou, e marca a Alura :D

Um abraço e bons estudos.

Oi Lorena,

Boa Noite!

Tudo bem!

Obrigado pelo retorno!

Eu até fiz um pequeno vídeo do código funcionando e coloquei no instagram, marquei a @aluraonline.

EU queria mesmo publicar, mesmo não sendo algo novo.

Oi Antonio, tudo bem?

Não sei se você já tem familiaridade com GitHub (temos curso na Alura sobre).

Mas se você já tiver, pode dar uma lida nesse artigo do instrutor Neilton sobre Como colocar seu projeto no ar com GitHub Pages que é super legal e te ensina a como colocar seu projeto no ar para as pessoas verem.

Recomendo muito a leitura.

Um abraço e bons estudos.

Oi Lorena,

Obrigado pela Dica!

Vou olhar os dois mesmo!

Eu sei o básico do básico de github, pelo que aprendi no youtube.

Vou fazer o curso daqui e tb ler o artigo sobre Github Pages.

Preciso também ver algo sobre criar um bom portifólio.

Show!

solução!

Agora dá pra testar!!!! youhoo!!

https://aguedes2.github.io/jokenpo-javascript-/