Selección de Mascotas en HTML para Juegos Interactivos

Clase 17 de 84 • Curso Gratis de Programación Básica

Resumen

¿Cómo se estructura y gestiona el código HTML para seleccionar una mascota en el juego Mokepón?

En la emocionante tarea de darle vida al juego Mokepón, una de las primeras etapas fundamentales es estructurar correctamente el HTML que permitirá a los jugadores seleccionar sus mascotas. Este paso no solo es crucial para la jugabilidad, sino también para garantizar una experiencia de usuario fluida y amigable. Aquí te mostramos cómo hacerlo de manera efectiva.

¿Cuáles son las mascotas disponibles?

Antes de entrar al código, es vital familiarizarnos con las mascotas que los jugadores pueden elegir:

Hipodoge - Elemento: Agua
Capipepo - Elemento: Tierra
Ratigueya - Elemento: Fuego
Langostelvis - Elementos: Agua y Fuego
Tucapalma - Elementos: Agua y Tierra
Pydos - Elementos: Tierra y Fuego

Estas criaturas no solo ofrecen diversidad en el juego, sino que también aportan sus habilidades únicas, lo cual enriquece la estrategia del jugador.

¿Cómo se implementan los inputs en HTML?

Para lograr que los jugadores puedan seleccionar su mascota, utilizamos una etiqueta HTML llamada input. Esta etiqueta se usa para capturar diferentes tipos de datos del usuario.

<input type="radio" id="hipodoge" name="mascota">
<label for="hipodoge">Hipodoge</label>
<input type="radio" id="capipepo" name="mascota">
<label for="capipepo">Capipepo</label>
<input type="radio" id="ratigueya" name="mascota">
<label for="ratigueya">Ratigueya</label>

Aquí, usamos el type="radio" para permitir al jugador elegir una sola mascota del grupo, asegurando que solo un "check" activo sea visible en cualquier momento, gracias al uso del mismo name para todos los inputs relacionados.

¿Cómo se vinculan los labels con los inputs?

El uso de etiquetas label en conjunto con los inputs es esencial para mejorar la accesibilidad y experiencia del usuario, especialmente cuando están jugando desde dispositivos móviles.

<label for="hipodoge">Hipodoge</label>
<input type="radio" id="hipodoge" name="mascota">

A cada label se le asocia un atributo for que coincide con el id del input correspondiente. Esto permite que al clicar el texto del label, el input asociado se active.

¿Cómo se agrupan los inputs?

A través del atributo name, agrupamos los inputs para que HTML entienda que son parte de un mismo conjunto. Esto facilita la interacción visual del juego al permitirle al usuario seleccionar una sola opción por vez de un grupo:

<input type="radio" name="mascota" id="hipodoge">
<input type="radio" name="mascota" id="capipepo">
<input type="radio" name="mascota" id="ratigueya">

Así, solo un input de tipo radio puede estar seleccionado dentro de un mismo grupo de name.

¿Cuál es la importancia del identificador único `id`?

Asignar un id único a cada input facilita su interacción posterior con JavaScript. Este identificador no solo vincula el input con su label, sino que también servirá para manipular y almacenar la selección del usuario en futuras implementaciones con JavaScript.

Implementación de interactividad

Hasta ahora, al clicar en las opciones, no se ejecuta acción visible. Esto se resolverá en las siguientes fases del desarrollo al integrar JavaScript, permitiendo al juego captar y responder a la elección del usuario, llevándolo un paso más cerca de experimentar aventuras épicas con su Mokepón elegido.

Con esta estructura de HTML, el camino está pavimentado para un proceso de desarrollo exitoso, alineado con las mejores prácticas de codificación y centrado en el usuario. ¡Es solo el comienzo de un viaje educativo hacia la creación de un juego lleno de diversión!

Carlos Eduardo Carvajal Pérez

student•

Para saltar un párrafo se puede utilizar <br> en donde quieras que sea el salto de linea.

También lo que yo hice fue colocar el input type radio arriba para que apareciera en el lado izquierdo del texto, siento que es mas ordenado.

ALBERTO PÉREZ

student•

Hola esta muy bonito el orden que has logrado, pero recuerda que en html lo importante no es el orden visual/estético de las etiquetas , sino su estructura (y).

Kevin Jacobo Valenzuela Tiznado

student•

Gracias por el aporte, buscaba la manera de hacer eso jajaja

al mn

student•

2022 = Mokepon 💚 2016 = Pakiman 💚💚💚

addd edada

student•

