From 018579f6bb97db2c7c3f4b8205d0cd80b6b60264 Mon Sep 17 00:00:00 2001 From: Luis Hernandez Date: Thu, 13 Aug 2020 23:19:27 -0500 Subject: [PATCH 1/2] interfaz definida, modelo creado --- PlatziGame/controler/Game.js | 2 + PlatziGame/model/Jugador.js | 9 ++ PlatziGame/view/index.css | 213 +++++++++++++++++++++++++++++++++++ PlatziGame/view/index.html | 76 +++++++++++++ 4 files changed, 300 insertions(+) create mode 100644 PlatziGame/controler/Game.js create mode 100644 PlatziGame/model/Jugador.js create mode 100644 PlatziGame/view/index.css create mode 100644 PlatziGame/view/index.html diff --git a/PlatziGame/controler/Game.js b/PlatziGame/controler/Game.js new file mode 100644 index 0000000..512f4de --- /dev/null +++ b/PlatziGame/controler/Game.js @@ -0,0 +1,2 @@ +import Jugadro from '../model/Jugador'; + diff --git a/PlatziGame/model/Jugador.js b/PlatziGame/model/Jugador.js new file mode 100644 index 0000000..78cb8b4 --- /dev/null +++ b/PlatziGame/model/Jugador.js @@ -0,0 +1,9 @@ +export default class Jugador{ + constructor(id){ + this.healt = 100 + this.id = id + } + hacerDaño = () =>Math.round(Math.random()*30) + recibirDaño = (damage) => this.healt -= damage + +} \ No newline at end of file diff --git a/PlatziGame/view/index.css b/PlatziGame/view/index.css new file mode 100644 index 0000000..2ac4f53 --- /dev/null +++ b/PlatziGame/view/index.css @@ -0,0 +1,213 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; + border:none; +} +a{ + text-decoration: none; +} +body{ + display: grid; + grid-template-columns: 100%; + grid-template-rows: 20% 70% 10%; + height: 100vh; +} +.header{ + display: flex; + grid-row: 1; + justify-content: space-between; +} +.header__title{ + align-self: flex-end; + margin-bottom: 1em; + font-size: 2.5em; +} +.header__decoration{ + width: 35vw; + display: flex; + flex-direction: row; +} +.header__decoration--ball{ + background-color: #1A46E5; + border-radius: 50%; +} +#ball_mediana{ + width: 10em; + height: 10em; + margin-left: -3em; + margin-top: 1.5em; +} +#ball_pequeña{ + width: 4em; + height: 4em; + margin-top: .5em; +} +#ball_grande{ + width: 16em; + height: 16em; + margin-top: -10em; +} +#ball_diminuta{ + width: 2em; + height: 2em; + margin-top: 5em; +} +.border{ + border: 3px solid #000000 ; + border-radius: 25px; +} +.gameContainer{ + display: flex; + justify-content: space-evenly; + align-items: center; +} +.modal{ + position: fixed; + background: rgba(0, 0, 0, 0.8); + top: 0; + left: 0; + height: 100vh; + width: 100vw; + transition: all .5s; + display: flex; + align-items: center; + justify-content: center; + display: none; +} +.modal__winnerContainer{ + background-color: #FFFFFF; + border-radius: 25px; + border: 3px solid #000000; + height: 80vh; + width: 80vw; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; +} +.modal__winnerContainer--gif{ + background-color: aquamarine; + height: 35em; + width: 35em; +} +.modal__winnerContainer--data{ + height: 35em; + width: 20em; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.modal__winnerContainer--data section{ + font-size: 2em; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 1em; +} +.modal__winnerContainer--data button{ + background-color: #1A46E5; + color: #FFFFFF; + font-size: 1.5em; + height: 5vh; + width: 13vw; + cursor: pointer; +} +.modal__winnerContainer--data button:hover{ + background-color: #4A6CE4; +} +.gameContainer__card{ + height: 80%; + width: 25%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + color: #FFFFFF; +} +.gameConainer__card--title{ + font-weight: 600; + font-size: 2em; +} +.gameConainer__card--playerOptions{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 20%; + width: 78%; +} +.playerOptions__playerHP--container{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 70%; + height: 80%; +} +.playerOptions__playerHP--percentage{ + font-size: 1.7em; + font-weight: 700; +} +.playerOptions__playerHP--graphBar{ + border: 3px solid #000000 ; + border-radius: 25px; + height: 40%; + width: 80%; + display: flex; + flex-direction: row; + overflow: hidden; + +} +.positiveHealt{ + background-color: #FF89BB; + height: 100%; + flex-grow: 100; +} +.negativeHealt{ + background-color: #1A46E5; + height: 100%; + flex-grow: 0; +} +.playerOptions__playbtn{ + height: 98px; + width: 98px; + border-radius: 50%; + color: #FFFFFF; + background-color: #1A46E5; + font-size: 2em; + box-shadow: 2px 7px 3px 0px rgba(0,0,0,1); + cursor: pointer; +} +.playerOptions__playbtn:hover{ + background-color: #4A6CE4; +} +.gameConainer__card--img{ + height: 40%; + width: 78%; + background-color: #FFFFFF; +} +#player1{ + background-color: #43D8C9; +} +#player2{ + background-color: #FFBD11; +} +.footer{ + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; +} +.footer__signature{ + font-weight: 600; + padding-right: 1.5em; +} +.footer__icon{ + padding-right: 1.5em; +} +.footer__icon--img{ + height: 2.7em; + width: 2.7em; +} \ No newline at end of file diff --git a/PlatziGame/view/index.html b/PlatziGame/view/index.html new file mode 100644 index 0000000..a12d04f --- /dev/null +++ b/PlatziGame/view/index.html @@ -0,0 +1,76 @@ + + + + + + Platzi Game + + + + + + +
+
+

+

+
+

Platzi Game

+
+

+

+
+
+
+
+
+ +
+
The winner is:

+ +
+
+
+ +
+

Player 1

+
+
+

100%

+
+
+
+
+
+ +
+ +
+ +
+

Player 2

+
+
+

100%

+
+
+
+
+
+ +
+ +
+
+ + + + \ No newline at end of file From f2935e56eb2e99d87c935540a3ec213444858dca Mon Sep 17 00:00:00 2001 From: Luis Hernandez Date: Sat, 15 Aug 2020 16:26:42 -0500 Subject: [PATCH 2/2] personajes y funcionalidad agregado --- PlatziGame/controler/Game.js | 64 +++++++++- PlatziGame/model/Jugador.js | 17 ++- PlatziGame/view/Caracter2.css | 189 ++++++++++++++++++++++++++++ PlatziGame/view/Cracter1.css | 227 ++++++++++++++++++++++++++++++++++ PlatziGame/view/index.css | 20 ++- PlatziGame/view/index.html | 66 ++++++++-- 6 files changed, 564 insertions(+), 19 deletions(-) create mode 100644 PlatziGame/view/Caracter2.css create mode 100644 PlatziGame/view/Cracter1.css diff --git a/PlatziGame/controler/Game.js b/PlatziGame/controler/Game.js index 512f4de..6bf2695 100644 --- a/PlatziGame/controler/Game.js +++ b/PlatziGame/controler/Game.js @@ -1,2 +1,64 @@ -import Jugadro from '../model/Jugador'; + +const modal = document.getElementById('modalView'); +const modalGif = document.getElementById('modalGif'); +const whinerLabel = document.getElementById('whinerLabel'); +const healtPlayer1 = [ + document.getElementById('pHealtPlayer1'), + document.getElementById('nHealtPlayer1'), +]; +const healtPlayer2 = [ + document.getElementById('pHealtPlayer2'), + document.getElementById('nHealtPlayer2'), +]; +const healtPlayers =[ healtPlayer1,healtPlayer2]; + +let jugadores = [new Jugador(1),new Jugador(2)]; + +function hacerDañoAJugador(quienLanzoAtaque){ + const daño = jugadores[quienLanzoAtaque].hacerDaño() ; + const quienReciveDano = (quienLanzoAtaque+1)%2; + if(!jugadores[quienReciveDano].recibirDaño(daño)){ + MostrarModal(jugadores[quienLanzoAtaque].getId()); + return 0; + } + actualizarBarraDeVida(quienReciveDano); + +} +function actualizarBarraDeVida(jugador){ + healtPlayers[jugador][0].style.flexGrow = jugadores[jugador].getHealt() + healtPlayers[jugador][1].style.flexGrow = jugadores[jugador].getDamage() +} +function MostrarModal(jugador){ + whinerLabel.innerHTML = `Player ${jugador}`; + obtenerGift() + .then((gifts)=>{ + const {data} = gifts; + const urslImages = data.map(gif => gif.images.downsized_large.url); + let urlElegida = urslImages[Math.floor(Math.random() * urslImages.length)]; + modalGif.setAttribute('src',urlElegida); + }) + .catch(()=>{ + console.log('error') + }) + modal.classList.remove('hide') +} +function obtenerGift(){ + const url = "http://api.giphy.com/v1/gifs/search?q=winner&api_key=4quN3Z1vE3QA3o0qXRor70NioXGu33cN&limit=5"; + const opts = {crossDomain: true}; + return new Promise((resolve,reject)=>{ + $ + .get(url,opts,data=>{ + resolve(data) + }) + .fail(() => reject(id)); + }); +} +function reStartJuego(){ + modal.classList.add('hide'); + jugadores = [new Jugador(1),new Jugador(2)]; + for(let i=0; i<2;i++){ + healtPlayers[i][0].style.flexGrow = 100; + healtPlayers[i][1].style.flexGrow = 0; + } +} \ No newline at end of file diff --git a/PlatziGame/model/Jugador.js b/PlatziGame/model/Jugador.js index 78cb8b4..605b22a 100644 --- a/PlatziGame/model/Jugador.js +++ b/PlatziGame/model/Jugador.js @@ -1,9 +1,18 @@ -export default class Jugador{ +class Jugador{ constructor(id){ - this.healt = 100 - this.id = id + this.healt = 100; + this.damageRecived = 0; + this.id = id; } hacerDaño = () =>Math.round(Math.random()*30) - recibirDaño = (damage) => this.healt -= damage + recibirDaño (damage) { + this.healt -= damage; + this.healt = this.healt<0 ? 0:this.healt; + this.damageRecived += damage; + return this.healt; + } + getHealt = ()=> this.healt + getDamage = ()=> this.damageRecived + getId = ()=>this.id } \ No newline at end of file diff --git a/PlatziGame/view/Caracter2.css b/PlatziGame/view/Caracter2.css new file mode 100644 index 0000000..cc03734 --- /dev/null +++ b/PlatziGame/view/Caracter2.css @@ -0,0 +1,189 @@ +.piel{ + background-color: var(--pielclara); +} +.cabello{ + background-color: var(--pantalon); +} +.rojo{ + background-color: var(--rojo); +} +.rojo_claro{ + background-color: var(--rojoClaro); +} +.rojo_obscuro{ + background-color: var(--rojoObscuro); +} +.eboy{ + height: 150px; + width: 250px; + position: relative; +} +.eboy__head{ + z-index: 3; + height: 45px; + width: 45px; + border-radius: 6px; + position: absolute; + top: 40px; + left: 100px; +} +.eboy__head--lente{ + position: absolute; + width: 45px; + height: 21px; + top: 10px; + left: -5px; + border-radius: 10px; +} +.eboy__head--lente::after{ + z-index: 3; + position: absolute; + width: 40px; + height: 15px; + top: 3px; + left: 2px; + border-radius: 10px; + background-color: var(--azul); + content: ''; +} +.eboy__head--lente::before{ + z-index: 1; + position: absolute; + width: 11px; + height: 12px; + top: 4px; + left: 39px; + background-color: var(--pantalon); + content: ''; +} +.eboy__head--oreja{ + height: 11px; + width: 11px; + border-radius: 20px; + position: absolute; + left: 41px; + top: 20px; + z-index: 2; +} +.eboy__head--oreja::before{ + background-color: var(--pielrosada); + height: 7px; + width: 7px; + border-radius: 20px; + content: ''; + position: absolute; + top: 2px; + left: 2px; +} +.eboy__head--details{ + position: absolute; + height: 17px; + width: 45px; + border-radius: 20px; + top: -9px; + left: -7px; +} +.eboy__head--details::after{ + background-color: var(--pantalon); + position: absolute; + height: 15px; + width: 18px; + border-radius: 20px; + top: 6px; + left: 40px; + content: ''; +} +.eboy__head--details::before{ + background-color: var(--pantalon); + position: absolute; + height: 5px; + width: 12px; + border-radius: 20px; + top: 45px; + left: 33px; + content: ''; +} +.eboy__body{ + z-index: 2; + position: absolute; + height: 47px; + width: 47px; + border-radius: 30px; + top: 63px; + left: 116px; +} +.eboy__body--brazoIzquierdo{ + position: absolute; + height: 14px; + width: 24px; + top: 9px; + left: 31px; + border-radius: 10px; +} +.eboy__body--brazoIzquierdo::after{ + background-color: inherit; + position: absolute; + height: 14px; + width: 24px; + content: ''; + top: 4px; + left: 11px; + border-radius: 10px; + transform: rotateZ(45deg); +} +.eboy__boy--piernaIzquierda{ + position: absolute; + height: 12px; + width: 24px; + top: 29px; + left: 16px; + border-radius: 10px; +} +.eboy__boy--piernaIzquierda::after{ + background-color: inherit; + position: absolute; + height: 13px; + width: 33px; + content: ''; + top: 7px; + left: -6px; + border-radius: 10px; + transform: rotateZ(45deg); +} +.eboy__derecho{ + position: absolute; + height: 13px; + width: 33px; + top: 105px; + left: 125px; + border-radius: 10px; + transform: rotateZ(45deg); +} +.eboy__derecho::after{ + + background-color: inherit; + position: absolute; + height: 13px; + width: 33px; + content: ''; + top: -1px; + left: -32px; + border-radius: 10px; + transform: rotateZ(135deg); + +} +/*
+
+
+
+
+
+
+
+
+
+
+
+
+
+
*/ \ No newline at end of file diff --git a/PlatziGame/view/Cracter1.css b/PlatziGame/view/Cracter1.css new file mode 100644 index 0000000..83a4a02 --- /dev/null +++ b/PlatziGame/view/Cracter1.css @@ -0,0 +1,227 @@ + +:root{ + --pielclara:#fabda5; + --pielrosada:#fc8181; + --pielbronceada:#fca481; + --pantalon:#213c64; + --blanco:#FFFFFF; + --lengua:#ff2b2b; + --negro: #000000; + --cuerpo:#570048; + --rojo:#d13167; + --rojoClaro:#ff518b; + --rojoObscuro:#96274c; + --azul:#6aafff; +} +.fortachon{ + height: 150px; + width: 250px; + position: relative; +} + +.fortachon__head{ + z-index: 3; + background-color: var(--pielclara); + height: 50px; + width: 50px; + border-radius: 25px; + position: absolute; + top:35px; + left: 100px; +} +.fortachon__head::before{ + z-index:4; + position: absolute; + background-color: var(--pielrosada); + height: 25px; + width: 15px; + top:15px; + left: 15px; + border-radius: 10px; + content: ''; +} +.fortachon__head::after{ + z-index: 2; + position: absolute; + background-color: var(--pielclara); + height: 40px; + width: 40px; + top: 17px; + left: 14px; + border-radius: 20px; + content: ''; +} +.fortachon__boca{ + z-index: 3; + position: absolute; + background-color: var(--pantalon); + height: 25px; + width: 25px; + top: 25px; + left: 22px; + border-radius: 20px; + overflow: hidden; +} +.fortachon__boca::before{ + position: absolute; + content: ' '; + height: 28px; + width: 20px; + top:-12px; + left: -2px; + transform: rotateZ(65deg); + background-color: var(--blanco); +} +.fortachon__boca::after{ + position: absolute; + background-color: var(--lengua); + content: ' '; + height: 20px; + width: 20px; + top:15px; + left: 10px; + border-radius: 10px; +} +.fortachon__oreja{ + z-index: 1; + background-color:var(--pielclara); + height: 13px; + width: 13px; + border-radius: 10px; + position: absolute; + left: 145px; + top: 52px; +} +.fortachon__oreja::before{ + content: ''; + z-index: 2; + height: 9px; + width: 9px; + border-radius: 10px; + top: 2px; + left: 1px; + position: absolute; + background-color: var(--pielrosada); +} +.fortachon__ojos{ + z-index: 3; + height: 15px; + width: 45px; + position: absolute; + top: 10px; + left: -1px; + display: flex; + align-items: center; + justify-content: space-around; +} +.ojo{ + height: 6px; + width: 6px; + border-radius: 5px; +} +.ojo::before{ + content: ''; + position: absolute; + height: 5px; + width: 12px; + border-radius: 5px; + top: -7px; + transform: rotateZ(-13deg); + background-color: var(--pantalon); +} +.ojo__izquierdo{ + transform: rotateY(180deg); +} +.ojo__derecho{ + transform: rotateY(0deg); +} +.black{ + background-color: var(--negro); +} +.fortachon__cuerpo{ + z-index: 2; + height: 50px; + width: 50px; + position: absolute; + top:58px; + left: 112px; + border-radius: 25px; + background-color: var(--cuerpo); +} +.fortachon__brazos{ + position: absolute; + top: 30px; + left: 70px; + height: 100px; + width: 130px; + display: flex; + align-items: center; + justify-content: space-around; +} +.fortachon__brazo{ + height: 25px; + width: 35px; + background-color: var(--pielrosada); +} +.fortachon__brazo::before{ + z-index: 2; + position: absolute; + height: 25px; + width: 45px; + border-radius: 20px; + top:-7px; + left: 22px; + transform: rotateZ(-40deg); + background-color: var(--pielrosada); + content: ''; +} +.fortachon__brazo::after{ + z-index: 3; + position: absolute; + height: 32px; + width: 32px; + top: -15px; + border-radius: 20px; + background-color: var(--pielbronceada); + content: ''; +} +.fortachon__brazo--izquierdo{ + margin-top: 20px; + transform: rotateY(180deg) rotateZ(40deg); + +} +.fortachon__brazo--derecho{ + transform: rotateY(0deg); +} +.fortachon__piernas{ + position: absolute; + top: 50px; + left: 100px; + height: 100px; + width: 70px; + display: flex; + align-items: center; + justify-content: space-around; +} +.fortachon__pierna{ + top: 0px; + left: 10px; + background-color: var(--pantalon); + height: 20px; + width: 10px; + transform: rotateZ(-20deg); +} +.fortachon__pierna::after{ + position: absolute; + height: 20px; + width: 10px; + top: 16px; + left: -2px; + content: ''; + border-radius: 5px; + background-color: var(--pantalon); + transform: rotateZ(20deg); +} +.fortachon__pierna--izquierdo{ + transform: rotateY(180deg)rotateZ(-20deg); +} \ No newline at end of file diff --git a/PlatziGame/view/index.css b/PlatziGame/view/index.css index 2ac4f53..7742f64 100644 --- a/PlatziGame/view/index.css +++ b/PlatziGame/view/index.css @@ -13,6 +13,9 @@ body{ grid-template-rows: 20% 70% 10%; height: 100vh; } +button{ + outline: none; +} .header{ display: flex; grid-row: 1; @@ -63,6 +66,7 @@ body{ align-items: center; } .modal{ + z-index: 10; position: fixed; background: rgba(0, 0, 0, 0.8); top: 0; @@ -73,6 +77,9 @@ body{ display: flex; align-items: center; justify-content: center; + +} +.hide{ display: none; } .modal__winnerContainer{ @@ -158,18 +165,20 @@ body{ display: flex; flex-direction: row; overflow: hidden; + background-color: #FF89BB; } .positiveHealt{ background-color: #FF89BB; height: 100%; - flex-grow: 100; } + .negativeHealt{ background-color: #1A46E5; height: 100%; - flex-grow: 0; + } + .playerOptions__playbtn{ height: 98px; width: 98px; @@ -183,10 +192,13 @@ body{ .playerOptions__playbtn:hover{ background-color: #4A6CE4; } -.gameConainer__card--img{ +.caracterContainer{ height: 40%; width: 78%; background-color: #FFFFFF; + display: flex; + justify-content: center; + align-items: center; } #player1{ background-color: #43D8C9; @@ -210,4 +222,4 @@ body{ .footer__icon--img{ height: 2.7em; width: 2.7em; -} \ No newline at end of file +} diff --git a/PlatziGame/view/index.html b/PlatziGame/view/index.html index a12d04f..bf4aa8c 100644 --- a/PlatziGame/view/index.html +++ b/PlatziGame/view/index.html @@ -6,10 +6,15 @@ Platzi Game - + + - +

@@ -22,12 +27,13 @@

Platzi Game

-
+ + @@ -39,12 +45,26 @@

Player 1

100%

-
+
- + + +
+
+
+
+
+
+
+
+
+
+
+
+
- +
@@ -57,9 +77,33 @@

Player 2

- + - + +
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
@@ -72,5 +116,7 @@

Player 2

+ + \ No newline at end of file