fonts

assets/js/codigoff.js

@@ -188,13 +188,13 @@ function combate() {
   chequeoVidas();
 }
 function chequeoVidas() {
-  let sectionAtaques = document.getElementById("ataques");
+  let sectionMensajes = document.getElementById("resultado");
   let pBooyah = document.createElement("p");
 
   if (vidaEnemigo == 0 && vidaJugador == 0) {
     alert("EMPATE");
-    pBooyah.innerHTML = "Al piso ambos";
-    sectionAtaques.appendChild(pBooyah);
+    pBooyah.innerHTML = "EMPATE";
+    sectionMensajes.appendChild(pBooyah);
     let botonDisparo = document.getElementById("disparo-jugador");
     botonDisparo.disabled = true;
     let botonGranada = document.getElementById("granada-jugador");
@@ -206,8 +206,8 @@ function chequeoVidas() {
     sectionReinicio.style.display = "flex";
   } else if (vidaJugador == 0) {
     alert("Mejor suerte para la pócima");
-    pBooyah.innerHTML = "SOS FRANCES";
-    sectionAtaques.appendChild(pBooyah);
+    pBooyah.innerHTML = "Mejor suerte para la pócima";
+    sectionMensajes.appendChild(pBooyah);
     let botonDisparo = document.getElementById("disparo-jugador");
     botonDisparo.disabled = true;
     let botonGranada = document.getElementById("granada-jugador");
@@ -220,7 +220,7 @@ function chequeoVidas() {
   } else if (vidaEnemigo == 0) {
     alert("BOOYAH!!");
     pBooyah.innerHTML = "BOOYAH!!";
-    sectionAtaques.appendChild(pBooyah);
+    sectionMensajes.appendChild(pBooyah);
     let botonDisparo = document.getElementById("disparo-jugador");
     botonDisparo.disabled = true;
     let botonGranada = document.getElementById("granada-jugador");
@@ -234,20 +234,23 @@ function chequeoVidas() {
 }
 
 function crearMensaje(resultado) {
-  let sectionMensajes = document.getElementById("texto-personajes");
+  // creo la seccion y los divs:
+  let sectionMensajes = document.getElementById("resultado");
+  let AtaqueDelJugador = document.getElementById("ataque-jugador");
+  let AtaqueDelEnemigo = document.getElementById("ataque-enemigo");
+  // creo los parrafos que van a mostrar los resultados y los ataques:
+  let nuevoAtaqueJugador = document.createElement("p");
+  let nuevoAtaqueEnemigo = document.createElement("p");
+  // le doy el contenido a cada parrafo:
+  sectionMensajes.innerHTML = resultado;
+  nuevoAtaqueJugador.innerHTML = "Atacaste con:" + ataqueJugador;
+  nuevoAtaqueEnemigo.innerHTML = enemigoAleatorioName + ataqueEnemigo;
+  // indico donde va cada parrafo:
+  AtaqueDelJugador.appendChild(nuevoAtaqueJugador);
+  AtaqueDelEnemigo.appendChild(nuevoAtaqueEnemigo);
+
   // document.createElement hace justamente lo que dice, crea el elemento indicado entre parentesis, en este caso un parrafo("p")
-  let parrafo = document.createElement("p");
-  parrafo.innerHTML =
-    "Atacaste con " +
-    ataqueJugador +
-    " y " +
-    enemigoAleatorioName +
-    " " +
-    ataqueEnemigo +
-    ": " +
-    resultado;
   // variable.appendChild hace que mandemos lo que hay entre parentesis a la variable, en este caso indicamos que agregamos el parrafo a la secicon mensajes.
-  sectionMensajes.appendChild(parrafo);
 }
 function reiniciar() {
   // pa reiniciar el juego

assets/style.css

@@ -92,11 +92,6 @@
     align-items: center;
 
 }
-/* .form{
-    display: flex;
-    flex-flow: column wrap;
-
-} */
 #personaje-select{
     display: flex;
     color: #ffffff;
@@ -152,18 +147,53 @@
 
 }
 #texto-personajes{
+    display: flex;
+    width: 450px;
+    margin: 10px;
+    padding: 10px;
+    justify-content: space-evenly;
+    color: aliceblue;
+    background-color: #1f35b1d4;
+    font-size: 20px;
+    border-radius: 20px;
+}
+#resultado{
+    display: flex;
+    margin: 5px;
+    padding: 10px;
+    justify-content: flex-start;
+    color: #57b1ff;
+    font-size: 20px;
+    align-items: center;
+    flex-direction: column;
+}
+#reiniciar-juego{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: #139719b5;
 }
-#reiniciar-juego{
+
+#reinicio {
     display: flex;
     flex-direction: column;
+    height: 64px;
+    width: 182px;
+    margin: 10px;
+    border: 2px solid #3ad606;
     justify-content: center;
     align-items: center;
+    background-color: transparent;
+    font-size: 15px;
+    font-family: 'Righteous', cursive;
+    border-radius: 15px;
+    color: white;
+}
+#reinicio:hover{
+    background-color:rgb(16, 197, 3);
+    cursor: pointer;
+    color: #ff00c3;
 }
 input{
     display: none;
-}
+}

index.html

@@ -68,11 +68,21 @@ <h2>Elige tu jugador:</h2>
         ><span id="pared"></span><br />
       </div>
     </section>
-    <section id="reiniciar-juego">
-      <button class="botones" id="reinicio">Reinicio</button>
-    </section>
-    <section id="texto-personajes">
-      <!-- <section id="seleccionar-habilidad"></section>
+
+    <div>
+      <section id="texto-personajes">
+        <p id="resultado">🔥EXITOS🔥</p>
+        <section id="reiniciar-juego">
+          <button id="reinicio">Reinicio</button>
+        </section>
+      </section>
+    </div>
+
+    <div>
+      <div id="ataque-jugador"></div>
+      <div id="ataque-enemigo"></div>
+    </div>
+    <!-- <section id="seleccionar-habilidad"></section>
             <h3>Elige tu habilidad:</h3>
             <p>
               <p>
@@ -113,6 +123,5 @@ <h4>Elige tu arma</h4>
             
             
               </p> -->
-    </section>
   </body>
 </html>