Si :((

luisa Garcia

student•

q sad

Esmeralda Gutiérrez Ramírez

student•

Significado de "e": El formato Científico muestra un número en notación exponencial, reemplazando parte del número por E+n,en el que E (exponente) multiplica el número anterior por 10 a la potencia n. Por ejemplo, un formato científico de 2 decimales muestra 12345678901 como 1,23E+10, que es 1,23 veces 10 a la décima potencia.

Maxi Somma

student•

Yo me lo imagine a Maradona viendo todos los numeros juntos y diciendo "e"

Teo Zavala

student•

QUE GRAN APORTE.

David Antonio Morales Barrera

student•

Buscando en tutoriales, encontré como insertar imagenes para que se vea mejor (dejo el codigo base debajo):

<!DOCTYPE html>
<html lang="en">
<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">
    <title>MOKEPON</title>
</head>
<body>

    <script>

        var img = document.createElement("img");
        img.src
    
        var div = document.getElementById("x");
        div.appendChild(img);
        //block.setAttribute("style", "text-align:center");
    
        </script>

    <h2> Mokepon! 🌱🔥💧 </h2>
    
    <section id="seleccionar-mokepon"></section>
        <h3>Elige a tu Mokemon:</h3>

        <p>
            <label for="ajolote">
                <input type="radio" name="mokepon" id="ajolote"/>
                <img src="img/ajolote_600x372.jpg" alt="HTML5 Logo" title="agua_mokepon01" width="124" height="100" id="ajolote"/>
            Ajolote
            </label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        

            <label for="topo">
                <input type="radio" name="mokepon" id="topo"/>
                <img src="img/topo_600x449.jpg" alt="HTML5 Logo" title="tierra_mokepon01" width="124" height="100" id="topo"/>
                Topo
            </label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            
            <label for="hormigadefuego">
                <input type="radio" name="mokepon" id="hormigadefuego"/>
                <img src="img/hormigafuego_600x336.jpg" alt="HTML5 Logo" title="fuego_mokepon01" width="124" height="100" id="hormigadefuego"/>
                Hormiga de fuego
            </label>

        <p>
            <label for="komodo">
                <input type="radio" name="mokepon" id="komodo"/>
                <img src="img/komodo_1238x878.jpg" alt="HTML5 Logo" title="agua_mokepon01" width="124" height="100" id="komodo"/>
                Dragon de Komodo
            </label>
            &nbsp;
            
            <label for="tortuga">
                <input type="radio" name="mokepon" id="tortuga"/>
                <img src="img/tortuga_1239x697.jpg" alt="HTML5 Logo" title="tierra_mokepon01" width="124" height="100" id="tortuga"/>
                Tortuga
            </label>
            &nbsp;&nbsp;

            <label for="caballodemar">
                <input type="radio" name="mokepon" id="caballodemar"/>
                <img src="img/Caballitodemar_1557x888.jpg" alt="HTML5 Logo" title="tierra_mokepon01" width="124" height="100" id="caballodemar"/>
            Caballo de mar
            </label>
            &nbsp;
        </p> 


        <p>
            <button>Confirmar</button>
        </p>
    
    <section id="seleccionar-ataque">   
        <h3>Elige tu ataque:</h3>

        <p>Tienes <span>3</span> vidas</p>
        <p>El contrincante tiene <span>3</span> vidas</p>

        <p>
            <button>Tierra 🌱</button>
            <button>Fuego 🔥</button>
            <button>Agua 💧</button>
        </p>

    </section>

    <section id="mensajes"></section>
        <p>MENSAJE ATAQUE</p>

    <section id="reiniciar-terminar"></section>
        <button>Volver a jugar</button>
        <button>Terminar</button>
    
</body>
</html>

Bryan Andres Vera Garcia

student•

Buena esa ahí, lo bueno de esto es que podemos agregarle un sin fin de cosas

Harry's Barahona

student•

jajajaa muy buena idea, ya cuando tenga el conocimiento necesario hare algo asi como menciona Luis Hurtado... el poder de mi hermana y mama es enojarse por todo y el de mi sobrina y mio es reirnos por todo... XD

Edison Manrique

student•

Aprendamos algo nuevo

Gracias a la etiqueta optgroup, podemos crear listas desplegables divididas por secciones. Es probable que si vienes desde 0, te cueste un poco porque involucra a varias etiquetas más, pero cuando vayas practicando y avanzando la entenderás mucho mejor.

Resultado

Código

Juan Castro

teacher•

GRAN aporte. :100:

Nacho Daniel sanchez

student•

Genial, que thema usas en el Vs code? esta muy bueno

Julian S

student•

Hipoge -> Agua Capipepo -> Tierra Ratigueya -> Fuego Langostelvis -> Agua y Fuego Tucapalma -> Agua y Tierra Pydos -> Tierra y Fuego

:clap: :heart:

Gustavo Arias

student•

📌Mis apuntes de la clase (Por si a alguien le sirve): . 💥SINTAXIS: <input type="_" name="_" id="_" /> <label> for="_" </label> . 💥INPUT: Se usa para crear controles interactivos para formularios basados en la web con el fin de recibir datos del usuario. . 💥TYPE: El tipo de control a mostrar. Su valor predeterminado es text, si no se especifica este atributo. . 💥RADIO (& NAME): Botón radio. Se debe utilizar el atributo value para definir el valor que se enviará por este elemento. Se utiliza el atributo checked para indicar si el elemento está seleccionado de forma predeterminada. Los botones radio que tengan el mismo valor para su atributo name están dentro del mismo "grupo de botones radio". Solo un botón radio dentro de un grupo puede ser seleccionado a la vez. . 💥ID: El atributo ID especifica un único ID para el elemento HTML (el valor debe ser único, o sea, no repetirse dentro del documento HTML). . 💥LABEL: El elemento HTML <label> representa una etiqueta para un elemento en una interfaz de usuario. Este puede estar asociado con un control ya sea mediante la utilizacion del atributo for, o ubicando el control dentro del elemento label. Tal control es llamado "el control etiquetado" del elemento label.

Elizabeth M

student•

gracias excelente aporte justo lo estoy leyendo y anotando en mis apuntes 😃

Diego Cumpa

student•

¿El <label> for="" </label> está incorrecto?

Me parece que es <label for=" "> " " </label>

Por cierto, buenas anotaciones.

Everardo Garza

student•

Me imaginé esta manera de seleccionar tu mascota y se me hizo mejor así que me puse a investigar como se hacía, y así es como quedó.

 <section id="seleccionar-mascota">
            <h3>Elige tu mascota</h3>
    
            <select name="mascota">    
                <option id="hipodoge">Hipodoge</option>
                <option id="capipepo">Capipepo</option>
                <option id="ratigueya">Ratigueya</option>
            </select>    

            <button>Seleccionar</button>

        </section>

Santiago Fernández Cabal

student•

Buenardo!

Juan Francisco

student•

Buen aporte, el resultado final era lo que me imaginaba al leer tu codigo

Juan Camilo Aristizabal Carvajal

student•

Dejaré algunos aportes que con la practica harán que puedan hacer todas esas líneas en menos de 20 segundos:

1.pueden usar el multicursor para editar en varias lineas de forma simultanea con Alt + Ctrl y las flechas

2. con Ctrl + Shift y -> seleccionan todos los nombres para tenerlos en el portapapeles

3. con Shift + Alt pueden duplicar lineas de código

4. vuelven a utilizar el multicursor

5. simplemente le dan Ctrl + V y ya tienen todos las mascotas.

6. lo demas es solo seguir escribiendo

Omar Santana

student•

Gran aporte servirá para no agotar tanto tiempo escribiendo

Silvano Cortes

student•

muchas gracias use su truco y termine muy rápido

Griger Ratia

student•

OTRA FORMA DE USAR LABEL

<label>Mascota
      <input type="radio" name="mascota">
</label>

Puedes ver que como input se encuentra dentro de label no es necesario usar for

Nestor Rios Garcia

student•

Buen aporte.

Hasta diría que queda mejor así.

Alexander Reyes

student•

Las dos formas son válidas.

Alexis Bacik

student•

Este profesor está re loco jajajaja. Excelente servicio: ⭐⭐⭐⭐⭐⭐⭐⭐⭐

Euge Oller

student•

Faltó el legendario PIKACHO, sólo los verdaderos Platzinautas recordarán.

Daniel Mora

student•

En realidad era Pokacho ajaj, pero si, ese legandario

Eduardo Peña Ramos

student•

El Equipo Legal de Plasti sugirió usar otro nombre alternativo. 😂

Brandon Argel Verdeja Domínguez

student•

Viendo como va este proyecto estaría genial utilizar una API de pokemones, y poder filtrar y seleccionar el pokemon que queramos (No sé mucho de pokemones, pero estaría muy interesante)

Juan Castro

teacher•

vamos a crear nuestra propia API de Mokepones :eyes:

Brandon Argel Verdeja Domínguez

student•

¡Entonces estará mucho mejor! Gracias juandc.

Xiomara Alejandra Hernández Arzola

student•

Me imagino como habrá sido la reunión donde tenian que elegir los nombres JAJAJAJAJA

Juan Castro

teacher•

No tienes idea :P

Edgar Contreras

student•

Jajajaja. El brainstorming actuando en el momento🧠.

Sebastian Calderon

student•

Estuve probando e investigando la manera de agregarle mas detalles, encontré como agregarle imágenes. Resultado de como va quedando.

les dejo el código mas abajo, si alguien le sirve.

<code> 
```<!DOCTYPE html>
<html>
    <head>
        <meta charset="uft-8"/>
        <title>MOKEPON!</title>
    </head>
    <body>
        
        <h2>MOKEPON!🔥💧🌱</h2>

        <section id="Seleccionar-Mascota">
            <h3>Elige tu Mokemon
            <img src="img/Pokeponla.jpg"  width="40" height="25"></h3> 
          
            <input type="radio" name="mascota" id="Hipodoge"/>
            <label for="Hipodoge">Hipodoge</label> <br>
            <img src="img/Hipodoge.jpg" width="130" height="100"> <br>

            <input type="radio" name="mascota" id="Capipepo"/>
            <label for="Capipepo">Capipepo</label> <br>
            <img src="img/Capipeo.jpg" width="130" height="100"> <br>

            <input type="radio" name="mascota" id="Ratigueya"/>
            <label for="Ratigueya">Ratigueya</label> <br>
            <img src="img/Ratigueya.jpg" width="130" height="100"> <br>
            
            <button>Seleccionar</button>
        </section>

        <section id="Seleccionar-Ataque">
            <h3>Elige tu Ataque:</h3>

            <p>Tu Mascota tiene <span>3</span> vidas</p>
            <p>Las mascotas del enemigo tiene <span>3</span> vidas</p>
            
            <p>
                <button>Fuego 🔥</button>
                <button>Agua 💧</button>
                <button>Tierra 🌱</button>
            </p>
    </section>

    <section id="Mensajes">
        <p>Tu Mascota ataco con FUEGO🔥, La mascota del enemigo ataco con TIERRA🌱 - GANASTE🎉</p>
    </section>  

    <section id="Reiniciar">
        <button> Reiniciar</button>
    </section>

    </body>
</html>

Josue Quevedo Portas

student•

Dice Nintendo que te andan buscando por unas cosas de Derechos de Autor jajajajajaja 🤣

Juana Barreto

student•

yo le cambie el nombre de las mascotas

Juan Castro

teacher•

¿Cuáles nombres usaste? :eyes:

sara arias aristizabal

student•

yo tambien

Andres Cavedal

student•

Quiero confesar que cuando se fue Freddy me entristeci bastante por que lo amo a Freddy, pero las clases de Juan realmente no solo me dejan satisfecho sino que me di cuenta que me gusta mas que Freddy (espero que no lo lea jaja). Gracias juan, el Paul Atreides latino te queremos! ❤

Heraldo López

student•

Amo que Timothée me explique todo detallado y siendo amigable, eso me da más motivación para seguir este curso.

Pilar

student•

timothee xDDD si se parece

ALBERTO PÉREZ

student•

He visto en bootcamps que lo utlizan de la siguiente manera: <label>Mokipon<input type="radio"/></label>. Hay alguna diferencia?, estaría bien utilizar cualquiera de las dos formas?

Juan Castro

teacher•

¡Eso también funciona! :ok_hand:

Marian Mancilla

student•

hola compañero, qué es bootcamps?

Ariel Andrés Tapia

student•

La mayoría de las pantallas de las calculadoras pueden mostrar hasta 10 dígitos. Por lo tanto, para números mayores a 1,000,000,000, las calculadoras incorporan el símbolo E, el cual proviene de notaciones científicas. Esto le permite a las calculadoras indicar valores muy largos.

E representa 10 a un cierto exponente. Por ejemplo, 5.23 E significa 5.23 x 10^4. Esto es un resumen para escribir 52,300. Al usar E, la calculadora puede mostrar tanto números muy largos o muy pequeños. Por ejemplo, 5.1 E -4 significa 5.1 x 10^ -4, lo cual equivale a 0.00051. Cuando hay muchos ceros, como para 0.0000000000000000001, lo cual la calculadora no puede mostrar, la E ayuda a acortarlo a una forma que se pueda leer.

Selección de Mascotas en HTML para Juegos Interactivos

¿Cómo se estructura y gestiona el código HTML para seleccionar una mascota en el juego Mokepón?

¿Cuáles son las mascotas disponibles?

¿Cómo se implementan los inputs en HTML?

¿Cómo se vinculan los labels con los inputs?

¿Cómo se agrupan los inputs?

¿Cuál es la importancia del identificador único id?

Implementación de interactividad

¿Cuál es la importancia del identificador único `id`?