diff --git a/github.png b/github.png new file mode 100644 index 0000000..e93f663 Binary files /dev/null and b/github.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..c58da08 --- /dev/null +++ b/index.html @@ -0,0 +1,81 @@ + + + + + + Platzi Game 🎮 + + + + + + +
+
+

Platzi Game

+
+
+
+
+
+
+
+

Player 1

+
+
+ +
+
+
+
+
+ +
+
+
+ no_se_dibujar_en_CSS +
+
+
+

Player 2

+
+
+ +
+
+
+
+
+ +
+
+
+ no_se_dibujar_en_CSS +
+
+
+ +
+ + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..a04d975 --- /dev/null +++ b/index.js @@ -0,0 +1,100 @@ +const player1 = document.getElementById('play1') +const player2 = document.getElementById('play2') +const modal = document.getElementById('modal') +const play_again = document.getElementById('play-again') +const percent1 = document.getElementById('percent1') +const percent2 = document.getElementById('percent2') +const bar_life1 = document.getElementById('cant-life1') +const bar_life2 = document.getElementById('cant-life2') +const gif = document.getElementById('gif') + +let playerLife2 = 0 +let playerLife1 = 0 + +init() + +player1.addEventListener('click', () => { + disablePlayer(1) + game(1) +}) + +player2.addEventListener('click', () => { + disablePlayer(2) + game(2) +}) + +play_again.addEventListener('click', () => { + console.log('play-again') + init() +}) + +function init(){ + disablePlayer() + playerLife2 = 100 + playerLife1 = 100 + modal.classList.add("none") + gif.innerHTML = "" + percent1.innerHTML = `${playerLife1}%` + percent2.innerHTML = `${playerLife1}%` + bar_life1.style.width = "100%" + bar_life2.style.width = "100%" +} + +function disablePlayer(player = 2){ + if(player === 1){ + player1.classList.add('hiden-play') + player2.classList.remove('hiden-play') + } + else{ + player2.classList.add('hiden-play') + player1.classList.remove('hiden-play') + } +} + +function randomAttack(){ + let attack = Math.floor(Math.random() * 10) + 1 + return attack +} + +function game(player){ + if(playerLife1 > 0 && playerLife2 > 0){ + if (player === 1){ + playerLife2 -= randomAttack() + percent2.innerHTML = `${playerLife2}%` + bar_life2.style.width = `${playerLife2}%` + if(playerLife2 <= 0){ + winner(1) + } + } else if (player === 2){ + playerLife1 -= randomAttack() + percent1.innerHTML = `${playerLife1}%` + bar_life1.style.width = `${playerLife1}%` + if(playerLife1 <= 0){ + winner(2) + } + } + } +} + +function winner(player){ + modal.classList.remove("none") + giphy() + let win = `Player ${player}` + const playerLabel = document.getElementById('winner') + playerLabel.innerHTML = win +} + +async function giphy(){ + const giphyParams = { + baseURL: "https://api.giphy.com/v1/gifs/", + type: "random", + apiKey: "iUF8SB6tppRCuB5bviHb57mdpcO7JKhH", + tag: "fail", + rating: "pg-13" + } + const URL = `${giphyParams.baseURL}${giphyParams.type}?api_key=${giphyParams.apiKey}&tag=${giphyParams.tag}&rating=${giphyParams.rating}` + let api = await fetch(URL) + let response = await api.json() + + gif.innerHTML = `instagram ` +} \ No newline at end of file diff --git a/instagram.png b/instagram.png new file mode 100644 index 0000000..5873a6e Binary files /dev/null and b/instagram.png differ diff --git a/player1.png b/player1.png new file mode 100644 index 0000000..a5439c0 Binary files /dev/null and b/player1.png differ diff --git a/player2.png b/player2.png new file mode 100644 index 0000000..2c0dc4f Binary files /dev/null and b/player2.png differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..0cbac77 --- /dev/null +++ b/styles.css @@ -0,0 +1,284 @@ +:root { + --color-blue: #1a46e5; + --color-card1: #43D8C9; + --color-card2: #FFBD11; + --color-pink: #FF89BB; + --border: 3px solid black; +} + +body { + margin: 0; + padding: 0; + font-family: 'Poppins'; +} + +.modal{ + position: absolute; + display: flex; + width: 1440px; + height: 1024px; + background: rgba(0, 0, 0, 0.7); + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + box-sizing: border-box; +} + +.sub-modal{ + width: 1177px; + height: 780px; + background: white; + border-radius: 20px; + border: var(--border); + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; +} + +.gif{ + width: 564px; + height: 577px; + border: var(--border); + box-sizing: border-box; + border-radius: 20px; +} + +.gif img{ + width: 100%; + height: 100%; + border-radius: inherit; +} + +.winner{ + display: flex; + flex-direction: column; + margin-left: 83px; + text-align: center; +} + +.winner label{ + color: black; + font-size: 36px; +} + +#play-again{ + outline: none; + width: 274px; + height: 78px; + margin-top: 40px; + background: var(--color-blue); + border: var(--border); + box-sizing: border-box; + border-radius: 40px; + + color: white; + font-weight: bold; + font-size: 36px; + line-height: 54px; +} + +#play-again:hover{ + cursor: pointer; +} + +.none{ + display: none; +} + +.container { + display: grid; + width: 1440px; + height: 1024px; + background: #ffffff; + grid-template-columns: 1fr; + grid-template-rows: 270px 1fr 170px; +} + +.title{ + position: absolute; + width: 368px; + height: 90px; + left: 536px; + top: 103px; + font-size: 60px; +} + +.circle-1 { + position: absolute; + width: 195px; + height: 195px; + left: -48px; + top: 26px; + background: var(--color-blue); + border-radius: 100px; +} + +.circle-2 { + position: absolute; + width: 97px; + height: 97px; + left: 162px; + top: 16px; + background: var(--color-blue); + border-radius: 100px; +} + +.circle-3 { + position: absolute; + width: 335px; + height: 335px; + left: 1004px; + top: -222px; + + background: var(--color-blue); + border-radius: 335px; +} + +.circle-4 { + position: absolute; + width: 49px; + height: 49px; + left: 1314px; + top: 99px; + background: var(--color-blue); + border-radius: 100px; +} + +.main{ + display: grid; + grid-template-columns: 182px 470px 1fr 470px 182px; +} + +.card-player1{ + display: flex; + flex-direction: column; + align-items: center; + grid-column: 2 / span 1; + border: var(--border); + box-sizing: border-box; + border-radius: 20px; + background: var(--color-card1); +} + +.card-player2{ + display: flex; + flex-direction: column; + align-items: center; + grid-column: 4 / span 1; + border: var(--border); + box-sizing: border-box; + border-radius: 20px; + background: var(--color-card2); +} + +h2{ + margin-top: 39px; + margin-bottom: 45px; + font-size: 36px; + color: white; +} + +.life-play{ + display: flex; +} + +.container-life{ + margin-right: 18px; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +label{ + color: white; + font-size: 30px; + font-weight: bold; + line-height: 45px; +} + +.labelpercent{ + width: 100%; + text-align: center; +} + +.life{ + width: 215px; + height: 50px; + border: var(--border); + box-sizing: border-box; + border-radius: 30px; + background-color: var(--color-blue); +} + +#cant-life1{ + height: 44px; + border-radius: inherit; + box-sizing: border-box; + background-color: var(--color-pink); +} + +#cant-life2{ + height: 44px; + border-radius: inherit; + box-sizing: border-box; + background-color: var(--color-pink); +} + +.border-100{ + width: calc(100% - 6px); + border-radius: 30px; +} + +.play{ + margin-left: 17px; + margin-bottom: 45px; + background-color: var(--color-blue); + color: white; + font-weight: bold; + font-size: 36px; + width: 120px; + height: 120px; + border: var(--border); + box-sizing: border-box; + border-radius: 100px; + display: flex; + align-items: center; + justify-content: center; +} + +.play label{ + font-size: 36px; +} + +.hiden-play{ + visibility: hidden; +} + +.draw{ + width: 370px; + height: 231px; + background:white; + border-radius: 20px; + border: var(--border); + display: flex; + justify-content: center; + align-items: center; +} + +.footer{ + display: flex; + justify-content: flex-end; + align-items: center; +} + +.footer label{ + color: black; + margin-right: 26px; + font-size: 24px; +} + +.footer a{ + margin: 9px; +} \ No newline at end of file diff --git a/twitter.png b/twitter.png new file mode 100644 index 0000000..676a2f2 Binary files /dev/null and b/twitter.png differ