Holi xP Alguien me ayuda a saber por qué el Hipodoge no me aparece en ciertas resoluciones antes de pasar a que aparezca en columna con l...

Stevenson Grajales

Pregunta

student•

Holi xP

Alguien me ayuda a saber por qué el Hipodoge no me aparece en ciertas resoluciones antes de pasar a que aparezca en columna con las demás tarjetas de pokemones xD

img ilustrativa del problema: Me deja mover la visualización a la derecha pero no a la izquierda, queda como “cortado” el Hipo 😦

HTML

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="assets/mokepons_mokepon_capipepo_attack.png">
        <title>MOKEPON</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <h1 id="emojis">🔥💦🧱🐱‍🐉🎮👾</h1>
        <section id="pet-selection">
            <h1 id="title">WELCOME TO MOKEPON</h1>
            <h1>Select your pet:</h1>

            <div id="cardsContainer">
            </div>

            <button id="petButton">Select</button>
        </section>

        <section id="viewMap">
            <h1>Traverse the Map with your Mokepon</h1>
            <canvas id="map"></canvas>
            <button onmousedown="changePetVelocity(0,-5)" onmouseup="changePetVelocity(0,0)">Up</button>
            <div>
                <button onmousedown="changePetVelocity(-5,0)" onmouseup="changePetVelocity(0,0)">Left</button>
                <button onmousedown="changePetVelocity(0,5)" onmouseup="changePetVelocity(0,0)">Down</button>
                <button onmousedown="changePetVelocity(5,0)" onmouseup="changePetVelocity(0,0)">Right</button>
            </div>
        </section>

        <section id="attack-selection" style="display: none;">
            <h2>Chose your attack:</h2>

            <div id="attack-buttons">
            </div>

            <div class="result-restart">
                <button id="restartButton" style="display: none;">Restart</button>
                <h2 id="battle-result">BATTLE!</h2>
            </div>

            <div id="petsFight">
                    <div class="result-card">
                        <h2>Player</h2>
                        <div id="playerImg"></div>
                        <p><span id="playerPet"></span> HP: <span id="playerLives">3</span></p>
                        <p id="player-atk"></p>
                    </div>
                    
                    <div class="result-card">
                        <h2>Enemy</h2>
                        <div id="enemyImg"></div>
                        <p><span id="enemyPet"></span> HP: <span id="enemyLives">3</span></p>
                        <p id="enemy-atk"></p>
                    </div>
            </div>
        </section>
        
        <script src="./js/mokepon.js"></script>
    </body>
</html>

CSS

 @import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Press+Start+2P&display=swap');
body {
  font-family: 'Bungee Shade';
  background-image: url("/assets/pink_world.jpg");
  background-size: cover;
}

h1{
  text-align: center;
  margin: -30px 0px -20px 0px;
  font-size: 50px;
}
#title {
  color: #FF6D28;
}
#emojis {
  background-color: #FF6D28;
  height: 100px;
}

button{
  width: 160px;
  height: 40px;
  border-radius: 5px;
  background: #FF6D28;
  border: 2px solid #FCE700;
  font-family: 'Press Start 2P', cursive;
  font-weight: bold;
  font-size: 16px;
}
button:active{
  transform: scale(0.90);
}
#watter{
  background-color: #00F5FF;
}
#ground{
  background-color: greenyellow;
}
#petButton {
  margin-top: 30px;
}
#restartButton {
  margin-top: 20px;
}

#pet-selection{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #00F5FF;
  padding: 10px;
}

#viewMap{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#viewMap div{
  display: flex;
  align-items: center;
  justify-content: center;
}
#map{
  border: 2px solid #FF6D28;
}

#cardsContainer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 20px 0 0 0;
}
.mokepon-card {
  width: 180px;
  height: 220px;
  background: #FF6D28;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #00F5FF;
}
.mokepon-card img {
  width: 150px;
}
.mokepon-card h2{
  margin: -5px 0px 0px 0px;
  font-size: 24px;
}
.mokepon-card p{
  margin: 0%;
  font-size: 14px;
}

input{
  display: none;
}
input:checked + label{
  background-color: #f7743788;
  border: solid 3px #00F5FF;
}

.result-card {
  display: grid;
  text-align: center;
  align-items: center;
  grid-template-rows: 1fr 3fr 1fr 5fr;
  width: 180px;
  height: 350px;
  font-family: 'Press Start 2P', cursive;
  background: #FF6D28;
  padding: 5px;
  border-radius: 10px;
  color: #00F5FF;
}
.result-card img {
  width: 150px;
}
#attack-selection{
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #00F5FF;
}
#attack-buttons{
  display: flex;
  gap: 10px;
}
#petsFight{
  display: flex;
  gap: 10px;
  margin-top: 20px;
  align-items: center;
}
#petsFight h2{
  margin: 0px;
}

.result-restart{
  display: flex;
  width: 500px;
  flex-direction: column;
  align-items: center;
}
.result-restart h2,p{
  text-align: center;
  margin: 0px;
}

@media (max-width: 500px){
  .cards{
    flex-direction: column;
  }
  #attack-buttons{
    flex-direction: column;
  }
  h1{
    margin: -20px 0px 0px 0px;
    font-size: 30px;
  }
  #emojis{
    height: 60px;
  }
  #viewMap div{
    flex-direction: column;
  }
}

Kemuel Gómez

student•

Es solo el tamaño de tarjetas-de-mokepon si lo achicas se verán bien todos

Holi xP Alguien me ayuda a saber por qué el Hipodoge no me aparece en ciertas resoluciones antes de pasar a que aparezca en columna con l...

Curso Gratis de Programación Básica

Curso Gratis de Programación Básica