Para insertar emojis en VisualStudio:
Windows: Windows + . (punto)
Mac : Control + Command + Space
Fundamentos de Programación
Bienvenida a Platzi: ¿qué necesitas para tomar el curso?
¿Cómo aprender programación?
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
Ya construimos la base de nuestro juego de piedra, papel o tijera. Ahora pongámoslo a funcionar. Esta es la segunda parte del ejercicio de programar un juego de piedra, papel o tijera que planteamos la clase anterior. Visita la clase si deseas ver cómo llegamos hasta aquí 😉
Aquí nos quedamos. Compáralo con tu código, o construye el tuyo para continuar la clase 🙂
💡 Ojo, no copies y pegues si no lo has hecho aún. Al contrario, aprovecha la oportunidad para practicar 😉
Sin embargo, si tienes problemas para visualizarlo por el tamaño de la ventana, prueba copiandolo y pegandolo en un archivo HTML diferente al tuyo en Visual Studio Code. Ahí deberías poder verlo bien 👍
<!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>
Necesitamos un oponente para este juego, así que primero debemos trabajar en la elección de la computadora.
Lógico quieres que la computadora elija una opción al azar para el juego. Pero eso lo construiremos en la clase de aleatoriedad 😉 Mientras tanto, usa comentarios y espacios para crear un apartado dónde escribiremos este código más tarde; y escribe en una línea que la computadora. Elige una de las tres opciones (puede ser la que tú quieras, con los números que empleamos para la elección del jugador).
¿Ya lo hiciste? Inténtalo por tu cuenta, y luego compáralo con el código aquí abajo 😉
<!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 >-<" )
}
//OBTENIENDO LA ELECCIÓN DEL COMPUTADOR
let eleccionDelComputador = 1;
</script>
</head>
<body>
<h1>Piedra, papel o tijera</h1>
</body>
</html>
Antes de proceder, planteemos un momento como queremos que se produzca el juego:
Por lo tanto, ahora que la computadora ya eligió, crea un apartado que informe la elección de la computadora con un alert()
🙂 crea un apartado para esto, y recicla el código que usaste para informar la elección del jugador para que muestre ahora la elección del computador 😉
💡 ¡Por cierto! También puedes usar emojis en los mensajes. Puedes utilizarlos desde la emojipedia o, si estás en windows, puedes pulsar Win+”.” para abrir la ventana de emojis 🙂
Hazlo tú y pruébalo en el navegador para validar que esté funcionando bien. Luego compáralo con el código de abajo antes de continuar 😉
<!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 🥌, 2 para 📄, 3 para ✂️" );
// alert( "Elegiste " + jugador );
//INFORMANDO LA ELECCIÓN DEL JUGADOR
if ( eleccionDelJugador == 1 ) {
alert( "Elegiste 🥌" );
}
else if ( eleccionDelJugador == 2 ) {
alert( "Elegiste 📄" )
}
else if ( eleccionDelJugador == 3 ) {
alert( "Elegiste ✂️" )
}
else {
alert( "Elegiste otra cosa, así no puedes jugar 😣" )
}
//OBTENIENDO LA ELECCIÓN DEL COMPUTADOR
let eleccionDelComputador = 1;
//INFORMANDO LA ELECCION DEL COMPUTADOR
if ( eleccionDelComputador == 1 ) {
alert( "La computadora eligió 🥌" );
}
else if ( eleccionDelComputador == 2 ) {
alert( "La computadora eligió 📄" )
}
else if ( eleccionDelComputador == 3 ) {
alert( "La computadora eligió ✂️" )
}
else {
alert( "Cometí un error programando la elección del computador 🙃" )
}
</script>
</head>
<body>
<h1>Piedra, papel o tijera</h1>
</body>
</html>
Crea un nuevo apartado para saber si ganas o pierdes. Allí debes escribir condiciones para evaluar:
Luego de evaluar esto, utiliza un alert()
para informarle al jugador si ganó, empató o perdió 👍
💡 Ojo, puedes evaluar varias condiciones a la vez en un solo if
si separas las condiciones con un &&
. Por ejemplo:
if ( eleccionDelJugador = 1 && eleccionDelComputador = 3 ) {
alert( "¡GANASTE! 🥳" );
}
Empieza escribiendo la condición de empate (que es la más fácil) y luego escribe las demás. Inténtalo, pruébalo en el navegador, cambia la elección del computador para validar que en serio todo funciona, y luego compara tu código con el ejemplo de abajo 👍
<!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 🥌, 2 para 📄, 3 para ✂️" );
// alert( "Elegiste " + jugador );
//INFORMANDO LA ELECCIÓN DEL JUGADOR
if ( eleccionDelJugador == 1 ) {
alert( "Elegiste 🥌" );
}
else if ( eleccionDelJugador == 2 ) {
alert( "Elegiste 📄" )
}
else if ( eleccionDelJugador == 3 ) {
alert( "Elegiste ✂️" )
}
else {
alert( "Elegiste otra cosa, así no puedes jugar 😣" )
}
//OBTENIENDO LA ELECCIÓN DEL COMPUTADOR
let eleccionDelComputador = 1;
//INFORMANDO LA ELECCION DEL COMPUTADOR
if ( eleccionDelComputador == 1 ) {
alert( "La computadora eligió 🥌" );
}
else if ( eleccionDelComputador == 2 ) {
alert( "La computadora eligió 📄" )
}
else if ( eleccionDelComputador == 3 ) {
alert( "La computadora eligió ✂️" )
}
else {
alert( "Cometí un error programando la elección del computador 🙃" )
}
//DECIDIENDO EL GANADOR
if ( eleccionDelJugador == eleccionDelComputador ) {
alert( "¡EMPATE! 🤼" );
}
else if ( eleccionDelJugador == 1 && eleccionDelComputador == 3 ) {
alert( "¡GANASTE! 🥳" );
}
else if ( eleccionDelJugador == 2 && eleccionDelComputador == 1 ) {
alert( "¡GANASTE! 🥳" );
}
else if ( eleccionDelJugador == 3 && eleccionDelComputador == 2 ) {
alert( "¡GANASTE! 🥳" );
}
else {
alert( "PERDISTE... 😢" );
}
</script>
</head>
<body>
<h1>Piedra, papel o tijera</h1>
</body>
</html>
¿Te divertiste?
Existen muchos caminos para llegar a la misma solución. Puedes abordar el problema de varias formas y personalizarlo a tu gusto. Si te dio error en algún lado, no te preocupes. Resolver errores en el código es la mitad del trabajo de un programador. Desarrolla tu tolerancia a la frustración, y tómalo como parte del oficio.
Experimenta un poco con tu código, personalízalo y cuando estés listo continúa a la clase de aleatoriedad para que aprendas a hacer que la computadora elija por si misma lo que va a jugar 😁
Contribución creada por: Jhonkar Sufia (Platzi Contributor).
Aportes 623
Preguntas 354
Para insertar emojis en VisualStudio:
Windows: Windows + . (punto)
Mac : Control + Command + Space
Existe una manera de simplificar los if statements y es usando (Voz tenebrosa activada) “ALGEBRAAAA” y “MATEMATICASSS”
.
Pero tranquilo o tranquila, la idea es sencilla: Restar los números del PC contra el jugador.
.
Hagamos un cuadro viendo cómo funciona el juego de esta forma:
.
Si podemos notar, 0 es empate, y los números -2 y 1 son cuando el jugador gana contra el PC (-1 y 2 serían justo sus contrarios y sería cuando el PC gana el combate).
.
Ahora con este descubrimiento podemos desarrollar en 2 if statements en vez de 3. El jugado gana si se obtiene 1 o -2 cuando restamos la variable su número contra el de la PC.
.
Nuestro código quedaría así:
if (jugador == pc) {
alert("EMPATE")
} else if ((jugador - pc) == 1) {
alert("GANASTE")
} else if ((jugador - pc) == -2) {
alert("GANASTE")
} else {
alert("PERDISTE")
}
Ahora te preguntarás. ¿Pero esto no es un enredo para solucionar 1 línea de código? Y la respuesta es que sí en este caso, pero en situaciones más avanzadas de programación te vas a dar cuenta que usar matemáticas puede optimizar MUCHO tu trabajo y el de la computadora en el programa.
.
De no hacerlo te podría quedar un código ineficiente, poco profesional y no escalable. (Cualidades que ninguna empresa quisiera ver)
Les dejo los emojis para que los peguen! ✂️ ✊ 📄
Programar es aprender a manejar la frustración y no rendirse
Velocidad de desarrollo: Cuando tienes en VS Code un montón de variables que se llaman igual como en el siguiente código (jugador), podrás cambiar todas estas variables al mismo tiempo con el comando: CTRL + D
if (jugador == 1) {
alert("Elegiste piedra")
} else if (jugador == 2) {
alert("Elegiste papel")
} else if (jugador == 3) {
alert("Elegiste Tijera")
}
Mi primer video juego ❤️ muy pronto hare gta vII
Un aportesito:
Cuando necesite cambiar la palabra jugador por pc lo hice sombreando la palabra jugador y despues con control + D podia sombrear la misma palabra hacia abajo, luego de sombreado se pueden cambiar a la palabra PC al mismo tiempo
Una de las opciones para que la pc elija de manera aleatoria una de las opciones es con:
let pc = Math.floor(Math.random()*3)+1;
Para agregar los emojis, descarguen en la extensión directamente en Visual Studio Code , y luego de instalada es solo oprimir la tecla CONTROL + I
Y listo ya te aparece el listado de los emojis.
Mi pequeño aporte, el unico cambio es en la condicion del combate, que engloba en un solo “if” las 3 maneras de ganar
¡Hola a todos! Para los que quieran agregar un salto de línea dentro del Sting pueden hacerlo agregando
\n Dentro de su línea de texto, por ejemplo:
jugador = prompt("🖖¡Hola! ingresa el número de tu elección:\n🪨 PIEDRA es 1, 📄 PAPEL es 2 y ✂️ TIJERA es 3")
Espero les sirva
En lugar de emojis le puse caras ASCII ( ͡° ͜ʖ ͡°) ( ˘ ³˘) ♥ ◔_◔ aunque ya no se cual es cual :,v
Programar es aprender a manejar la frustración y no rendirte
He aquí mi código con las condicionales (del combate), lo único diferente es que lo decoré con unos emojis. 👌
Tengo mi hija de 13 años con una discapacidad, no habla bien, Sueño con poder hacer o encontrar a un desarrollador que pueda hacer que el lenguaje de mi hija sea identificado por Alexa Amazon, porque ella se pone triste porque no le puede decir “ALEXA PRENDE LA LUZ”. -------------Ella dice “LESHA PENDE US”, ----OJALA USTEDES CON SU GENIALIDAD PROGRAMADORA ANALIZARAN UN DESARROLLO PARA QUE CADA PALABRA DE UNA PERSONA COMO MI HIJA FUERA TRADUCIDA PARA QUE SE PUDIERA ENTENDER POR ALEXA AMAZON U OTRA. (espero haberme dado a entender)
🪨📜✂️🐝🖖
Les comparto el codigo de la versión de Piedra, Papel, Tijera, Lagarto Spock con consulta de volver a jugar y tambien pide ingresar el valor nuevamente si este fue puesto erróneo.
Espero les guste, los leo en sus comentarios 😊.
<script>
let player = 0;
let pc = Math.floor(Math.random() * 5) + 1;
function setPlayer() {
return prompt(
"Elije una opción: 1 = piedra 🪨, 2 = papel 📜, 3 = tijera ✂️, 4 = lagarto 🐝, 5 = spock 🖖"
);
}
player = setPlayer();
if (player == 1) {
alert("Elegiste piedra 🪨");
} else if (player == 2) {
alert("Elegiste papel 📜");
} else if (player == 3) {
alert("Elegiste tijera ✂️");
} else if (player == 4) {
alert("Elegiste lagarto 🐝");
} else if (player == 5) {
alert("Elegiste spock 🖖");
} else {
alert("Elige una opción válida");
player = setPlayer();
}
if (pc == 1) {
alert("El PC eligió piedra 🪨");
} else if (pc == 2) {
alert("El PC eligió papel 📜");
} else if (pc == 3) {
alert("El PC eligió tijera ✂️");
} else if (pc == 4) {
alert("El PC eligió lagarto 🐝");
} else if (pc == 5) {
alert("El PC eligió spock 🖖");
} else {
alert("El PC eligió una opción no válida");
}
if (player == pc) {
alert("Empate");
} else if ((player == 1 && pc == 2) || (player == 1 && pc == 5)) {
alert("Gana el PC");
} else if ((player == 1 && pc == 3) || (player == 1 && pc == 4)) {
alert("Gana el jugador");
} else if ((player == 2 && pc == 1) || (player == 2 && pc == 5)) {
alert("Gana el jugador");
} else if ((player == 2 && pc == 3) || (player == 2 && pc == 4)) {
alert("Gana el PC");
} else if ((player == 3 && pc == 1) || (player == 3 && pc == 5)) {
alert("Gana el PC");
} else if ((player == 3 && pc == 2) || (player == 3 && pc == 4)) {
alert("Gana el jugador");
} else if ((player == 4 && pc == 1) || (player == 4 && pc == 3)) {
alert("Gana el PC");
} else if ((player == 4 && pc == 2) || (player == 4 && pc == 5)) {
alert("Gana el jugador");
} else if ((player == 5 && pc == 1) || (player == 5 && pc == 3)) {
alert("Gana el jugador");
} else if ((player == 5 && pc == 2) || (player == 5 && pc == 4)) {
alert("Gana el PC");
} else {
alert("Elige una opción válida");
player = setPlayer();
}
let answer = confirm("quieres jugar de nuevo?");
if (answer == true) {
window.location.reload();
} else {
alert("gracias por jugar");
}
</script>
Ahora dejen de avanzar el curso, abran un html en blanco y traten de realizar el ejercicio desde 0!!! Más práctica y menos avanzar por avanzar (y)
Una manera sencilla de hacer que la pc elija cualquiera de las tres opciones:
let pc = Math.floor(Math.random() * 3) + 1
Yo si decía que faltaba una opción, pensé que estaba loca y me andaba matando la cabeza durante la primera parte de la clase.
PORQUE SE ADELANTAN? MEJOR HAGAN COMO MEJORAR EL CODIGO DE FREDDY QUE EXPONE EN ESTA CLASE , ALGUN APORTE IMPORTANTE O UN ATAJO CON LOS COMANDOS!
tiempo al tiempo que siempre hay algo mas que aprender de esta clase y no saben. Yo aprendi de los comentarios a introducir los emojis, a seleccionar varias veces la misma variable en todo el codigo( CTRL+D) o a reducir el codigo de freddy con ejemplos matematicos!
Con este codigo nos aseguramos que el PC escoge un numero entre 1 y 3 de forma aleatoria…
PC = Math.floor(Math.random() * (3 - 1 + 1) + 1)
Todas las combinaciones posibles son 9:
3 EMPATES se necesita un solo if:
3 GANASTE se necesita 3 else if:
3 PERDISTE se necesita 2 else if y un else:
Una vez leí un recurso acerca de esto ya que hay varias maneras de resolver o programar este problema y es lo hermoso de la programación y el pensamiento lógico.
<aside>
💡 +Agregar un emoji al código → WIN + .
</aside>
&&
→ Operador lógico AND. devuelve true si ambas expresiones son true<!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 = 1
jugador = prompt("Elije: 1 para piedra, 2 para papel, 3 para tijera ")
//alert("Elejista " + jugador)
if(jugador == 1) {
alert("Elejiste 🥌")
} else if(jugador == 2){
alert("Elejista 🧻")
} else if(jugador == 3){
alert("Elejiste ✂")
} else{ // Si elije otra opcion que no sea 1,2 o 3. mostrar:
alert("ELEJISTE PERDER!!")
}
// para saber que eligio la pc
if(pc == 1) {
alert("PC elije 🥌")
} else if(jugador == 2){
alert("PC elije 🧻")
} else if(jugador == 3){
alert("PC elije ✂")
} else{ // Si elije otra opcion que no 1sea 1,2 o 3. mostrar:
alert("PC ELIJE PERDER!!")
}
// COMBATE
// 1. verificar que no empatamos
if(pc == jugador) {
alert("EMPATE")
} else if(jugador == 1 && pc == 3){
alert("GANASTE")
} else if(jugador == 2 && pc == 1){
alert("GANASTE")
} else if(jugador == 3 && pc == 2){
alert("GANASTE")
} else {
alert("PERDISTE")
}
</script>
</head>
<body>
<h1>Piedra, papel o tijera</h1>
</body>
</html>
Chicos nuevos como yo para los que han tenido problemas para memorizar les dejo unos tips que esta incluso en un video del mismo Fredy, 1. procuren hacer los ejercicios vistos en clase varias veces sin mirar apuntes. 2.hacer examenes libres de respuestas abiertas y 3. enseñar a otros lo aprendido, yo entre a comunidades de facebook de personas que quieren aprender a programar, hay otros tips que ya tienen que ver con dormir bien. hacer ejercicio y leer en voz alta, incluso formar canciones de las lecciones pero para este tema me han servido mas las 3 que les comente.
Buen día a todos, mi algoritmo en la parte de combate me quedó así:
//combate
if (jugador == pc){
alert("empate 😂😂😂😂")
} else if (jugador == 3 && pc == 1){
alert("perdiste😭😿😢")
} else if(jugador == 1 && pc == 3){
alert("Tú ganaste 😎😎🎉🎉")
}else if (jugador > pc){
alert("Tú ganaste 😎😎🎉🎉")
} else{
alert("perdiste😭😿😢")
}
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8” />
<title> Piedra papel o tijeras</title>
<script>
let jugador = 0;
let pc = 1;
jugador = prompt("Elije: 1 es piedra, 2 es papel, 3 es tijera: ");
//jugador
if(jugador == 1){
alert("elejiste piedra");
} else if(jugador == 2){
alert("elejiste papel");
} else if(jugador == 3){
alert("elejiste tijera");
} else {
alert("Escoge bien aweonao!!!");
}
//pc
if(pc == 1){
alert("pc eligió piedra");
} else if(pc == 2){
alert("pc eligió papel ");
} else if(pc == 3){
alert("pc eligió tijera");
}
//jjuego
if ((jugador == 1 && pc == 1) || (jugador == 2 && pc == 2) || (jugador == 3 && pc == 3) ) {
alert("Empataste cabrón");
} else if ((jugador == 3 && pc == 2) || (jugador == 2 && pc == 3) || (jugador == 2 && pc == 1) ) {
alert("Ganaste hijo de tu puta madre");
} else {
alert("Perdiste");
}
</script>
</head>
<body>
<h1>Piedra, papel o tijeras</h1>
</body>
</html>
Dejo mi aporte con una solución más corta, saludos
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Piedra, papel o tijera</title>
<script>
function aleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
function elige(ppt) {
switch (ppt) {
case 1:
alert("La PC elige 🥌")
break
case 2:
alert("La PC elige 📰")
break
case 3:
alert("La PC elige ✂️")
break
}
}
function combate(jugador, pc) {
if (pc == jugador) {
alert("EMPATE")
} else if (jugador == 1 && pc == 3) {
alert("GANASTE")
} else if (jugador == 2 && pc == 1) {
alert("GANASTE")
} else if (jugador == 3 && pc == 2) {
alert("GANASTE")
} else {
alert("PERDISTE")
}
}
let pc = aleatorio(1, 3)
let jugador = prompt("Elige 1 es piedra, 2 es papel, 3 es tijera")
elige(pc)
combate(jugador, pc)
</script>
</head>
<body>
<h1> Piedra, papel o tijera</h1>
</body>
</html>
Les contaré algo gracioso que me pasó en esta clase, llegué al momento donde definió las dos opciones de ganar y mi lógica decía que faltaba una, pensé “algo no estoy viendo” y pausé, cogí mi libreta y me puse a jugar en mi cuaderno cada caso con un diagrama de flujo, apuntaba a que tenía razón, pero decía Freddy " ya está" y no lo entendía, luego de como media hora de hacer pruebas en el navegador me di por vencido y seguí viendo el vídeo y efectivamente faltaba un caso, jsjsjsjs gracias por su atención. NUNCA PAREN DE APRENDER ❤️
Les comparto lo que puse de combate, usando <||> que en javaScript significa “o” igual como el <&&> significa “y”
//combate
if (pj == pc) {
alert("Empate")
} else if (pj == 1 && pc == 3 || pj == 2 && pc == 1 || pj == 3 && pc == 2) {
alert("Ganaste!!")
} else {
alert("Perdiste :(")
}
Una de las opciones que se me ocurrio para hacer mas corta la parte de victorias y derrotas fue la siguiente
if(pc==jugador){
alert(“Empate”)
}else if((jugador == 1 && pc == 3) || (jugador == 2 && pc == 1) || (jugador == 3 && pc == 2)) {
alert(“ganaste”)
}else if((pc == 1 && jugador == 3) || (pc == 2 && jugador == 1) || (pc == 3 && jugador == 2)){
alert("Perdiste")
}
Lo que hice fue poner cada uno de los if en uno solo, tanto para la variable jugador como la de pc, haciendo uso del operador logico “or”
BUEN DIA COMPAÑEROS VAMOS QUE S SE PUEDE
OPERADORES DE JAVASCRIPT
Es importante que memorices los operadores en JavaScript.
El profesor Freddy usa el operador &&, que pertenece a los operadores lógicos y significa Y o AND.
Puedes aprender sobre los operadores de JavaScript aquí:
Operadores de JavaScript
O investiga y aprende donde te parezca más cómodo 😊
Esta es la forma que yo encontré ¿Es correcto usar el if de esa menera o solo importa el resutado?
if (jugador == pc ){
alert("Empate")
} else if (jugador == 1 && pc == 3 || jugador == 2 && pc == 1 || jugador == 3 && pc == 2){
alert("Ganaste")
} else{alert("Perdiste")}
Lo importante en la programación es que se obtenga el resultado esperad.
La forma y el camino que se tome no importa, todos estarán bien mientras el resultado sea el correcto…
Una propuesta de algoritmo para el juego Piedra-Papel-Tijera en formato multijugador para la web.
soy un niño de 11 años y me husta programar y con esto es muy facil nunca pares de aprender
Hola soy Pietro de Argentina, tengo 12 años y me gustan mucho los videos explicativos, explican muy bien.
Gracias 😃…
En Linux tengo instalado en KDE Neon la app Selector de emojis. 😱💡🎉
Este te da la opcion de corregir tu decision si habias elegido otra opcion o te deja irte
<code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Piedra, papel o tijera</title>
<script>
//1 es piedra, 2 es papel, 3 en tijera
let jugador = 0
let pc = 2
jugador = prompt("Elige: \n1.-Piedra\n2.-Papel\n3.-Tijera")
do{
if(jugador == 1) {
alert("Elegiste piedra")
} else if(jugador == 2) {
alert("Elegiste papel")
} else if(jugador == 3) {
alert("Elegiste tijera")
} else {
jugador = prompt("La opcion no es valida, por favor elija una de las siguientes.\n1.-Piedra\n2.-Papel\n3.-Tijera\n4.-Es que no quiero jugar")
}
}
while(jugador<1||jugador>4);//verifica que el jugador haya elegido una de las opciones o la opcion de salirse
if(jugador!=4){ //Si el jugador eligio salirse el juego no sigue y se despide
if(pc == 1) {
alert("PC eligio piedra")
} else if(pc == 2) {
alert("PC eligio papel ")
} else if(pc == 3) {
alert("PC eligio tijeras")
}
//COMBATE
if(pc == jugador)
{
alert("Empate")
} else if(jugador ==1 && pc==3) {
alert("GANASTE")
} else if(jugador == 2 && pc==1){
alert("GANASTE")
} else if(jugador == 3 && pc==2){
alert("GANASTE")
}else {
alert("Perdiste")
}
}
else
alert("Adios")
</script>
</head>
<body>
<h1>Piedra, papel o tijera</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8” />
<title>Piedra, papel o tijeras</title>
<script>
//1 piedra, 2 papel, 3 tijera
let jugador = 1
let pc = 2
jugador = prompt(“Elige: 1 para piedra, 2 para papel, 3 para tijera”)
//alert("Elegiste " + jugador)
if(jugador == 1) {
alert(“Elegiste ✊”)
} else if(jugador == 2) {
alert(“Elegiste 🖐”)
} else if (jugador == 3) {
alert(“Elegiste ✌”)
} else {
alert(“Elegiste PERDER💀”)
}
if(pc == 1) {
alert(“PC elige ✊”)
} else if(pc == 2) {
alert(“PC elige 🖐”)
} else if (pc == 3) {
alert(“PC elige ✌”)
}
//Combate
if (pc == jugador) {
alert(“Empate 🤝”)
} else if((jugador == 1 && pc == 3) || (jugador == 2 && pc == 1) || (jugador == 3 && pc == 2) ) {
alert(“Ganaste 👑”)
} else {
alert (“Perdiste 💀”)
}
</script>
</head>
<body>
<h1>Piedra, papel y tijera</h1>
</body>
</html>
La solución a la que llegué con todo el apoyo del team ❤️
Para quien lo quiera que no deje pasar hasta que no elija la opcion correcta
<code>
do{
jugador =prompt("Elige 1 es piedra, 2 es papel, 3 es tijera")
switch (jugador) {
case "1":
tjugador="Piedra ✊"
jugador=1
break;
case "2":
tjugador="Papel ✋"
jugador=2
break;
case "3":
tjugador="Tijera ✌️"
jugador=3
break;
default:
jugador=0
break;
}
}while (jugador==0)
alert("elegiste "+tjugador)
A mi tambien me gusto programarlo con restas, se hace compacto usando lo que hemos visto hasta esta clase. ( y aun le falta) 😎
Vengo del futuro 🥏
Le hice dos cambios importantes, el primero separe el html del java script y lo otro es que simplifique en un if la opcion de ganar.
if(pc==jugador){
alert('EMPATE');
} else if(jugador==1 && pc==3 || jugador==2 && pc==1 || jugador==3 && pc==2){
alert('GANASTE!');
} else{
alert('PERDISTE');
}
Lo unico quie pude reducir en el codigo fue el de combate 😦, dure pensando como reducir todo el codigo se me hizo dificil.
Hola comunidad, hice un ajuste agregando una condicional para volver a comenzar sin darle recargar, se que es fácil también darle Ctrl + r o F5 pero creo es una buena practica , además de aprender que con la clase location.reload() traes la función reload que nos permite recargar la pagina.
así quedo el código:
//preguntar si desea seguir jugando
let jugar = prompt("Ingrese 1 Jugar de nuevo, 2 Dejar de jugar")
if (jugar == 1){
alert("El juego cómenzara nuevamente")
location.reload()
}else if (jugar==2){
alert("Gracias por jugar , si desea jugar nuevamente recargue la pagina nuevamente con F5 o Ctrl + r")
}
también note que se puede asignar valores o prompt en el momento en que creas la variable con “let”
if (pc==jugador){
alert("EMPATE")
}else if(pc>jugador){
alert("PERDISTE")
}else if(pc<jugador){
alert("HAS GANADO")
}
Entonces las reglas del algoritmo son las siguientes:
var jugador = "tijeras";
var cpu = "piedra";
if (jugador == cpu) {
console.log("Empate");
} else if (jugador == "piedra" && cpu == "papel") {
console.log("Perdiste");
} else if (jugador == "papel" && cpu == "tijeras") {
console.log("Perdiste");
} else if (jugador == "tijeras" && cpu == "piedra") {
console.log("Perdiste");
} else {
console.log("Ganaste");
}
Me pasaba que cuando escribia otra opcion diferente a 1, 2 o 3 me mandaba al else de perdiste y luego procedia a decir que eligio el pc y el combate, para solucionarlo puse un end en el else de perdiste para termionar el programa y que no siguiera ejecutando, recordemos que el codigo en este caso se lee de arriba a abajo y si nada lo detiene sigue ejecutando.
Saludos!!!
Consejo no solicitado: Usen Git, este curso es largo y uno la puede embarrar, se vuelve feo y frustrante cuando el código funciona en los videos de los profes y en el caso de uno no. Git es una herramienta para controlar las versiones y ver donde se hizo un cambio para saber específicamente que está mal. Asi que nada, usen Git para este curso
Casi se me revienta una vena del cerebro de la rabia que me daba ver que no estaba funcionando y Freddy seguía diciendo que estaba todo bien. Después de tanto devolver el vídeo decidí seguir viendo y ahí si confirmo lo que yo decía.
Eso me lleno de más confianza en mí.
Mi aporte, primero lo realicé y después vi el video de la clase.
<script>
// 1 Rock, 2 Paper, 3 Scissors
let optionPlayer = 0
let pc = 1
namePlayer = prompt("¿Cuál es tu nombre?")
optionPlayer = prompt("Bienvenido: " +namePlayer + "\nElije una opción: 1: Piedra, 2: Papel, 3; Tijera.")
//Options player
if (optionPlayer == 1) {
alert(namePlayer + " escogió: 🪨.")
}else if (optionPlayer == 2) {
alert(namePlayer + " escogió: 🧻.")
}else if (optionPlayer == 3) {
alert(namePlayer + " escogió: ✂️.")
}else{
alert("¡PERDISTE!\n No seleccionaste una opción valida")
}
//Option PC
if (pc == 1) {
alert("La PC es: 🪨.")
}else if (pc == 2) {
alert("La PC es: 🧻.")
}else if(pc == 3){
alert("La PC es: ✂️.")
}
/*Versus*/
if(optionPlayer == 1 && pc == 2 || optionPlayer == 2 && pc == 3 || optionPlayer == 3 && pc == 1){
alert("¡PERDISTE!")
}else if(optionPlayer == 1 && pc == 3 || optionPlayer == 3 && pc == 2 || optionPlayer == 2 && pc == 1){
alert("¡GANASTE!")
}else if(pc == optionPlayer){
alert("Empate")
}
</script>
uni todos los casos donde el jugador pierde en una linea de codigo y en otra donde el jugador gana use un solo alert y me ayude con el operador logico or
Mi modificación en el código:
//JUEGO
if (jugador==pc){
alert("EMPATE")
}
else if(jugador ==1 && pc ==2 || jugador==2 && pc ==3 || jugador==3 && pc ==1){
alert("PERDISTE")
}
else if(jugador ==1 && pc ==3 || jugador==3 && pc ==2 || jugador==2 && pc ==1){
alert("GANASTE")
}
Si al igual que yo, les gusta The Big Bang Theory y pensaron en Sheldon Cooper con este juego, ahí esta Roca, Papel, Tijeras, Rata o Spock
<!DOCTYPE html>
<html>
<head>
<meta charset = utf-8 />
<title>
</title>
<script>
// 1 es Piedra, 2 es Papel, 3 es Tijeras, 4 es Rata, 5 es Spock
let jugador = 0
let pc = 3
let nombre = ""
nombre = prompt("Vamos a jugar Piedra, Papel, Tijeras, Rata o Spock, Cuál es tu nombre?")
alert("Bienvenidx " + nombre + ", Lets go")
jugador = prompt("Elige: 1 para Pierda, 2 para Papel, 3 para Tijeras, 4 para Rata, 5 para Spock")
//alert("Elegiste " + jugador)
if(jugador == 1) {
alert("Elegiste 🥌")
}
if(jugador == 2) {
alert("Elegiste 📄")
}
if(jugador == 3) {
alert("Elegiste ✂")
}
if(jugador == 4) {
alert("Elegiste 🐀")
}
if(jugador == 5) {
alert("Elegiste 🖖")
}
if(pc == 1) {
alert("PC elige 🥌")
}
if(pc == 2) {
alert("PC elige 📄")
}
if(pc == 3) {
alert("PC elige ✂")
}
if(pc == 4) {
alert("PC elige 🐀")
}
if(pc == 5) {
alert("PC elige 🖖")
}
// COMBATE
if(pc == jugador) {
alert("EMPATE")
}
if(jugador == 1 && pc == 3) {
alert("GANASTE")
}
if(jugador == 1 && pc == 2) {
alert("PERDISTE")
}
if(jugador == 1 && pc == 4) {
alert("GANASTE")
}
if(jugador == 1 && pc == 5) {
alert("PERDISTE")
}
if(jugador == 2 && pc == 1) {
alert("GANASTE")
}
if(jugador == 2 && pc == 3) {
alert("PERDISTE")
}
if(jugador == 2 && pc == 4) {
alert("PERDISTE")
}
if(jugador == 2 && pc == 5) {
alert("GANASTE")
}
if(jugador == 3 && pc == 1) {
alert("PERDISTE")
}
if(jugador == 3 && pc == 2) {
alert("GANASTE")
}
if(jugador == 3 && pc == 4) {
alert("GANASTE")
}
if(jugador == 3 && pc == 5) {
alert("PERDISTE")
}
if(jugador == 4 && pc == 1) {
alert("PERDISTE")
}
if(jugador == 4 && pc == 2) {
alert("GANASTE")
}
if(jugador == 4 && pc == 3) {
alert("PERDISTE")
}
if(jugador == 4 && pc == 5) {
alert("GANASTE")
}
if(jugador == 5 && pc == 1) {
alert("GANASTE")
}
if(jugador == 5 && pc == 2) {
alert("PERDISTE")
}
if(jugador == 5 && pc == 3) {
alert("GANASTE")
}
if(jugador == 5 && pc == 4) {
alert("PERDISTE")
}
</script>
</head>
<body>
<h1>Piedra, Papel. Tijeras, Rata o Spock</h1>
</body>
</html>
"Programar es aprender a manejar la frustración y no rendirte." Freddy Vega
y en HTML quedaría algo así jeje.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Diseño.css">
<link rel="shortcut icon" href="icono.png">
<title> JUEGO PIEDRA PAPEL Y TIJERA</title>
</head>
<body>
<h1> JUEGO PIEDRA , PAPEL Y TIJERA 🥌 📃 ✂️ </h1>
<br />
<center> <img src="gamergif.png" class="imagen-gif" alt="imagen-game" /> </center>
<script src="juego.js"> </script>
<h2 class="texto"> GRACIAS POR JUGAR. </h2>
</body>
</html>
no se olviden de revisar antes de ejecutar una comparacion que si querer borre un " = " y estuve 15 minutos buscando que fue lo que hice mal xD
Con ustedes la nueva actualización PIEDRA, PAPEL, TIJERA , LAGARTO, SPOCK
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Piedra, Papel, Tijera, Lagarto, Spock</title>
<script>
// 1 es piedra, 2 es papel y 3 es tijera
let jugador = 0
let pc = 2
// prompt es como el alert que recibe info
jugador = prompt(" Elige 1 para PIEDRA, 2 para PAPEL, 3 para TIJERA, 4 para LAGARTO, o 5 para SPOCK")
//alert("Elegiste "+jugador)
if(jugador == 1) {
alert("Elegiste PIEDRA🪨")
} else if(jugador == 2) {
alert("Elegiste PAPEL 📄")
} else if(jugador == 3){
alert("Elegiste TIJERAS ✂️")
} else if(jugador == 4){
alert("Elegiste LAGARTO 🦎")
}else if(jugador == 5){
alert("Elegiste SPOCK 🖖")
} else {
alert("PERDISTE")
}
if(pc == 1) {
alert("PC elige PIEDRA 🪨")
} else if(pc == 2) {
alert("PC elige PAPEL 📄")
} else if(pc == 3){
alert("PC elige TIJERAS ✂️")
}else if(pc == 4){
alert("PC elige LAGARTO 🦎")
}else if(pc == 5){
alert("PC elige SPOCK 🖖")
} else {
alert("PERDISTE")
}
// COMBATE
if (pc == jugador){
alert("EMPATE")
} else if (jugador == 1 && (pc == 3 || pc == 4)){
alert("GANASTE")
} else if (jugador == 2 && (pc == 1 || pc == 5)){
alert("GANASTE")
} else if (jugador == 3 && (pc == 2 || pc == 4)){
alert("GANASTE")
} else if (jugador == 4 && (pc == 5 || pc == 2)){
alert("GANASTE")
} else if (jugador == 5 && (pc == 3 || pc == 1)){
alert("GANASTE")
} else {
alert("PERDISTE")
}
</script>
</head>
<bosy>
<h1>Piedra, Papel, tijera, Lagarto, Spock</h1>
</bosy>
</html>
Esta seria mi versión, me costo un poco al principio pero al final logré hacerlo sin ayuda:
<script>
//1 para piedra, 2 para papel y 3 para tijera
let jugador = 0
let pc = 3
jugador = prompt(“Elige 1 para piedra, 2 para papel y 3 para tijera”)
if(jugador == 1) {
alert(“Elegiste piedra 🧱”)
} else if(jugador == 2) {
alert(“Elegiste papel 📄”)
} else if(jugador == 3) {
alert(“Elegiste tijera ✂”)
} else {
alert(“Por favor introduzca alguno de los dígitos indicados”)
} if(pc == 1) {
alert(“PC elige piedra 🧱”)
} else if(pc == 2) {
alert(“PC elige papel 📄”)
} else if(pc == 3) {
alert(“PC elige tijera ✂”)
}
//combate
if(jugador == pc) {
alert("¡Es un empate! 👍")
} else if(jugador == 1 && pc == 3) {
alert("¡Ganaste! 🎉🙌")
} else if(jugador == 3 && pc == 2) {
alert("¡Ganaste! 🙌🎉")
} else if(jugador == 2 && pc ==1) {
alert("¡Ganaste! 🙌🎉")
} else {
alert("¡Perdiste! 😢")
}
</script>
yo solo le agregue el vuelve a intentarlo y los emojis :3
;
jugador = Number(prompt("Elige:1 piedra, 2 papel, 3 tijera"));
let selectedNameJugador = optionSelectByThePlayer(jugador);
alert(`Elejiste ${selectedNameJugador}`);
let selectedNamePC = optionSelectByThePlayer(pc);
alert(`PC elige ${selectedNamePC}`);
if (jugador === pc) {
alert("Empate");
} else if (jugador == PIEDRA && pc == TIJERA) {
alert("GANASTE");
} else if (jugador == PAPEL && pc == PIEDRA) {
alert("GANASTE");
} else if (jugador == TIJERA && pc == PAPEL) {
alert("GANASTE");
} else {
alert("Perdiste");
}
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
/** @param {number} player */
function optionSelectByThePlayer(player) {
let optionSelect = "";
switch (player) {
case PIEDRA:
optionSelect = "🪨";
break;
case PAPEL:
optionSelect = "📰";
break;
case TIJERA:
optionSelect = "✀";
break;
default:
alert("Elejiste perder");
throw new Error("PERDER");
}
return optionSelect;
}
excelente forma de desarrollar el ejercicio para entenderlo y sobre todo por que pasan las cosas.
1 diseño mi algoritmo
2 lo llevo a practica
3 pruebo mis resultados
4 verifico si algo falta en poner.
5 hacer cambios pertinentes.
o no!!! Perdiste jajajaj que buen curso.
Después de un rato de estar investigando como insertar emojis en VS CODE en ubuntu, esta es la solución que me funcionó a mí:
{
"workbench.colorTheme": "Solarized Dark",
"emojisense.languages": {
"markdown": true,
"plaintext": {
"markupCompletionsEnabled": false,
"emojiDecoratorsEnabled": false
},
"scminput": true,
"git-commit": true,
"html": true
}
}
Mi código
let user_choose = prompt('Elige opción 1: Piedra, 2: Papel, 3: Tijera');
let option = {1:'Piedra',2:'Papel',3:'Tijera'};
let pc_choose = Math.floor(Math.random() * Object.keys(option).length+1);
alert(option[user_choose]);
alert(option[pc_choose]);
function play(user_choose, pc_choose) {
if (user_choose == pc_choose) {
return 'Equals';
} else if (user_choose == 1 && pc_choose == 2) {
return 'PC winner';
} else if (user_choose == 2 && pc_choose == 3) {
return 'PC winner';
} else if (user_choose == 3 && pc_choose == 1){
return 'PC winner';
} else {
return 'User winner';
}
}
alert(play(user_choose,pc_choose));2
Este es mi codigo
<!DOCTYPE html>
<head>
<meta charset=“utf-8”>
<title>Piedra, papel o tijera</title>
<script>
let jugador = 0
let pc = 2
jugador = prompt(“Elige 1 si es piedra, 2 si es papel, 3 si es tijera”);
if(jugador == 1) {
alert(“Elegiste piedra”)
}else if(jugador == 2) {
alert(“Elegiste papel”)
}else if(jugador == 3) {
alert(“Elegiste tijera”)
}
if(pc == 1) {
alert(“PC eligio piedra”)
}else if(pc == 2) {
alert(“PC eligio papel”)
}else if(pc == 3) {
alert(“PC eligio tijera”)
}
if(jugador == pc) {
alert(“Empate”)
}else if(jugador == 1 && pc == 3 || jugador == 2 && pc == 1 || jugador == 3 && pc == 2) {
alert(“Ganaste”)
}else {
alert(“Perdiste”)
}
</script>
</head>
<body>
<h1>Mi primer juego</h1>
<p>Juguemos a piedra, papel o tijera</p>
</body>
 * 3));
