Desarrollo del challenge-prework-fronted

CSS/Estilos.css

@@ -0,0 +1,264 @@
+body{
+    font-family: 'Poppins', sans-serif;
+}
+
+.container{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.content{
+    width: 80%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+}
+
+h1{
+    font-size: 40px;
+}
+
+.gamers{
+    width: 900px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.card{
+    width: 355px;
+    height: 415px;
+    margin: 10px;
+    border: 2px solid #000;
+    border-radius: 20px;
+    display: grid;
+    grid-template: 5% 45% 55% / 60% 40%;
+    grid-template-areas:    "jugador jugador"
+                            "controles controles"
+                            "imagen imagen";
+}
+
+.one{
+    background: #43D8C9;
+}
+
+.two{
+    background: #FFBD11;
+}
+
+.image{
+    width: 75%;
+    height: 200px;
+    background: #fff;
+    margin: -20px auto;
+    border: 2px solid black;
+    border-radius: 10px;
+    grid-area: imagen;
+    display: flex;
+    justify-content: center;
+}
+
+
+.image img{
+    width: 175px;    
+    height: 175px;
+}
+
+.one .image img{
+    transform: rotateZ(180deg);
+    transform: rotateY(180deg);
+}
+
+h2{
+    text-align: center;
+    grid-area: jugador;
+}
+
+.controles{
+    width: 350px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.barra{
+    background: #1A46E5;
+    width: 200px;
+    height: 50px;
+    margin: 0px;
+    border: 2px solid black;
+    border-radius: 0px;
+
+}
+
+.controles p{
+    position: relative;
+    top: -40px;
+    left: 128px;
+}
+
+.barra .progress{
+    position: relative;
+    top:0;
+    left: -35px;
+    height: 100%;
+    background: #FF89BB;
+    border-radius: 0;
+}
+
+.one .barra .progress{
+    width: 200px;
+    position: relative;
+    left: 0;
+}
+
+.two .barra .progress{
+    width: 100%;
+    position: relative;
+    left: 0
+}
+
+.boton{
+    width: 80px;
+    height: 80px;
+    color: #fff;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    transition: all .5s;
+}
+
+.one .controles .boton{
+    background: #1A46E5;
+    cursor: pointer;
+    border-bottom: 6px solid black;
+
+}
+
+.two .controles .boton{
+    background: #FF89BB;
+    cursor: pointer;
+    border-bottom: 1px solid black;
+}
+
+.one .controles .boton.active{
+    border-bottom: 2px solid black;
+    background: #FF89BB;
+}
+
+.two .controles .boton.active{
+    border-bottom: 6px solid black;
+    background: #1A46E5;
+}
+
+.firma{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-right: 40px;
+    font-size: 18px
+}
+
+.firma ul li{
+    display: inline-block;
+    list-style: none;
+}
+
+.firma ul li a img{
+    width: 30px
+}
+
+
+.resultado{
+    position: absolute;
+    top: 50px;
+    left: 15%;
+    width: 70%; 
+    height: 80%;
+    background: #fff;
+    border: 2px solid #000;
+    border-radius: 15px;
+    display: grid;
+    grid-template-columns: 60% 40% ;
+    visibility: hidden;
+}
+
+.resultado.active{
+    visibility: initial;
+}
+
+.resultado img{
+    width: 460px;
+    height: 460px;
+    align-self: center;
+    justify-self: center;
+    border: 2px solid #000;
+    border-radius: 20px;
+}
+
+.resultado .message{
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.resultado .message p{
+    text-align: center;
+    font-size: 27px;
+}
+
+.resultado .message button{
+    width: 200px;
+    height: 40px;
+    background: #1A46E5;
+    border: 1px solid black;
+    border-radius: 20px;
+    font-family: 'Poppins', sans-serif;
+    color: #fff;
+    font-size: 20px;
+}
+
+.resultado .message button a{
+    text-decoration: none;
+    color: #fff
+}
+
+
+span{
+    position: absolute;
+    pointer-events: none;
+    background: #fff;
+    animation: animate 10s linear infinite;
+    border-radius: 100%;
+    z-index: -1;
+}
+
+@keyframes animate{
+    0%{
+        transform: scale(0) translateY(0) rotate(0deg);
+        opacity: 0;
+    }
+
+    10%{
+        opacity: 1;
+    }
+
+    90%{
+        opacity: 1;
+    }
+
+
+    100%{
+        transform: scale(1) translateY(500%) rotate(360deg);
+        opacity: 0;
+    }
+
+}
+

JS/index.js

@@ -0,0 +1,110 @@
+const colors = [
+    '#1A46E5',
+
+]
+
+function resultado1(){
+    let resultado = document.querySelector('.resultado');
+    resultado.classList.toggle('active');
+
+    let winner = document.getElementById('winner')
+    winner.innerHTML = 'Player 2'
+}
+
+function resultado2(){
+    let resultado = document.querySelector('.resultado');
+    resultado.classList.toggle('active');
+
+    let winner = document.getElementById('winner')
+    winner.innerHTML = 'Player 1'
+}
+
+
+function botonesJuegoOne(){
+    let one_button = document.querySelector('.botone');
+    one_button.classList.toggle('active');
+    let two_button = document.querySelector('.bottwo');
+    two_button.classList.toggle('active');
+
+    vidaPersonaje2()
+}
+
+function botonesJuegoTwo(){
+    let two_button = document.querySelector('.bottwo');
+    two_button.classList.toggle('active');
+    let one_button = document.querySelector('.botone');
+    one_button.classList.toggle('active');
+
+    vidaPersonaje1()
+}
+
+
+function vidaPersonaje1(){
+
+    let life_two = document.getElementById('progressone');
+    let life_progress= document.getElementById('life_count_one');
+
+    let life = life_two.clientWidth;
+
+    let damage = Math.random()* (30 - 5) + 5;
+
+    life = life - damage;
+    life_two.style.width = life + 'px';
+
+    life_percent = (life * 100) / 200
+
+    life_progress.innerHTML= Math.round(life_percent) + '%'
+
+    if (life <= 0){
+        resultado1();
+    }
+}
+
+function vidaPersonaje2(){
+
+    let life_two = document.getElementById('progresstwo');
+    let life_progress= document.getElementById('life_count_two');
+
+    let life = life_two.clientWidth;
+    let damage = Math.random()* (30 - 5) + 5;
+
+    console.log(life);
+    life = life - damage;
+    life_two.style.width = life + 'px';
+
+    life_percent = (life * 100) / 200
+
+    life_progress.innerHTML= Math.round(life_percent) + '%'
+
+
+    if (life <= 0){
+        resultado2();
+    }
+}
+
+
+function createSquare(){
+    const section = document.querySelector('body');
+    const square = document.createElement('span');
+
+    let size = Math.random() * 10;
+
+    number = Math.random() * (500 - 50) + 50
+
+    square.style.width = number + 'px';
+    square.style.height = number + 'px';
+
+    square.style.top = Math.random() * innerHeight + 'px';
+    square.style.left = Math.random() * innerWidth + 'px';
+
+    const bg = colors[Math.floor(Math.random() * colors.length)]
+    square.style.background = bg
+
+    section.appendChild(square);
+
+    setTimeout(() => {
+        square.remove()
+    }, 5000)
+}
+
+setInterval(createSquare, 150)

README.md

@@ -2,6 +2,8 @@
 
 Platzi Game
 
+Link al juego: https://juanfea98.github.io/challenge-prework-frontend/index.html
+
 ## 🎮 Contenido
 
 1. [Descripción](#1-descripción)