diff --git a/images/alien.jpeg b/images/alien.jpeg new file mode 100644 index 0000000..85b1245 Binary files /dev/null and b/images/alien.jpeg differ diff --git a/images/human.jpeg b/images/human.jpeg new file mode 100644 index 0000000..0e47908 Binary files /dev/null and b/images/human.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..5782a1b --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + Challenge + + + + + + +
+
Platzi Game
+
+
+
+
+
+
+

Player 1

+ + +
+ +
+
+ alien +
+
+
+
Player 2
+ + +
+ +
+
+ human +
+
+ + + + + + \ No newline at end of file diff --git a/js.js b/js.js new file mode 100644 index 0000000..2530501 --- /dev/null +++ b/js.js @@ -0,0 +1,63 @@ +document.getElementById("play1").addEventListener("click", function(){ + + document.getElementById("play2").addEventListener("click", play2()); + + function play2() { + console.log("turno del jugador 2") + document.getElementById('play1').disabled = false; + document.getElementById('play2').disabled; + } + + document.getElementById("play1").addEventListener("click", play2()); + + function play2() { + console.log("turno del jugador 1") + document.getElementById('play1').disabled; + document.getElementById('play2').disabled; + } +}); + + + + + + + + +// document.getElementById("play1").addEventListener("click", function(){ +// document.getElementById("play2").addEventListener("click", player2()); + // document.getElementById('play1').disabled = true; + // document.getElementById('play2').disabled = false; + // var hp = 150; + // var hp2 = 150; + // do { + // if (document.getElementById('play1').disabled) { + // let damage = Math.floor(Math.random() * (50 - 1)) + 1; + // console.log(damage) + // var player2 = hp - damage; + // console.log(player2) + // let x = parseInt((player2 * 100)/hp); + // hp = player2; + // console.log(hp) + // document.getElementById("percent1").innerHTML = x+"%"; + // document.getElementById('play1').disabled = false; + // document.getElementById('play2').disabled = true; + // console.log("true") + // } else if(){ + // let damage = Math.floor(Math.random() * (50 - 1)) + 1; + // var player1 = hp2 - damage; + // let x = parseInt((player1 * 100)/hp); + // document.getElementById("percent1").innerHTML = x+"%"; + // document.getElementById('play1').disabled = true; + // document.getElementById('play2').disabled = false; + // console.log("false") + // } + // } while (hp > 0 || hp2 > 0); + + + + + +// }); + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..0fe1ac9 --- /dev/null +++ b/styles.css @@ -0,0 +1,186 @@ +body{ + font-family: 'Poppins', sans-serif; + font-style: normal; + font-weight: bold; + font-size: 60px; + line-height: 90px; +} + +header div{ + background-color: #1A46E5; + border-radius: 100%; +} + +.header-circle{ + position: absolute; + width: 195px; + height: 195px; + left: -48px; + top: 26px; +} +.header-circle1{ + position: absolute; + width: 97px; + height: 97px; + left: 162px; + top: 16px; +} +.header-circle2{ + position: absolute; + width: 335px; + height: 335px; + left: 1004px; + top: -222px; +} +.header-circle3{ + position: absolute; + width: 49px; + height: 49px; + left: 1314px; + top: 99px; +} +.header-title{ + position: absolute; + width: 368px; + height: 90px; + left: 536px; +} +.card{ + position: absolute; + width: 467px; + height: 582px; + left: 182px; + top: 269px; + + background: #43D8C9; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 20px; +} +.card1{ + position: absolute; + width: 467px; + height: 582px; + left: 791px; + top: 269px; + + background: #FFBD11; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 20px; +} +.card-title{ + position: absolute; + top: 30px; + height: 54px; + left: 165px; + font-size: 36px; + line-height: 54px; + color: #FFFFFF; + margin: 0px; +} +.card-percent{ + position: absolute; + width: 66px; + height: 45px; + left: 135px; + top: 165px; + font-weight: bold; + font-size: 30px; + line-height: 45px; + color: #F7F7F7; +} +.card-hp{ + position: absolute; + width: 215px; + height: 50px; + left: 60px; + top: 215px; + + background: #1A46E5; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 30px; +} +.card-buttonContainer{ + position: absolute; + width: 120px; + height: 120px; + left: 310px; + top: 160px; + + background: #000000; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 100px; +} +.card-button{ + position: absolute; + width: 120px; + height: 120px; + left: -6px; + top: -7px; + background: #1A46E5; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 100px; + + font-style: normal; + font-weight: bold; + font-size: 36px; + line-height: 54px; + text-transform: capitalize; + + + + color: #FFFFFF; +} +.card-img{ + position: absolute; + width: 370px; + height: 231px; + left: 10px; + top: 250px; + + background: #FFFFFF; + border: 3px solid #000000; + box-sizing: border-box; + border-radius: 20px; + text-align: center; +} +.card-img img{ + width: 188px; + height: 200px; + left: 935px; + top: 588px; + margin: 20px; +} +.owner{ + position: absolute; + width: 260px; + height: 36px; + left: 931px; + top: 880px; + font-size: 24px; + line-height: 36px; +} +.icon{ + position: absolute; + width: 40px; + height: 40px; + left: 1110px; + top: 818px; +} +.icon img{ + width: 50px; + height: 50px; +} +.icon1{ + position: absolute; + width: 40px; + height: 40px; + left: 1160px; + top: 818px; +} + +