Con esto puede hacer que saliera cualquier opción, por si alguien más también lo quiere hacer
Que pasa si elijo un 4? Como hacer para que se pueda volver a elegir sin que los de más comandos se sigan ejecutando
Pero falto otra condición si elijo botón Cancelar, me responde elegiste Perder, y seleccionas botón Aceptar, te dice PC elige Papel le nuevamente seleccionas Aceptar y responde PERDISTE… ahi seria cachar los valores Prompt yo pensaría que todo lo diferente de 1,2,3 NO entra en el IF, pero no es asi.
Les comparto mi código, saludos.
<html>
<head>
<meta charset="utf-8" />
<title>Piedra, Papel o Tijera</title>
<script>
//Proceso de Elección del Jugador
do {
var eleccionUsuario = prompt("Bienvenido. Escoja su arma: \n(1) <--> Piedra \n(2) <--> Papel \n(3) <--> Tijera \n(0) <--> Salir");
switch (parseInt(eleccionUsuario)) {
case 1: alert("Escogió Piedra")
break;
case 2: alert("Escogió Papel")
break;
case 3: alert("Escogió Tijera")
break;
case 0: alert("Gracias por jugar")
break;
default: alert("Su opción no es válida, ingrese un número del 1 al 3");
break;
}
//Proceso de Elección de la Computadora
if (eleccionUsuario == 1 || eleccionUsuario == 2 || eleccionUsuario == 3) {
var eleccionPC = Math.floor(Math.random() * (3 - 1 + 1) + 1);
switch (eleccionPC) {
case 1: alert("La Máquina escogió Piedra");
if (eleccionUsuario == 1) {
alert("Hay un empate");
}
else if (eleccionUsuario == 2) {
alert("Ganaste");
}
else if (eleccionUsuario == 3) {
alert("Perdiste");
}
break;
case 2: alert("La Máquina escogió Papel");
if (eleccionUsuario == 2) {
alert("Hay un empate");
}
else if (eleccionUsuario == 3) {
alert("Ganaste");
}
else if (eleccionUsuario == 1) {
alert("Perdiste");
}
break;
case 3: alert("La Máquina escogió Tijera");
if (eleccionUsuario == 3) {
alert("Hay un empate");
}
else if (eleccionUsuario == 1) {
alert("Ganaste");
}
else if (eleccionUsuario == 2) {
alert("Perdiste");
}
break;
}
}
} while (eleccionUsuario != 0);
</script>
</head>
<body>
</body>
</html>
se me ocurrió hacerlo así :>
AQUI UNA MANERA DE HACERLO
//@evhernandezh
//Entrada del usuario
let usuario = prompt("Seleciona una opcion: 1 = PIEDRA, 2 = PAPEL, 3 = TIJERA");
//Seleccion aleatoria de la maquina.
let machine = Math.ceil(Math.random()*3)
//Mostrar la seleccion de los participantes
if(usuario == 1){
alert("Elegiste > 👊PIEDRA👊")
} else if(usuario == 2){
alert("Elegiste > 🤚PAPEL🤚")
} else if(usuario == 3){
alert("Elegiste > ✌TIJERA✌")
} else {
alert("Tu selección no es valida: PERDISTE")
}
//Eleccion de la MAQUINA.
if(machine == 1){
alert("Bot eligio > 👊PIEDRA👊")
} else if(machine == 2){
alert("Bot eligio > 🤚PAPEL🤚")
} else if(machine == 3){
alert("Bot eligio > ✌TIJERA✌")
} else {
alert("Bot genero error: El usuario gana!")
}
//PELEA
if(usuario == machine){
alert("EMPATE");
} else if (usuario == "1" && machine == "3"){
alert("Usuario GANA!");
} else if (usuario == "2" && machine == "1"){
alert("Usuario GANA!");
} else if (usuario == "3" && machine == "2"){
alert("Usuario GANA!");
} else {
alert("Bot WIN!");
}
//FIN DEL JUEGO
Pueden agregar un “exit()” para que el programa termine justo después de mostrar el mensaje “Elegiste PERDER”, en caso de que el usuario agregue cualquier otro valor que no sea 1, 2 o 3:
Hola, mil gracias por este curso, es un gran inicio, comprimí un poco el codigo y funciono, se los comparto
if(pc == 1)
{alert(“pc elige piedra🪨”)}
else if ( pc ==2)
{alert(“pc elige papel🧻”)}
else if ( pc ==3)
{alert(“pc elige tijera✂️”)}
//COMBATE
if (pc == jugador){alert(“EMPATE”)}
else if(jugador == 1,2,3 && pc == 3,1,2){alert (“GANASTE”)}
else {alert("PERDISTE ")}
Se que por ahora estamos aprendiendo If- else if - else
pero quería dejarles la manera en la que se me ocurrió resolverlo.
// Operadores ternario “?”
Sintaxis:
( CONDICION ) ? ("en el caso que se cumpla") : ("en el caso que no se cumpla")
Primero preguntamos si ( PC == jugador )
si esto es correcto => ?
alerta(‘EMPATE’)
en el caso de que esto no sea correcto = > :
vamos a la siguiente pregunta
Antes de eso quiero dejarles esta tabla la cual lo saque de un compañero
Sabemos que nuestra única manera de ganar se reduce a 2 posibles razones, si nuestra resta es 1 o -2 en ese caso continuamos con el código :
Primer caso
(jugador - pc == 1) “si esto es correcto” => ? alert(‘GANASTE’)
Segundo caso
(jugador - pc == -2) “si esto es correcto” => ? alert(‘GANASTE’)
como vemos en los dos casos es lo mismo, podemos reducir esto con un => ||
(jugador - pc == 1)
en el caso de que no sea esto prueba con esto => ||
(jugador - pc == 2)
si uno de los dos es correcto
alert(‘GANASTE’)
en el caso de que ninguno de los dos sea correcto => :
alert('PERDISTE)
💎 Puse ese en vez de piedra porque el del video parece sushi
yo lo puse en menos lineas de codigo y me quedó así utilizando el operador “or”
if(jugador == pc) {
alert ("Empate!!!");
} else if (jugador == 1 && pc == 3 || jugador == 2 && pc == 1 || jugador == 3 && pc == 2) {
alert ('Ganaste!');
} else {
alert ('Perdiste :(');
}
los otros cursos velocidad X2
los cursos de Freddy x0.75
Cuando estuve programando la parte de las opciones donde ganaria , puse las 3 formas de como ganaria , no me fije que el puso solo 2 al principio xd, estoy emocionado que estoy aprendiendo …
hay un visual studio code online para no instalarlo “vscode.dev”
<!DOCTYPE html>
<head>
<meta charset=“utf-8”>
<title>Piedra, papel o tijera</title>
<title>❤️Rock,paper and scissor</title>
<script>
// 1 es piedra, 2 es papel, 3 es tijera
let jugador = 0
let pc = 2
jugador = prompt (“Elige 1 para pidra, 2 para papel,3 para tijera”)
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 (”¡ELEGISTE PERDER!")}
</script>
</head>
<body>
<h1 style=“COLOR: violet”>Piedra, papel o tijera</h1>
</body>
</html>
if(jugador == 1) {alert(“Elegiste 🪨”)} else if(jugador == 2) {alert(“Elegiste 📄”)} else if(jugador == 3) {alert(“Elegiste ✂️”)} else {alert ("¡ELEGISTE PERDER, SELECCIONA BIEN🤦♀️!")}
if(pc == 1) {alert("PC Elige 🪨")} else if(pc == 2) {alert("PC Elige 📄")} else if(pc == 3) {alert("PC Elige ✂️")}
// COMBATE
if(pc == jugador) {alert("EMPATE😁")}
else if(jugador == 1 && pc == 3) {alert("GANASTE 😊")}
else if(jugador == 2 && pc == 1) {alert("GANASTE 😊")}
else if(jugador == 3 && pc == 2) {alert("GANASTE 😊")}
else{alert("PERDISTE 😔")}
esta es mi forma:
function juego({p1}){
const pc = Math.ceil(Math.random()*3)
const winCase = {
1: (pc) => pc===3?"GANASTE":"PERDISTE",
2: (pc) => pc===1?"GANASTE":"PERDISTE",
3: (pc) => pc===2?"GANASTE":"PERDISTE",
}
if(p1 === pc) return "EMPATE"
else if(winCase[p1](pc) === "GANASTE") return {P:"GANASTE", p1, pc}
else return {P:"PERDISTE", p1, pc}
}
juego({p1:2})
Muestro mi solución para quien le sirva:
// 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 🥌")
} else if(jugador == 2) {
alert("Elegiste 📄")
} else if(jugador == 3) {
alert("Elegiste ✂")
} else {
alert("Elegiste ESTAR EQUIVOCADO")
}
if(pc == 1) {
alert("PC elige 🥌")
} else if(pc == 2) {
alert("PC elige 📄")
} else if(pc == 3) {
alert("PC elige ✂")
}
// COMBATE
if(pc == jugador) {
alert("EMPATE 😱")
} else if(jugador == 1 && pc == 3) {
alert("GANASTE, REY 🤟😎")
} else if(jugador == 2 && pc == 1) {
alert("GANASTE, REY 🤟😎")
} else if(jugador == 3 && pc == 2) {
alert("GANASTE, REY 🤟😎")
} else{
alert("HIII PERDISTE 🤡")
}
<script >
/1 para papel, 2 piedra; 3 tijera/
jugador=0;
pc=3;
jugador=prompt(“Elige 1 para piedra, 2 para papel, 3 para tijera”);
//alert(“Eleg
iste”+juador);
if (jugador1){
alert(“Elegiste piedra🪨”);
} else if (jugador2){
alert(“Elegiste papel🧻”);
}else if(jugador==3){
alert("Elegiste tijera✂️ ");
}else{
alert("Elegiste perder");
}
// codigo para el pc
if (pc==1){
alert("El pc eligio piedra🪨");
} else if (pc==2){
alert("El pc eligio papel🧻");
}else if(pc==3){
alert("El pc elegio tijera✂️");
}else{
alert("Elegiste perder");
}
// combate entre el usuario el pc
if (jugador==pc){
alert("Empate");
}else if (jugador==1&& pc==3){
alert ("ganaste");
}else if (jugador==2 && pc==1){
alert("ganaste");
}else if (jugador==3 && pc==2){
alert("ganaste");
}else{
alert("perdiste");
}
</script>
Por aquí he visto un aporte en el cual usan Algebra para seleccionar los escenarios en los cuales uno gana y me pareció muy interesante, por lo cual, yo quería dar mi aporte el cual es usando una Estructura de Datos llamada Hash Table ( O un simple Objeto ).
const UnSimpleObjeto= {
clave : "Valor"
}
const valor = UnSimpleObjeto[clave]
¿ Qué es un Objeto/Hash Table ? :
Es un tipo diccionario en el cual manejamos una clave y ésta clave tiene asociada un valor, en nuestro caso tenemos 3 claves, las distintas opciones de juego ( Piedra, Papel, Tijera ) y qué opción mata a quién jaja.
const manos = {
Piedra: "Tijera",
Papel: "Piedra",
Tijera: "Papel",
};
Como sabemos Piedra mata Tijera, Papel mata a Piedra, Tijera mata papel, dicho coloquialmente.
Entonces, le pedimos al usuario que nos dé qué opción quiere, mediante el nombre de la opción que eligió.
Puedes usar Prompt, pero en mi caso yo use ReadLine, que es un modulo de NodeJS
Entonces, verificamos que la opción que recibimos por parte del usuario exista en el Objeto que hemos creado anteriormente.
/*El método que usaste para recibir la opción del jugador*/
const jugador = prompt("¿ Qué opción quieres ? (Piedra, Papel, Tijera)")
const manoQueLeGanaAlUsuario = manos[jugador]
Digamos que el jugador se le dió por molestar y el escribió “asdasdasd”, lo cual, obviamente no es una clave de nuestro Objeto, por lo cual, vamos a verificar si tenemos un valor valido por parte del usuario.
const manoQueLeGanaAlUsuario = manos[jugador]
if(!manoQueLeGanaAlUsuario) /*Si es nulo o indefinido*/
{
alert("Elegiste PERDER")
}
Okey, ¿ Qué acaba de pasar aquí ?, primero, recuerdas que te dije que tenemos un objeto con las posibles opciones de qué le gana a a quién ( Está algo más arriba ), resulta que cada vez que nosotros elegimos una mano, la mano que elegimos la vamos a usar como clave, si ponemos un texto random como : “asdasdasdas”, no vamos a tener ninguno valor de nuestro objeto, encambio, si introducimos una clave la cual es exactamente igual a la clave que tiene nuestro objeto, el nos va a devolver el valor y el valor es qué opción nos gana a nosotros.
const manos = {
/*Las Opciones*/
laOpcionQueElegiste : "loQueLeGanaATuOpcion"
}
const loQueLeGanaATuOpcion = manos[laOpcionQueElegiste]
/**El Símbolo ( ! ), significa NO,
en nuestro caso, verifica si algo existe,
osea que no es nulo o indefinido **/
/**Si loQueLeGanaATuOpcion no existe, eso quiere decir que el usuario no puso bien la clave, osea la opción que eligió es incorrecta**/
if(!loQueLeGanaATuOpcion) {
alert("PERDISTE JUAJAJA")
}
Ahora ¿ Cómo haríamos para tener la opción del computador ?, pues, vamos a usar número aleatorios, para esto, vamos a usar dos métodos de un Elemento llamado Math, que nos da funciones Matemáticas.
Math.floor(x) // Le quita los decimales a x
Math.random() // Nos devuelve un número con muchos decimales entre 0 y 1
// Ponemos 3 porque es el máximo que queremos que nos salga, y sabes que el número máximo de opciones es 3 (Piedra, Papel, Tijera)
const numeroAltEntre1y3 = Math.floor(Math.random() * 3) // -> 0 , 1 , 2
Ahora necesitamos que un grupo de opciones, para ser más especifico, vamos a usar algo muy parecido a las matrices, que llamamos arreglos, en este caso, vamos a sacar todas las claves de nuestro Objeto de modo que tengamos todas las opciones, y lo usamos específicamente porque tiene una propiedad y acceder a cada uno de los elementos dentro del arreglo mediante su posición ( Inicia en 0 )
const opciones = ["Piedra", "Papel", "Tijera"] // Si usas ésta opción, recuerda que cada opción debe estar exactamente escrita en la forma que lo escribiste en el Objeto.
// Lo mismo pero de una manera más elegante.
const opciones = Object.keys(manos) // ["Piedra", "Papel", "Tijera"]
Y aplicando todo lo que te he explicado, quedaría así:
const numeroAleatorio = Math.floor(Math.random() * 3)
const opcionDelPc = opciones[numeroAleatorio]
const opcionQueLeGanaAlPc = manos[opcionDelPc]
Chequeamos el empate:
if(jugador == opcionDelPc) {
alert("Empataron!")
}
Chequeamos si ganas o pierdes:
if(jugador == opcionQueLeGanaAlPc) {
alert("Ganaste !")
} else if (opcionDelPc == manoQueLeGanaAlUsuario) {
alert("Jajajja, malo, te ganó la pc 😂")
}
Sí leíste todo esto, te agradezco mucho!, quizás sea algo confuso al inicio, pero sé que vas a dominar esto!, solamente ponle cuidado jsjs
Para que sea un poquito mas interesante y divertido…
les facilito un codigo para que la pc genere numeros aleatorios de entre el 1 y el 3, asi nos divertimos mas!!!:
function getRandomInt(min, max)
{
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let jugador = 0
let pc = getRandomInt(1,3);
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.