Fundamentos de Programación
Bienvenida a Platzi: ¿qué necesitas para tomar el curso?
Programación en Navegadores: Primeros Pasos
Crea tu primer sitio web
Sitios web con HTML
Estructura de árbol en HTML
Instalando tu primer editor de código
Cómo declarar variables y usar prompt
Algoritmo de piedra, papel o tijera
Algoritmo avanzado de piedra, papel o tijera
Aleatoriedad
Refactor del código usando funciones
Ciclos
Gana 3 veces
Archivos de HTML y JavaScript
¿Qué es el DOM?
Quiz: Fundamentos de Programación
Desarrollando un juego con HTML y JavaScript
Maquetación con HTML
Sección de elegir mascota
¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript
Escuchando eventos con JavaScript
addEventListener
Manipulación del DOM
Enemigos aleatorios
Ataques en JavaScript
Ataques aleatorios del enemigo
Imprimiendo ataques del enemigo
¿Ganaste, perdiste o empataste?
Tablas de verdad
Creando el contador de vidas
¿Quién ganó el juego?
Reiniciando el juego
Ocultando elementos HTML con JS para mejorar la UX del juego
Quiz: Desarrollando un juego con HTML y JavaScript
Estilos con CSS
Anatomía de CSS
Tipos de display
Flexbox
Modelo de caja
Imágenes para los Mokepones
Estilos del botón
Adaptando HTML al diseño del juego
Layout: título y ataques
Adaptando JavaScript al diseño del juego
CSS Grid
Responsive Design
Detalles finales
Quiz: Estilos con CSS
Optimización de código
Revisión de código
Don't repeat yourself (DRY)
Clases y objetos
Clases y objetos de Mokepon
Arrays o arreglos
Objetos vs. arreglos
Ciclos: manipulando el DOM con iteradores
Declaración lenta de variables
Una sola fuente de la verdad
Mascotas aleatorias con arreglos
Ataques dinámicos por cada mascota: extraer
Renderizado dinámico en HTML
Eventos de click dinámicos
Secuencia de ataques del enemigo
Iniciando el combate
Resolviendo el reto de condicionales
Optimizando el frontend del juego
Quiz: Optimización de código
Mapa con canvas
Introducción a canvas: dibujando con JavaScript
Moviendo a Capipepo hacia la derecha
Movimiento hacia todas las direcciones
Movimientos con el teclado
Imágenes y personajes de fondo
Métodos en las clases
Obstáculos y colisiones
Combate entre mokepones colisionados
Mapa responsive
Botones bonitos y viewport
Quiz: Mapa con canvas
Backend: videojuego multijugador
¿Qué es backend?
Instalación de Node.js y NPM
Terminal de comandos y Node.js
Servidor web con Express.js
HTTP, localhost, servidores y puertos
Express.js y fetch: API REST con JavaScript
JSON y POST: mokepon online
Transmisión de coordenadas
Mokepones dinámicos en el mapa
Optimizando el mapa del juego
Batalla entre jugadores
Consumiendo la API de ataques del enemigo
Quiz: Backend: videojuego multijugador
Próximos pasos
Probando el juego en varios dispositivos
¿Y ahora qué curso tomar?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Ahora que conoces lo más básico de programar ¿te animas a crear un pequeño juego de piedra papel o tijera con tu navegador?
Esta clase requiere que sepas lo fundamental sobre crear archivos HTML y escribir código JavaScript. Si aún no lo sabes, entonces visita la primera clase del curso y empieza desde allí 🙂 Esta es la clase número 9 del curso gratis de programación básica de Platzi 💚
Ahora, antes de empezar, déjame darte algunos tips que seguro te ayudarán 😉
La computadora ignora todo lo que escribas después de un “//” en una línea de código. Así que puedes usar esto para dejar mensajes útiles para ti (o tus compañeros) a lo largo del código.
Por ejemplo:
//RECOGIENDO LA ELECCIÓN DEL JUGADOR
let eleccionJugador = prompt(); // Aquí el jugador elije piedra, papel o tijera
Se recomienda fuertemente usar nombres que dejen claro el propósito de la variable. Evita usar nombres sencillos como “a”, porque puedes olvidar que es lo que hace cuando trabajas con muchas variables a la vez.
La práctica más común es utilizar nombres compuestos por varias palabras en Camel Case (sin espacios, empezando en minúscula, y colocando en mayúscula la inicial de todas las palabras después de la primera).
Ojo, recuerda no emplear acentos ni “ñ” en tu código para evitar errores de lectura.
Por ejemplo:
eleccionUsuario
nombreUsuario
primerApellidoUsuario
fechaNacimientoUsuario
Si lo piensas bien, el juego de piedra, papel y tijera requiere de condiciones como “si el jugador elije piedra y la computadora elije piedra, entonces el jugador gana”.
Para hacer eso en JavaScript debes seguir una formula sencilla:
if ( variableAComparar == ValorDeComparacion ) {
//Código a ejecutar si la condición se cumple
}
else if ( variableAComparar == ValorDeComparacion2 ) {
//Código a ejecutar si la condición 1 no se cumple, pero la segunda sí
}
else ( variableAComparar == ValorDeComparacion3 ) {
//Código a ejecutar si ninguna condición se cumple
}
En resumen:
if para evaluar la primera condición. else if, para evaluar más condiciones si la primera no se cumple, y else para decir lo que ocurrirá si ninguna otra condición se cumple.= se utiliza para asignar valores a las variables. Si deseas comparar variables con valores dentro de un if, entonces debes emplear un ==. También puedes emplear un ===si quieres comparar tanto el valor como el tipo de dato (número, string, o *boolean).{} es el código que se va a ejecutar si la condición entre paréntesis se cumple.💡 Los datos tipo Boolean son datos “Verdadero o falso”. Puedes escribirlos como true / false o 1 / 0. Por lo regular son muy útiles 👍
Esto lo vamos a hacer en dos partes. Y lo primero es crear el archivo HTML dónde vamos a escribir nuestro código, abrirlo en nuestro editor de código, y escribir la base en HTML.
Intenta hacerlo sin ayuda 😉 Y si te pierdes, aquí te dejo el código que deberías preparar de primeras.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Algoritmo piedra, papel o tijera</title>
<script>
</script>
</head>
<body>
<h1>Piedra, papel o tijera</h1>
</body>
</html>
Luego escribiremos un código que nos permita saber si el jugador elije piedra papel o tijera. Intenta crear una variable que capture la elección del jugador usando un prompt(). Explícale que escriba 1 para piedra, 2 para papel o 3 para tijera, y luego recuérdale el número que eligió con un alert().
Intenta hacerlo sin ver la solución. Cuando termines, compara lo que obtuviste con el código de abajo y sigue leyendo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Algoritmo piedra, papel o tijera</title>
<script>
//OBTENIENDO LA ELECCIÓN DEL JUGADOR
let eleccionDelJugador = 0;
eleccionDelJugador = prompt("Elige: 1 para piedra, 2 para papel, 3 para tijera");
alert("Elegiste " + jugador);
</script>
</head>
<body>
<h1>Piedra, papel o tijera</h1>
</body>
</html>
Bien, ahora probemos con la condición. Primero convierte el recordatorio en un comentario. Vamos a crear un recordatorio más preciso, uno que le diga al usuario si eligió piedra, papel, tijera, o algo más.
Para hacerlo, inicia una condición dónde vas a hacer tres comparaciones. Primero usa un if para evaluar si el jugador eligió piedra. Si lo hizo, envíale un alert() indicándole que eligió piedra. Luego usa un par de else if para evaluar si eligió papel o tijeras, y envíale un alert() en cada uno informándole de su decisión.
Finalmente, emplea un else para evitar que el jugador quiera pasarse de listo al escribir algo que no sea 1, 2 o 3. En ese caso, envíale un alert() indicándole que elija 1, 2 o 3 (o juegale una broma. Es tu juego después de todo 😉).
Intenta hacerlo por tu cuenta. Y cuando termines, compáralo con el código de abajo antes de continuar.
¡Recuerda probar tu código en el navegador y pulirlo hasta que funcione!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Algoritmo piedra, papel o tijera</title>
<script>
//OBTENIENDO LA ELECCIÓN DEL JUGADOR
let eleccionDelJugador = 0;
eleccionDelJugador = prompt( "Elige: 1 para piedra, 2 para papel, 3 para tijera" );
// alert( "Elegiste " + jugador );
//INFORMANDO LA ELECCIÓN DEL JUGADOR
if ( eleccionDelJugador == 1 ) {
alert( "Elegiste piedra" );
}
else if ( eleccionDelJugador == 2 ) {
alert( "Elegiste papel" )
}
else if ( eleccionDelJugador == 3 ) {
alert( "Elegiste tijera" )
}
else {
alert( "Elegiste otra cosa, así no puedes jugar >-<" )
}
</script>
</head>
<body>
<h1>Piedra, papel o tijera</h1>
</body>
</html>
Dejémoslo hasta aquí por ahora. Intenta reproducir este código por tu cuenta ahora que sabes cómo funciona. Y cuando estés listo, acompáñame a terminar este pequeño juego en: Algoritmo avanzado de piedra, papel o tijera
Contribución creada por: Jhonkar Sufia (Platzi Contributor).
Aportes 418
Preguntas 267
Algo mágico de la programación es que hay MUCHAS formas de hacer lo mismo. En los aportes de esta clase abajo encontrarás varias alternativas para hacer este mismo algoritmo 👇
No hay una mejor o peor, solo son diferentes. Así es la creatividad del software 💚
💚💚💚En el anterior curso de Programación había personas que ya tenían experiencia programando y los ejercicios los hacían de una manera más elaborada solo para lucirse, gente por favor si van a hacer aportes que sean sobre esta clase y que sean útiles para que nos apoyemos entre todos 💚💚💚
Tip: el atajo que usa Freddy al inicio de la clase para abrir un nuevo archivo rápido es Ctrl + N 😄 y luego lo guarda con Ctrl + S Usar comandos es rápido y es Genial!
ㅤ
La etiqueta <!DOCTYPE html> informa al navegador la versión de HTML, útil para compatibilidad con navegadores antiguos.
ㅤ
Se usa // para colocar comentarios en JavaScript, estos no son leídos por el navegador.
ㅤ
Una condicional es el código que solo se ejecuta si se cumplan cierta condición.
ㅤ
El == es el símbolo que se usa para comparación. Se usa el símbolo = para asignación de valores.
<!DOCTYPE html> → se usa para tener compatibilidad con navegadores viejos// → doble slash se usa para comentar codigo, no afecta la codigoCTRL + Z== → Comparación. esto es igual a esto= es de asignación. esto entra dentro de esta variableif()
if() pero no se ve bien y es una mala practica. la mejor opcion es ejecutarlo en cascada con else if()<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Piedra, papel o tijera</title>
<script>
// 1 es piedra, 2 es papel, 3 es tijera
let jugador = 0
let pc = 2
jugador = prompt("Elije: 1 para piedra, 2 para papel, 3 para tijera ")
//alert("Elejista " + jugador)
if(jugador == 1) {
alert("Elejiste piedra")
} else if(jugador == 2){
alert("Elejista papel")
} else if(jugador == 3){
alert("Elejiste tijera")
} else{ // Si elije otra opcion que no sea 1,2 o 3. mostrar:
alert("ELEJISTE PERDER!!")
}
</script>
</head>
<body>
<h1>Piedra, papel o tijera</h1>
</body>
</html>
Si se quieren simplificar la vida pongan Html 5 en Visual Estudio Code eso ya establece toda la estructura. Pero les recomiendo que lo escriban manualmente como lo hace Freddy si están aprendiendo!!! 😃 😃 😃
2 preguntas que me estaba haciendo y encontré las respuestas. Se los dejo aquí para que les sea de utilidad.
¿ Por qué la variable ’ jugador ’ es cero?
Al ponerle 0 , estamos creando una variable vacía para que luego pueda tomar un valor ingresado por el jugador.
¿ Por qué la variable jugador de prompt al ser comparado con número no da error?
Javascript hace una conversión automática entre los string y números, en este caso el valor de prompt se cambiará automáticamente a un número por la comparación que hicimos en el if.
Si ejecutamos el siguiente código en la consola verán que esto es verdadero
“2” == 2 (true)
var jugador = "tijeras";
var cpu = "piedra";
if (jugador == "tijeras" && cpu == "piedra") {
console.log("Perdiste");
} else if (jugador == "piedra" && cpu == "papel") {
console.log("Perdiste");
} else if (jugador == "papel" && cpu == "tijeras") {
console.log("Perdiste");
} else {
console.log("Ganaste");
}
var jugador = "tijeras";
var cpu = "piedra";
if (jugador == "tijeras" && cpu == "piedra") {
console.log("Perdiste");
else if (jugador == "piedra" && cpu == "papel") {
console.log("Perdiste");
else if (jugador == "papel" && cpu == "tijeras") {
console.log("Perdiste");
else {
console.log("Ganaste");
Vamos a ejecutarlo en el console del navegador
.
.
Como puedes ver retorno perdiste, porque se cumplió la primera condición, pero si cambiamos nuestras variables en un caso donde el jugador gane debería retornar esto.
.
.
Porque no se cumplió ninguna condición donde la maquina ganara. espero te haya servido, si no lo entendiste del todo, tranquilo, mas adelante lo harás, guarda este código te servirá mas adelante 😄
MIS APUNTES😎😁
Ya me siento un crack aunque sea un poquito :3
Solo espero que lo tomen con humor 😁. Saludos a todos los “expertos”
Condicionales
Una condición es un bloque de código que permite comparar distintas variables, y en base a los resultados decidir el flujo de un programa. Recuerda que estas se conforman de if, else if, y else.
*
Cuando comencemos con las condiciones, en la primera usaremos if que significa "si"
Ejemplo:
if (jugador == 1) //Si la variable juagador vale uno
{
alert ("Elegiste piedra")
}
Para agregar más condiciones abajo utilizamos else if
Ejemplo:
else if (jugador == 2) //Si la variable jugador vale dos
{
alert ("Elegiste papel")
}
else if (jugador == 3) //Si la variable jugador vale tres
{
alert ("Elegiste tijera")
}
Al último de las condiciones si es necesario podemos usar else , que entrara en función si la variable jugador no es igual a ninguna de las condiciones anteriores
Ejemplo:
else //Si la variable no vale uno, dos o tres
{
alert("Elegiste PERDER!!!!!!")
}
Así quedaría la estructura completa
if (jugador == 1) //Si la variable juagador vale uno
{
alert ("Elegiste piedra")
}
else if (jugador == 2) //Si la variable jugador vale dos
{
alert ("Elegiste papel")
}
else if (jugador == 3) //Si la variable vale tres
{
alert ("Elegiste tijera")
}
else //Si la variable no vale uno, dos o tres
{
alert("Elegiste PERDER!!!!!!")
}
No olvides los paréntesis para los parámetros donde ira la condición y las llaves la iniciar y terminar cada bloque. ¡Suerte! 😉
Puedes comentar en diferentes tipos de archivo con el shortcut:
ctrl + k + c
y para desmarcar lo comentado;
ctrl + k + u
En los ajustes de File pueden activar la opción “Auto guardar” para que el editor de texto guarde los cambios automáticamente cada vez que hacen algún cambio 😉
De esta clase no pienso avanzar hasta entender bien los condicionales
Me pareció muy valido un comentario de un profesor en la clase anterior, en donde hacia la sugerencia de colocar al inicio “html:5”, ahorra bastante tiempo al iniciar. Es super útil.
Cuando Freddy preguntó “cómo se dice si en inglés” yo disque YES. Menos mal que no estoy programando sola JAJAJA
Hola chicos, si eres un principiante en programación como yo; no leas los comentarios en profundidad por tu salud mental y por cuidar tu RITMO de aprendizaje, saludos especiales. Atte: Miss Alegra.
😄 Este fue mi resultado al tratar de hacer el algoritmo por mi cuenta.
Hay fundamentos de JavaScript que ya debes ir reforzando. Como variables, funciones, ciclos y condicionales. Si aprendes estas sabrás hacer el programa que sea.
He aquí los condicionales. Nuestras páginas web necesitan tomar decisiones dependiendo de cómo interactúa el usuario con ellas. Ejemplo…
SI (el video está en pausa){
aparece_un_icono_de_Play()
} SINO SI (el video está corriendo) {
habilita_el_icono_de_Pausa()
}
if(videoEnPausa){
mostrarIconoPlay()
} else if(videoEnPlay){
mostrarIconoPausa()
}
Lo que está ocurriendo es lo siguiente: la computadora pregunta
ES VERDAD QUE EL VIDEO ESTÁ EN PAUSA ?
COLOCARÉ EL ICONO DE PLAY SI ES VERDAD : COLOCARÉ EL ICONO DE PAUSA SI ES FALSO
Es por eso que podemos usar una expresión llamada, operador ternario, que funciona igual que usar if y else if. Usando el ejemplo de la clase sería así:
let jugador = prompt("")
jugador==1 ? alert("Elegiste Piedra") :
jugador==2 ? alert("Elegiste Papel") :
jugador==3 ? alert("Elegiste Tijera") : alert("Elegiste otro numero")
Juega con los condicionales como quieras y aprende a usar el operador ternario.
La etiqueta <!DOCTYPE html> no es para tener compatibilidad con buscadores antiguos, pasa lo contrario.
Al poner esta etiqueta le hacemos saber a los buscadores que estamos trabajando con la última versión de html, que es la 5, y al omitir esta etiqueta entramos al modo quirk .
Existen 3 modos que utilizan los navegadores web, quirk mode, almost standard mode y full standard mode.
Dejo las referencias para mejor consulta de esta información.
https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
https://www.w3schools.com/tags/tag_doctype.asp
Alguien mas old school se dio cuenta que en el anterior curso gratis de programacion Freddy nos mandaba a poner el script al final del body y ahora lo pone al final del head jajajaj
Me está costando un poquito esta parte del curso, como es el juego Piedra, papel y tijera. Estoy revisando el proceso.
La didactica con la que enseñan es brutal. Es otro nivel.
oye que divertido
El límite es uno mismo
Hola. Un poco tarde. El curso pasado no logré terminarlo pues entre apagones y mal servicio de intertnet acá en Venezuela pues no pude continuar. En esta oportunidad espero terminarlo.
jajajaja yo empesando el curso y ya todos terminaron
Esta es mi version simple de este algoritmo, espero les guste 😃, https://nnzthzpvl4w8vdqb0atpww.on.drv.tw/Piedra-Papel-Tijera/
Se debe prestar mucha atención a como el profe dispone los else if y los espacios donde quedan las llaves porque en mi caso si la llave que cierra no se encuentra en el renglon de abajo, aunque guarde, no se ejecuta el cuadro de dialogo que debe aparecer.
ps: estuve 10 minutos buscando las llaves en mi teclado de la laptop y me las dibuja como corchetes y no como llaves, pero toma la orden igual.
Saludos
location.reload()
Al final del código para que no tengas que recargar de manera manual, sino que se haga de manera automática.
Pàgina para consultar más información con respecto a temas relacionados de javascript
Me gustan las clases de Freddy, los aportes de la gente deberían ser acordes a la clase, hay quienes ponen cosas muy avanzadas para nosotros los principiantes.
Buenas tardes!
Quiero comentar que al terminar el video 8 y llegar hasta ese punto, me sirvió mucho abrir una ventana de Visual Studio Code y otra del navegador juntas, para ir probando con las opciones 1, 2 y 3 y ver, analizar y entender qué es lo que me aparece en pantalla y qué es lo que la computadora está haciendo sin que lo veamos.
Me recordó a los momentos en que intentaba entender y aprender las laaaaaargas fórmulas de Excel y fue siempre probando y probando.
A que me vuelvo chango… trato de no apagar el cerebro y siga funcionando no rendirse… ahi voy
muchas gracias por este curso : ) para mi que no tengo ni idea de la programacion no me costo mucho. que bueno es poder poner pausa y regresar. lo importante es entender y aplicar no importa cuanto tardes . animooo
//
Todo lo que le coloque en frente es un comentario.Me agrada mucho este curso, porque de cierta forma gracias a lo que aprendí en Excel, se me hace más sencillo considero que sirve de base aprender Excel.
el curso esta increible… lleve algunos por udemy y ninguno me ayudo como este!
Yo quiero compartir el mio, lo hice en otras clases, pero me tomo mi tiempo hacerlo funcionar, espero les guste.
Lo que aprendí aparte de crear mi primer algoritmo fue:
.
Que todo lo que yo coloque en el // se considera como comentario, esto es solamente para mi.
.
Cuando mi código se esta extendiendo puedo utilizar una herramienta de View, la cual es Word Wrap; que me permite ver todo en un solo lado.
.
Cómo poder preguntar la opción que elegí en el juego a través de una condicional.Y esta es un código que solo se ejecuta **SI **la condición se cumple, y todo esto lo coloco dentro de unas { }.
.
Colocar un doble == significa que estoy haciendo una comparación, mientras que uno solo = es de asignación.
.
Ejecutar un código en cascada, colo cando enfrente la llave del if la palabra else if e indicar la siguiente condición.
.
Les comparto mi código espero les sirva.
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Piedra, papel o tijeras</title>
<script>
// 1 es piedra, 2 es papel, 3 es tijera
let jugador = 0
let pc = 2
jugador = prompt("Elige: 1 para piedra, 2 para papel ó 3 para tijera")
//alert("Elegiste " + jugador)
if(jugador == 1) {
alert("Elegiste piedra")
} else if(jugador ==2) {
alert("Elegiste papel")
} else if(jugador ==3) {
alert("Elegiste tijera")
}else {
alert("PERDISTE")
}
</script>
</head>
<body>
<h1> Juego Piedra, papel o tijeras</h1>
</body>
</html>
<!DOCTYPE html> <!-- Compatibilidad con navegadores viejos -->
<html>
<head>
<meta charset="utf-8" />
<title>Stone, paper or scissor</title>
<script>
// 1 = stone, 2 = paper, 3 = scissor
let player = 0 // = símbolo de asignación
let computer = 2
player = prompt("Choose: 1 for stone, 2 for paper or 3 for scissor.")
// alert("You choose " + player)
// == Símbolo de comparación
if(player == 1){
// Bloque que se ejecuta sí la comparación es verdadera
alert("You choose stone")
} else if(player == 2){
alert("You choose paper")
} else if(player == 3){
alert("You chose scissor")
} else {
alert("You choose an incorrect option, try again.")
}
</script>
</head>
<body>
<h1>Stone, paper or scissor</h1>
</body>
</html>
Mi ejemplo. Hice que la opción elegida por el ordenador se genere de forma ‘aleatoria’.
Fredy va a 2000 por hora 😃 algo de humor a pesar de que es duro
Mi aporte a esta clase:
El uso de los = en programación con Javascript
= asignación
== igualación
=== validación
Mi cerebro explotó… jejeje
De aqui no avanzo hasta entenderlo bieeeen, así dure días, días y días… 😦
Tip ✅Para comentar por atajos de teclado te paras sobre la linea que quieras comentar (No hace falta seleccionar el texto, lo hace por defecto) y apretas Ctrl + K e inmediatamente después Ctrl + C.
para deshacer lo comentado haces Ctrl + K y Ctrl + U
compañeros sus formas de modificar el juego están muy buenas, a algunos nos falta tiempo para llegar a eso…tenemos que seguir aprendiendo , gracias Freddy Vega por tus clases , FELIZ DIA DE REYES…
In JavaScript we have the following conditional statements:
Use if to specify a block of code to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is false
Use else if to specify a new condition to test, if the first condition is false
Use switch to specify many alternative blocks of code to be executed
El entorno te permite instalar un plugin llamado LiveServer para poder optimizar a la hora de edición y prueba en simultáneo mediante el navegador. Bastante útil.
Gracias Platzi, excelente gancho un curso básico gratuito, tengan por seguro mi suscripción para cursos avanzados
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Piedra Papel o tijeras</title>
</head>
<body>
<script>
//1 es piedra, 2 es papel, 3 es tireja
var jugador = 0;
var pc = 2;
jugador = prompt("ELIGE: 1 es piedra, 2 es papel y 3 es tijera");
//alert("elegiste " + jugador)
if(jugador == 1)
{
alert("Felicidades, elegiste Piedra")
}
else if(jugador == 2)
{
alert("Felicidades, elegiste Papel")
}
else if(jugador == 3)
{
alert("Felicidades, elegiste tijera")
}
else
{
alert("Elegiste perder imbecil")
}
</script>
<h>Bienvenido al mundo de juego de Piedras, Papel o tijeras</h>
</body>
</html>
Me salia un error por no separar las lineas de codigo de los dondicionales con ";" por si alguno le pasa, puede ser esto.
muy buenas noches quiero agradecer a Platzi por esta plataforma y todo lo que se ve aquí espero seguir aprendiendo muchas cosas
= : asignación == : comparación
else ifif : si no si (efecto en cascasa). Delante de la última llave
Una condicional es un código que solo se ejecuta si la condición se cumple.
“==” este doble igual que coloca en la condicionante es usado para realizar una comparación.
{} = estas llaves son especiales por que solo se ejecuta lo que tiene por dentro cuando la condición que la precede se cumpla.
El “==” se usa para comparación, y “=” se usa para asignación.
EN RESUMEN
AQUÍ APRENDÍ:
<!DOCTYPE html> → se usa para tener compatibilidad con navegadores viejos
Se usa // para colocar comentarios en JavaScript, estos no son leídos por el navegador.
El == == Es Comparación. esto es igual a esto
El = es de asignación. esto entra dentro de esta variable
// → doble slash se usa para comentar codigo, no afecta la codigo
Para ajustar texto largo en VS se utiliza: view → Word Wrap (ajustar palabra) o CTRL + Z
El prompt en JavaScript es una función que muestra un cuadro de diálogo que pide al usuario que ingrese algún tipo de información, y devuelve esa información como una cadena de texto.
Condicional: Es un código que solo se ejecuta si la condición se cumple → if()
1. If es una condición
o {} Lo que este dentro de las llaves depende de que la condición sea verdad
o Para ejecutar en cascada:
2. } else if (jugador == 2){
Alert(“elegiste tal cosa”)
3. } else : aquí, si no se cumple ninguna de las anteriores
Alert(“PERDISTE”)
messi
Dia 2 en el curso, aprendiendo cada vez mas. Le tengo fe al curso…
Así queda el <script> agregando la función para que la computadora elija de forma aleatoria y te de el resultado del juego:
<script>
// Función para generar numeros aleatorias entre 1 y 3
function generateRandomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// La coputadora elige aleatoreamente un número entre 1 y 3
let pc = generateRandomInteger(1,3)
//El jugador elige: 1 es piedra, 2 es papel, 3 es tijera
let jugador = 0
jugador = prompt("Elige 1 para piedra, 2 para papel, 3 para tijera")
if(jugador == 1) {
alert("Elegiste piedra")
if(pc == 1) {
alert("La computadora eligió piedra")
} else if(pc == 2) {
alert("La computadora eligió papel")
} else if(pc == 3) {
alert("La computadora eligió tijera")
}
} else if(jugador == 2) {
alert("Elegiste papel")
if(pc == 1) {
alert("La computadora eligió piedra")
} else if(pc == 2) {
alert("La computadora eligió papel")
} else if(pc == 3) {
alert("La computadora eligió tijera")
}
} else if(jugador == 3) {
alert("Elegiste tijera")
if(pc == 1) {
alert("La computadora eligió piedra")
} else if(pc == 2) {
alert("La computadora eligió papel")
} else if(pc == 3) {
alert("La computadora eligió tijera")
}
} else {
alert("Por favor elije una opción válida")
}
//Resultados si el jugador elige 1-piedra
if(jugador == 1 && pc == 1) {
alert("EMPATE")
} else if (jugador == 1 && pc == 2) {
alert("PERDISTE")
} else if (jugador == 1 && pc == 3) {
alert("GANASTE")
}
//Resultados si el jugador elige 2-papel
if(jugador == 2 && pc == 1) {
alert("GANASTE")
} else if (jugador == 2 && pc == 2) {
alert("EMPATE")
} else if (jugador == 2 && pc == 3) {
alert("PERDISTE")
}
//Resultados si el jugador elige 3-tijera
if(jugador == 3 && pc == 1) {
alert("PERDISTE")
} else if (jugador == 3 && pc == 2) {
alert("GANASTE")
} else if (jugador == 3 && pc == 3) {
alert("EMPATE")
}
</script>
Gracias por los aportes directos al grano dijo el dermatologo.
Logre hacer mi primer Juego Gracias.
Me costó sacar el código, no sabía que estaba sucediendo, pero no me salía la casilla, solo el texto del título. Afortunadamente, Freddy siempre menciona que el programar es un lenguaje exacto, pues bueno,tenía un par de paréntesis volando por ahí, los descubrí y quedó perfecto. Poco a poco vamos entendiendo mejor este cuento. Me encanta
Siempre me había gustado la programación, pero no había tenido la oportunidad de participar en un curso. Felicitaciones Freddy, explicas muy bien.
No entiendo algunas cosas.
Porqué fredy le asigna el número 0 a la variable jugador?
Porqué más abajo cita la variable jugador asignandole un comando? (Jugador = prompt( … )),
Porqué "alert (“Elegiste” + Jugador) no se ve en pantalla como “Elegiste 0” dado que a la variable Jugador se le fue asignado el número 0?
Yo intente hacer mi propio juego de piedra, papel y tijera antes de ver el vídeo.
<!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">
<title>PIEDRA PAPEL O TIJERA</title>
</head>
<body>
<h1 id="result"></h1>
<input type="button" id="repeat" value="Volver a jugar"></input>
<script>
let optionMe = ""
let optionMachine = ""
optionMe = prompt("Piedra(1), papel(2) o tijera(3) : ")
function getRandom(min,max){
return Math.random()*(max-min)+min
}
optionMachine = parseInt(getRandom(1,3.9)).toString()
var h = document.getElementById('result')
switch (optionMe) {
case "1":
if(optionMachine=="2"){
h.innerHTML="Perdiste"
}
else if(optionMachine=="3"){
h.innerHTML="Ganaste"
}
else h.innerHTML="Empate"
break;
case "2":
if(optionMachine=="1"){
h.innerHTML="Ganaste"
}
else if(optionMachine=="3"){
h.innerHTML="Perdiste"
}
else h.innerHTML="Empate"
break;
case "3":
if(optionMachine=="1"){
h.innerHTML="Perdiste"
}
else if(optionMachine=="3"){
h.innerHTML="Empate"
}
else h.innerHTML="Ganaste"
break;
default:
alert("Opción no valida...")
break;
}
switch(optionMachine){
case "1":
document.write("La máquina sacó Piedra ("+optionMachine+")")
break;
case "2":
document.write("La máquina sacó Papel ("+optionMachine+")")
break;
default:
document.write("La máquina sacó Tijera ("+optionMachine+")")
break;
}
var button = document.getElementById('repeat')
button.addEventListener("click",()=>{
location.reload()
})
</script>
</body>
</html>
Para empezar creo que esta bien.
Logré entenderle en menos de 10 minutos lo que lleva horas de clases
Practicando y aprendiendo.
!DOCTYPE.html: es un indicadores para ciertos navegadores antiguos
<h1> para colocar títulos
los “/” al principio se utilizan para poder escribir un comentario.
Una condicional es una condición que solo se ejecuta si esa condición se cumple y para eso se emplea {}
else if, se usa para evaluar más condiciones si la primera no se cumple.
Si se quiere comparar variables dentro de un if se debe emplear un ==. También se puede agregar un === si se quiere comparar tanto el valor como el tipo de dato. En cambio “=” se usa para asignar un valor.
Los datos tipo Boolean, son datos “verdadero o falso” se pueden escribir como true/ false o 1/0
Es el curso básico y con este corto video entendí muy fácil las condicionales, porque existes hasta AHORAAA? 😦
Aprovechen este curso gratis .
mi versión con switch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Piedra,paple y tijeras </title>
<script>
// 1 es piera, 2 es papel y 3 es tijera
let jugador = 0
let pc = 1
jugador = prompt("elige 1 para piedra, 2 para paple y 3 para tijera: ")
alert("elegiste : " + jugador)
switch(jugador){
case "1":
alert("elegiste piedra")
break
case "2":
alert("elegiste papel")
break
case "3":
alert("elegiste tijeras")
break
}
</script>
</head>
<body>
<h1> juguemos </h1>
</body>
</html>
Para empezar a escribir código en HTML más fácil y rápido:
simplemente pongan el signo (!) y le dan enter, de esta manera se arma la estructura base para empezar a escribir código en HTML
He hecho el código más corto, utilizando una array que almacena todas las opciones. Y luego esa opción se imprime en dependiendo en que elegido la persona.
const options = ['piedra', 'papel', 'tijera'];
let optionPc = 2;
let optionUser = prompt(`Ingrese tu opción:
1: piedra
2: papel
3: tijera`);
alert(`Elegiste ${options[optionUser-1]}`);
alert(`La pc eligio ${options[optionPc-1]}`);
Para el que no sepa, los array en pocas palabras son variables las cuales pueden almacenas varios datos. Y la forma de acceder a ellos es por medio de su índice que inicia en 0, por eso es que se le recta uno a la opción de usuario y la pc para que se imprima la opción correcta.
La importancia de <!DOCTYPE> a veces es ignorada, pero es muy necesario, ya que con esta etiqueta se puede saber de que tipo de documento se trata. Tambien si no llegase a existir en tu codigo puede producir ciertos errores en la interfaz.
Es un poco largo el código, peor les comparto mi versión con Puchamones
<!DOCTYPE html>
<html>
<head>
<title><h1> Batalla Puchamon </h1></title>
</head>
<body>
<script>
let user_puchamon = prompt ("Elige un Puchamon: \n \r 1. Charmander 2. Squirtle 3. Bulbasaur");
let Charmander = 1;
let Squirtle = 2;
let Bulbasaur = 3;
if (user_puchamon == 1)
{
alert ("tu Puchamon es Charmander")
}
else if (user_puchamon == 2)
{
alert ("Tu Puchamon es Squirtle")
}
else if (user_puchamon == 3)
{
alert ("Tu Puchamon es Bulbasaur")
}
else
{
alert ("Lo siento, ese Puchamon no existe, GAME OVER")
}
let rival_puchamon = prompt ("Elige un Puchamon rival: \n \r 1. Charmander 2. Squirtle 3. Bulbasaur")
let Charmander_rival = 1;
let Squirtle_rival = 2;
let Bulbasaur_rival = 3;
if (rival_puchamon == 1)
{
alert ("tu Puchamon rival es Charmander")
}
else if (rival_puchamon == 2)
{
alert ("Tu Puchamon rival es Squirtle")
}
else if (rival_puchamon == 3)
{
alert ("Tu Puchamon rival es Bulbasaur")
}
if (user_puchamon == 1 && (rival_puchamon == 1) )
{
alert ("Ha sido un empate")
}
else if (user_puchamon == 1 && (rival_puchamon == 2) )
{
alert ("Oh no! EL Squirtle rival ha ganado")
}
else if (user_puchamon == 1 && (rival_puchamon == 3) )
{
alert ("Felicidades, tu Charmander ha ganado!")
}
if (user_puchamon == 2 && (rival_puchamon == 2) )
{
alert ("Ha sido un empate")
}
else if (user_puchamon == 2 && (rival_puchamon == 1) )
{
alert ("Felicidades, tu Squirtle ha ganado!")
}
else if (user_puchamon == 2 && (rival_puchamon == 3) )
{
alert ("Oh no!, el Bulbasaur rival ha ganado!")
}
if (user_puchamon == 3 && (rival_puchamon == 3) )
{
alert ("Ha sido un empate")
}
else if (user_puchamon == 3 && (rival_puchamon == 1) )
{
alert ("Oh no!, el Charmander rival ha ganado!")
}
else if (user_puchamon == 3 && (rival_puchamon == 2) )
{
alert ("Felicidades, tu Bulbasaur ha ganado!")
}
</script>
</body>
</html>
me gusto mucho lo del ejemplo del arbolito, hace mas facil el aprendizaje
//“al principio no me salia pero ahora si”
Ya me está empezando a gustar mas la programación
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8” />
<title>Piedra, papel o tijera</title>
<script>
// 1 es piedra, 2 es papel, 3 es tijera
let jugador = 0
let pc = 2
jugador= prompt(“Elige: 1 para 🥌, 2 para 📰, 3 para ✂️”)
//alert("Elegiste " + jugador)
if ( jugador == 1 ) {
alert ("Elegiste 🥌 ")
} else if (jugador == 2 ) {
alert ( “Elegiste 📰” )
} else if( jugador ==3) {
alert ( “Elegiste ✂️” )
} else {
alert ( “Elegiste PERDER” )
}
</script>
</head>
<body>
<h1>Piedra, papel o tijera</h1>
</body>
</html>
Freddy es mas duro que infancia en Venezuela ❤️
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Piedra, Papel o Tijeras</title>
<script>
// 1 piedra, 2 papel, 3 tijeras
let jugador = 0
let pc = 3
jugador = prompt("Elige una opción: 1=Piedra / 2=Papel / 3=Tijeras ")
if (jugador == 1) {
alert("Elegiste Piedra");
}
else if (jugador == 2) {
alert("Elegiste Papel");
} else if (jugador == 3) {
alert("Elegiste Tijera");
} else {
alert("Opción Incorrecta, Intenta nuevamente!!!");
}
</script>
</head>
<body>
</body>
</html>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?