From 3a4f57a5b6aaca769d52dc83bfddc84529b0f959 Mon Sep 17 00:00:00 2001 From: Francisco Araujo Date: Sat, 15 Aug 2020 00:42:18 -0500 Subject: [PATCH 1/2] Se agregan archivos script funcionando --- chars.css | 4 + images/icons8-github-50.png | Bin 0 -> 912 bytes images/icons8-instagram-50.png | Bin 0 -> 758 bytes images/icons8-twitter-circled-50.png | Bin 0 -> 932 bytes index.html | 92 +++++++++++ script.js | 63 ++++++++ style.css | 230 +++++++++++++++++++++++++++ 7 files changed, 389 insertions(+) create mode 100644 chars.css create mode 100644 images/icons8-github-50.png create mode 100644 images/icons8-instagram-50.png create mode 100644 images/icons8-twitter-circled-50.png create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/chars.css b/chars.css new file mode 100644 index 0000000..b19f852 --- /dev/null +++ b/chars.css @@ -0,0 +1,4 @@ +.char1{ + width: 90%; + height: 90%; +} \ No newline at end of file diff --git a/images/icons8-github-50.png b/images/icons8-github-50.png new file mode 100644 index 0000000000000000000000000000000000000000..d790fb0555b66d1ad20517c7320c9572aee00f59 GIT binary patch literal 912 zcmV;B18@9^P)NIDNRHY)gq{M(MDSdreV;cVG$;@ zYF@Z$pa_yElUlTh$RtRpHbJf01VPiLD3LU&G=efxv~G)YZ{2>+{0}X>FMOMS_}=%u z=lth8=ev+c9(ha)6hxS72CyF32&@BE0+m2f=Kd%!1iS*C01tr2z^@23ghDlN3K#^^ zjxhk71QsQ(ItS%I7ch>yfnbaSoj_Tl4uBTma|q$87y-5=VW1GW9D{*iT*`38f;qsw z1WaV(ZiX{b6eesU8~1^kQ5s2NI;o;FDihl^B;CLs;3DuPgxD8AJFo+IC%NAo)=?Eyo`!juF{Km61;dk}cM9{IC{v9dj}=U?5se zyk>N@qR%B!8|H%82UK{;)T0s6>r(OVb4j*JlPEWy5^Z5@1b!Ge*SI7sz;4r+Mw|@W zfY~7oECH@saP_0#i%D_J(nvNwAdb9sm``&lU@77d)r(l}Z8#3Qnjj&MQ!3bqH_`p3V?&? zyNNDP8R@{I@cEz~(e8}eNI&uKtf!zD(fa&Gcq5~T4?m91r8O#mqx`KYF7tXbVye!M mL02f$lFTtUk3902uJ{cL#ZGhj2kuY+0000ER0EP?5qR}&oadS!OECm z<9}f92ZEZwA@LL}ERs|vl^^&~+8B(Wot+!pJB!)XxnU>Scjj*A(EY*7&EC$t^FHi+ zygLJxDpmR~6gl`z0WIJ>a0EC2?DdRe8~6@v0&74Ac;op@tESUNdL`L9aBk2LSAnEN zh|IdcP274;pCaI1007hO`oi280f@}zT_MgAraRdz0VZ8Q${g64{RCbBUo7`mr4W+= zAbP-swEa4;WvO!}FW@~Ekd~BuK-x%ue*hmXbwsgk5ax~C0&2iTAhy(5mw;?~1QP>o zUc@PgPwWwE+yz$5b4lmzuAbchIeCTw#kAU#y#XQ~NY=Wo(D z2b|2QH}BBi&_EIk%ub3>phHdLT|cZks045~HBd8_OBcO z(tDDDZJOv)H`L}s5qp^zux&wHkx-W`QEZ_$=!)2B7xK_So3w8xQsfUJ_;OUFvrv1 oP#MK4Dt&qD`OHd{D*cQ44S(|uNcwTz>Hq)$07*qoM6N<$f_!OJ$p8QV literal 0 HcmV?d00001 diff --git a/images/icons8-twitter-circled-50.png b/images/icons8-twitter-circled-50.png new file mode 100644 index 0000000000000000000000000000000000000000..58fcfcf781952cadd2f7f9770e04d53ac4cfff0f GIT binary patch literal 932 zcmV;V16%xwP)0K;Ct*@4?&aoO|}Z=iIB& z{b0d^yY~9l_s%+due}Zf3^2g|0<&t2HH@`bj|Z_DW0>3e{V)8E6F7#W_y*H8=1>Vs zu^VU6OtfFI3rqT*bsH97Kc=J$m}yfO$Gv@3fM;=`LgGdC2e$S@zzE*%fqAGIlkXU#DlwV7*BQZ*$^2E98&&7&R}-V z+F?9_1NccOt2ZNgV=CcbijW^80ygn#M6B7EAIbY<1n2j83yVr?EQ0hU{DxH}e%En1 zA|7GKDno8=d8NV4>uDz}!;2AqDY!qvXI@Icn6u#u7A2)wj-MlV8z})}Z-1W&J53!} z9?5w=C1~u+-o$ZXyG}Z&a`1X2U((BdA|Zi8xP&_s*385LY>)KK&8i;tecL6_H`Q zAm~->#65}e*5S)U0hztktq8(}ztg??8r~NsEh}=?&lTGHmxc4D8v#w6lm1Wp7q%u4 zP6?k5P7B?^bcN*G?U||~GVH4

AwXT_OmVr4Md_h{K9I^sX^S7%cZo#K(Ft#Lh6H zcqgm7oN9j(dDx;iqttV1e6eFODvU836%x;^A)FJHx7aFJEKC3=r3;u8I^V8O> + + + + + + + + Platzi Game + + +

+
+

Platzi Game

+ +
+
+

Player 1

+
+
+

100%

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

Player 2

+
+
+

100%

+
+
+
+
+ +
+
+
+
+
+
+ Made by @fjarauj0 + + + +
+
+
+
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..0511206 --- /dev/null +++ b/script.js @@ -0,0 +1,63 @@ +const hp1 = document.getElementById("hp1"); +const hp2 = document.getElementById("hp2"); +const hp1Bar = document.getElementById("hp1Bar"); +const hp2Bar = document.getElementById("hp2Bar"); +const modal = document.getElementById("finish"); +const winner = document.getElementById("winner"); +const btn1 = document.getElementById("player1_play"); +const btn2 = document.getElementById("player2_play"); + +let turnoActual = 1; +let vida1 = 100; +let vida2 = 100; +let btnActual; +let btnInactivo; + +function jugar(jugador) { + if (turnoActual != jugador) { + if (ruleta() == 1) restarVida(jugador); + siguienteTurno(); + } +} + +function restarVida(jugador) { + if (jugador == 1) { + vida1 -= 10; + hp1Bar.style.width = vida1 + "%"; + hp1.innerHTML = vida1 + "%"; + if(vida1==0){ + modal.style.visibility="visible" + winner.innerHTML="The winner is Player 2" + } + } else { + vida2 -= 10; + hp2Bar.style.width = vida2 + "%"; + hp2.innerHTML = vida2 + "%"; + if(vida2==0){ + modal.style.visibility="visible" + winner.innerHTML="The winner is Player 1" + } + } +} + +function siguienteTurno() { + if (turnoActual == 1) { + btnActual = btn1; + btnInactivo = btn2; + turnoActual = 2; + } else { + btnActual = btn2; + btnInactivo = btn1; + turnoActual = 1; + } + btnActual.classList.add("disable"); + btnInactivo.classList.remove("disable"); +} + +function ruleta() { + return Math.floor(Math.random() * 2); //Numero aleatorio 1 para acertar 0 para fallar +} + +function reload(){ + location.reload(); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..94da75b --- /dev/null +++ b/style.css @@ -0,0 +1,230 @@ +.modal_back { + visibility: hidden; + position: absolute; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.7); +} + +.modal { + align-items: center; + display: flex; + position: absolute; + width: 60%; + height: 80%; + top: 10%; + left: 20%; + + background: #ffffff; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 20px; + padding: 70px; + text-align: center; +} + +.gif_container{ + margin: 10px; + width: 60%; + height: 80%; + background: red; + border: 3px solid #000000; + border-radius: 20px; +} + +body { + font-family: Poppins; + font-style: normal; + font-weight: bold; + margin: 0; +} + +h1 { + font-size: 60px; + line-height: 90px; +} + +h2 { + font-size: 36px; + line-height: 54px; + color: #ffff; +} + +footer { + display: flex; + justify-content: flex-end; + font-size: 24px; + line-height: 36px; +} + +.main { + align-items: center; + padding: 50px; +} + +.main__cards { + margin-top: 50px; + display: grid; + justify-content: center; + grid-template: 582px / repeat(2, 467px); + gap: 5%; +} +.title { + text-align: center; + margin: 0; +} + +.card { + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 20px; + padding: 40px; +} + +.player1 { + background-color: #43d8c9; +} +.player2 { + background-color: #ffbd11; +} + +.social_link { + display: inline-block; + height: 45px; + width: 45px; + background-size: 45px 45px; + margin: 0 10px; +} +.social_link.github { + background-image: url(images/icons8-github-50.png); +} +.social_link.twitter { + background-image: url(images/icons8-twitter-circled-50.png); +} +.social_link.instagram { + background-image: url(images/icons8-instagram-50.png); +} +.controls { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 70px; +} +.hp_stats { + margin-right: 30px; +} + +.hp_per { + text-align: center; + margin: 0; +} + +.hp_bar { + width: 215px; + height: 50px; + left: 231px; + top: 465px; + + background: #1a46e5; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 30px; + overflow: hidden; +} + +.hp_bar_player1 { + background: #ff89bb; + width: 100%; + height: 100%; +} + +.hp_bar_player2 { + background: #ff89bb; + width: 100%; + height: 100%; +} + +.btn { + cursor: pointer; + text-align: center; + width: 120px; + height: 120px; + left: 481px; + top: 407px; + + background: #1a46e5; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 100px; +} + +.btn2{ + background: #1a46e5; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 100px; + cursor: pointer; +} +.btn2_text{ + font-size: 30px; + color: #ffffff; + margin: 13px; +} + +.disable { + cursor: initial; + background: rgb(109, 109, 109); +} + +.btn2:focus { + outline: none; +} + +.btn:focus { + outline: none; +} + +.img_char { + display: flex; + justify-content: center; + align-items: center; + margin: auto; + width: 370px; + height: 231px; + + background: #ffffff; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 20px; +} + +.circle { + position: absolute; + background: #1a46e5; + border-radius: 100%; + z-index: -1; +} +.c1 { + width: 195px; + height: 195px; + left: -48px; + top: 26px; +} +.c2 { + width: 97px; + height: 97px; + left: 162px; + top: 16px; +} +.c3 { + width: 335px; + height: 335px; + right: 100px; + top: -222px; +} +.c4 { + width: 49px; + height: 49px; + right: 50px; + top: 99px; +} From 8da0a99d856de15ad5eb651ddd3e2d50ddf3c132 Mon Sep 17 00:00:00 2001 From: Francisco Araujo Date: Sat, 15 Aug 2020 17:37:00 -0500 Subject: [PATCH 2/2] se agregaron personajes css y javascrip terminado --- chars.css | 240 ++++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 40 ++++++++- script.js | 15 +++- style.css | 8 +- 4 files changed, 294 insertions(+), 9 deletions(-) diff --git a/chars.css b/chars.css index b19f852..584326a 100644 --- a/chars.css +++ b/chars.css @@ -1,4 +1,242 @@ -.char1{ +.char { width: 90%; height: 90%; + position: relative; +} +.head { + position: absolute; + top: 41px; + right: 106px; + height: 120px; + width: 120px; + border-radius: 20%; + background: rgb(8, 54, 80); +} +.hand1{ + position: absolute; + top: 74px; + right: 208px; + height: 72px; + width: 34px; + border-radius: 50px; + background: rgb(16 96 101); +} +.hand2 { + position: absolute; + top: 74px; + right: 90px; + height: 72px; + width: 34px; + border-radius: 50px; + background: rgb(47, 145, 150); +} + +.horn1 { + position: absolute; + top: 18px; + right: 125px; + height: 47px; + width: 22px; + border-radius: 50px; + background: rgb(141, 195, 220); +} + +.horn2 { + position: absolute; + top: 18px; + right: 196px; + height: 47px; + width: 22px; + border-radius: 50px; + background: rgb(122, 187, 218); +} + +.foot1{ + position: absolute; + top: 116px; + right: 167px; + height: 72px; + width: 33px; + border-radius: 50px; + background: rgb(5, 29, 43); +} +.foot2{ + position: absolute; + top: 116px; + right: 125px; + height: 72px; + width: 33px; + border-radius: 50px; + background: rgb(8 ,54 ,80); +} + +.eye1{ + position: absolute; + top: 86px; + right: 142px; + height: 15px; + width: 15px; + border-radius: 50px; + background: #ffff; +} +.eye2{ + position: absolute; + top: 86px; + right: 192px; + height: 15px; + width: 15px; + border-radius: 50px; + background: #ffff; +} + +.eye3{ + position: absolute; + top: 51px; + right: 191px; + height: 7px; + width: 19px; + border-radius: 50px; + background: #d6e220; +} +.eye4{ + position: absolute; + top: 51px; + right: 158px; + height: 7px; + width: 19px; + border-radius: 50px; + background: #d6e220; +} + +.head1 { + position: absolute; + top: 71px; + right: 130px; + height: 53px; + width: 88px; + border-radius: 17px; + background: rgb(47 145 150); +} + +.body1{ + position: absolute; + top: 74px; + right: 113px; + height: 93px; + width: 93px; + border-radius: 100px; + background: rgb(69 183 189); +} + +.foot3{ + position: absolute; + top: 126px; + right: 144px; + height: 76px; + width: 33px; + border-radius: 50px; + background: rgb(69 183 189); + transform: rotate(45deg); +} +.foot4{ + position: absolute; + top: 129px; + right: 96px; + height: 33px; + width: 76px; + border-radius: 50px; + background: rgb(47 145 150); +} + +.hand4{ + transform: rotate(45deg); + position: absolute; + top: 102px; + right: 81px; + height: 27px; + width: 53px; + border-radius: 50px; + background: rgb(107 216 222); +} +.hand3{ + position: absolute; + top: 104px; + right: 147px; + height: 27px; + width: 81px; + border-radius: 50px; + background: rgb(47 145 150); +} +.stick5{ + position: absolute; + top: 43px; + right: 185px; + height: 77px; + width: 13px; + border-radius: 50px; + background: rgb(47 145 150); +} +.stick6{ + position: absolute; + top: 43px; + right: 132px; + height: 77px; + width: 13px; + border-radius: 50px; + background: rgb(69 183 189); +} +.eye5{ + position: absolute; + top: 4px; + right: 172px; + height: 60px; + width: 60px; + border-radius: 100px; + background: rgb(47 145 150); +} +.eye5w{ + position: absolute; + top: 11px; + right: 179px; + height: 45px; + width: 45px; + border-radius: 100px; + background: #ffff; +} +.eye5b{ + position: absolute; + top: 25px; + right: 203px; + height: 15px; + width: 15px; + border-radius: 100px; + background: #000; +} + +.eye6{ + position: absolute; + top: 4px; + right: 121px; + height: 60px; + width: 60px; + border-radius: 100px; + background: rgb(69 183 189); +} +.eye6w{ + position: absolute; + top: 11px; + right: 129px; + height: 45px; + width: 45px; + border-radius: 100px; + background: #ffff; +} +.eye6b{ + position: absolute; + top: 25px; + right: 153px; + height: 15px; + width: 15px; + border-radius: 100px; + background: #000; } \ No newline at end of file diff --git a/index.html b/index.html index 67d965a..0e53d01 100644 --- a/index.html +++ b/index.html @@ -14,10 +14,12 @@ @@ -39,7 +41,21 @@

Play

-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
@@ -55,7 +71,23 @@

100%

Play

-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js index 0511206..b2dd3b3 100644 --- a/script.js +++ b/script.js @@ -4,9 +4,12 @@ const hp1Bar = document.getElementById("hp1Bar"); const hp2Bar = document.getElementById("hp2Bar"); const modal = document.getElementById("finish"); const winner = document.getElementById("winner"); +const gif = document.getElementById("gif"); const btn1 = document.getElementById("player1_play"); const btn2 = document.getElementById("player2_play"); +let url= "https://api.giphy.com/v1/gifs/random?api_key=n5wf1ERiBfpQPFw95uWxwl0If7lJrW15&tag=winner" + let turnoActual = 1; let vida1 = 100; let vida2 = 100; @@ -28,6 +31,7 @@ function restarVida(jugador) { if(vida1==0){ modal.style.visibility="visible" winner.innerHTML="The winner is Player 2" + getGif(); } } else { vida2 -= 10; @@ -36,6 +40,7 @@ function restarVida(jugador) { if(vida2==0){ modal.style.visibility="visible" winner.innerHTML="The winner is Player 1" + getGif(); } } } @@ -58,6 +63,10 @@ function ruleta() { return Math.floor(Math.random() * 2); //Numero aleatorio 1 para acertar 0 para fallar } -function reload(){ - location.reload(); -} +function getGif(){ + fetch(url) + .then(response=>response.json()) + .then(content=>{ + gif.src = content.data.images.downsized_medium.url + }) +} \ No newline at end of file diff --git a/style.css b/style.css index 94da75b..c152ac0 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,5 @@ .modal_back { + z-index: 1; visibility: hidden; position: absolute; width: 100vw; @@ -27,11 +28,16 @@ margin: 10px; width: 60%; height: 80%; - background: red; + overflow: hidden; border: 3px solid #000000; border-radius: 20px; } +#gif{ + height: 100%; + width: 100%; +} + body { font-family: Poppins; font-style: normal;