Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

challenge-prework-frontend no completado #24

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

challenge-prework-frontend no completado #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added icons/icon_github.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/icon_instagram.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added icons/icon_twitter.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/personaje.JPG
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/personaje2.JPG
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions js/PlatziGame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
const boton = getElementById("Button");
boton.addEventListener("click",attack );

const round = 1 ;
const a =( Math.round(Math.ramdon() * (MAX_POWER-MIN_POWER) + MIN_POWER);
while (vidaPlayer_1 > 0 && vidaPlayer_2 ){
if round = 1 {
vidaPlayer_2= (vidaPlayer_2 - a );
round = 0 ;
console.log("La vida del jugador 2 es: " + vidaPlayer_2);
else
vidaPlayer_1 = (vidaPlayer_1 - a );
console.log("la vida del jugador 1 es:" + vidaPlayer_2)
}
}

const vidaPlayer_1 = 500
const vidaPlayer_2 = 500
const MIN_POWER = 10;
const MAX_POWER = 50;
const turno = 1
15 changes: 15 additions & 0 deletions js/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
let modal = document.getElementById("modal");
let container = document.getElementById("container");
let winner = document.getElementById("winner");
let repetir = document.getElementById("play_again");
let play = document.getElementById("Button");
play.addEventListener("click", function(){
modal.style.display = "block"
})
modal.addEventListener("click", function(){
modal.style.display = "block"
})

repetir.addEventListener("click", function(){
modal.style.display = "none"
})
63 changes: 63 additions & 0 deletions pages/Platzi_Game.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Platzi Game</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../styles/styles_Platzi_Game.css">
<link rel="stylesheet" href="../js/PlatziGame.js">
</head>
<body>
<script src="../js/PlatziGame.js"></script>
<header class="header">
<div class="header__circle_1">
</div>
<div class="header__circle_2">
</div>
<div class="header__title">
<p class="header__title--PlatziGame"> Platzi Game</p>
</div>
<div class="header__circle_3">
</div>
<div class="header__circle_4">
</div>
</header>
<section class="card">
<section class="card__container_1">
<h2> Player 1</h2>
<section class="card__container--detalls">
<button id= "Button" >Play</button>
<p class="card__container--life" id="life">%</p>
</section>
<section class="card_container--barra">
<div>barra vida</div>
<div>barra</div>
</section>
<section class="card__container--personaje">
<img src="../images/personaje.JPG" alt="personaje 1">
</section>
</section>
<section class="card__container_2">
<h2> Player 2</h2>
<section class="card__container--detalls">
<button >Play</button>
<p class="card__container--life" id="life">%</p>
</section>
<section class="card_container--barra">
<div>barra vida</div>
<div>barra </div>
</section>
<section class="card__container--personaje">
<img src="../images/personaje2.JPG" alt="personaje 1">
</section>
</section>
</section>
<footer class="footer">
<p>Made by @Lidenbrbrok-ed</p>
<a href="https://github.com/Lidenbrock-ed/challenge-prework-frontend"><img src="../icons/icon_github.png" alt="Perfil de Github"> </a>
<a href="https://twitter.com/Lidenbrock_Ed"><img src="../icons/icon_twitter.png" alt="Perfil de Twitter"> </a>
<a href="https://twitter.com/Lidenbrock_Ed"><img src="../icons/icon_instagram.png" alt="Perfil de Instagram"> </a>
</footer>
</body>
</html>
28 changes: 28 additions & 0 deletions pages/modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>modal</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../styles/styles_Platzi_Game.css">
<link rel="stylesheet" href="../js/modal.js">
</head>
<body>
<section id="modal" class="flex">
<section id="container" class="modal_">
<section class="modal__container">
<section class="modal__container--detalls">
<section class="modal__container--gif" >gif</section>
<section class="modal__container_">
<p>The winner is:</p>
<p id="winner"></p>
<button id="play_again" class="modal__container--button">Play again</button>
</section>
</section>
</section>
</section>
</section>
</section>
</body>
</html>
213 changes: 213 additions & 0 deletions styles/styles_Platzi_Game.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
*{
margin: 0px;
border: 0px;
font-family: 'Poppins', sans-serif;
}

.header{
background-color: #ffffff;
width: 100%;
height: 200px;
display: inline-flex ;
justify-content: space-around;
}
.header__circle_1{
background: #1A46E5;
width:170px;
height: 170px;
border-radius: 100px;
margin: 22px 10px 0px -140px;
}
.header__circle_2{
background: #1A46E5;
width: 90px;
height: 90px;
border-radius: 60px;
margin: 15px 85px 0px -90px;
}
.header__title--PlatziGame {
font-size: 60px;
padding-left: 120px;
margin-top: 90px;

}
.header__circle_3{
background: #1A46E5;
width: 300px;
height: 300px;
border-radius: 200px;
margin-top: -200px;
margin-left: 30px;
}
.header__circle_4{
background: #1A46E5;
width: 50px;
height: 50px;
border-radius: 30px;
margin-top: 80px;
margin-left: -110px;
}
.card{
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 0px 30px;
}
.card__container_1{
width: 300px;
height: 450px;
background-color:#43D8C9;
border-radius: 20px;
border: 3px solid #000000;
color: #ffffff;
padding: 35px 50px 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.card__container_2{
width: 300px;
height: 450px;
background-color:#ffBD11;
border-radius: 20px;
border: 3px solid #000000;
color: #ffffff;
padding: 35px 50px 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.card__container_1 h2{
display: flex;
font-size: 35px;
justify-content: center;
margin-top: -20px}
.card__container_2 h2{
display: flex;
font-size: 35px;
justify-content: center;
margin-top: -20px;
}
.card__container--detalls{
display: inline-flex;
justify-content: space-between;
flex-direction: row-reverse;
}
.card__container--life{
display: flex;
align-items: flex-end;
}
.card__container--detalls button{
display:flex;
background:#1A46E5 ;
border-radius: 60px;
color:#ffffff;
width:80px;
height: 80px;
justify-content: center;
align-items: center;
font-size: 25px;
border: 2px solid #000000;
outline: none;
cursor: pointer;
}

.card__container--personaje{
display: flex;
justify-content: center;
background-color: #ffffff;
border: 2px solid #000000;
border-radius: 20px;
width: 300px;
height: 200px;
}
.footer {
background: #ffffff;
width: 100%;
height: 80px;
display:flex;
align-items: center;
justify-content: flex-end;
margin-right: 10px;
margin-bottom:10px;
}
.footer p{
color: #000000;
font-size: 16px;
text-decoration: none;
padding-right: 25px;

}
.footer a{
color:#000000;
cursor: pointer;
padding-right: 20px;
}


/*diseño css del modal*/
.flex{
display: block;
}
.modal_{
display: flex;
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 700px;
justify-content: center;
align-items: center;
}
.modal__container{
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 75%;
border: 2px solid #000000;
background-color:white;
border-radius: 20px;
}
.modal__container--detalls{
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
height: 80%;
border-radius: 20px;

}
.modal__container--gif{
display: flex;
background-color: yellow;
width: 50%;
height: 100%;
border: 2px solid #000000;
border-radius: 20px;
justify-content: center;
align-items: center;
}
.modal__container_{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 40%;
height: 100%;
}
.modal__container_ p{
font-size:34px;
}
.modal__container--button{
background-color: #1A46E5;
width: 270px;
height: 80px;
border: 2px solid #000000;
border-radius: 40px;
color: #ffffff;
font-size: 36px;
text-decoration: none;
outline: none;
cursor: pointer;
}