Fundamentos de Programaci贸n

1

Bienvenida a Platzi: 驴qu茅 necesitas para tomar el curso?

2

驴C贸mo aprender programaci贸n?

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de 谩rbol en HTML

6

Instalando tu primer editor de c贸digo

7

C贸mo declarar variables y usar prompt

8

Algoritmo de piedra, papel o tijera

9

Algoritmo avanzado de piedra, papel o tijera

10

Aleatoriedad

11

Refactor del c贸digo usando funciones

12

Ciclos

13

Gana 3 veces

14

Archivos de HTML y JavaScript

15

驴Qu茅 es el DOM?

Quiz: Fundamentos de Programaci贸n

Desarrollando un juego con HTML y JavaScript

16

Maquetaci贸n con HTML

17

Secci贸n de elegir mascota

18

驴D贸nde ubicar la etiqueta script? Conectando HTML con JavaScript

19

Escuchando eventos con JavaScript

20

addEventListener

21

Manipulaci贸n del DOM

22

Enemigos aleatorios

23

Ataques en JavaScript

24

Ataques aleatorios del enemigo

25

Imprimiendo ataques del enemigo

26

驴Ganaste, perdiste o empataste?

27

Tablas de verdad

28

Creando el contador de vidas

29

驴Qui茅n gan贸 el juego?

30

Reiniciando el juego

31

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Anatom铆a de CSS

33

Tipos de display

34

Flexbox

35

Modelo de caja

36

Im谩genes para los Mokepones

37

Estilos del bot贸n

38

Adaptando HTML al dise帽o del juego

39

Layout: t铆tulo y ataques

40

Adaptando JavaScript al dise帽o del juego

41

CSS Grid

42

Responsive Design

43

Detalles finales

Quiz: Estilos con CSS

Optimizaci贸n de c贸digo

44

Revisi贸n de c贸digo

45

Don't repeat yourself (DRY)

46

Clases y objetos

47

Clases y objetos de Mokepon

48

Arrays o arreglos

49

Objetos vs. arreglos

50

Ciclos: manipulando el DOM con iteradores

51

Declaraci贸n lenta de variables

52

Una sola fuente de la verdad

53

Mascotas aleatorias con arreglos

54

Ataques din谩micos por cada mascota: extraer

55

Renderizado din谩mico en HTML

56

Eventos de click din谩micos

57

Secuencia de ataques del enemigo

58

Iniciando el combate

59

Resolviendo el reto de condicionales

60

Optimizando el frontend del juego

Quiz: Optimizaci贸n de c贸digo

Mapa con canvas

61

Introducci贸n a canvas: dibujando con JavaScript

62

Moviendo a Capipepo hacia la derecha

63

Movimiento hacia todas las direcciones

64

Movimientos con el teclado

65

Im谩genes y personajes de fondo

66

M茅todos en las clases

67

Obst谩culos y colisiones

68

Combate entre mokepones colisionados

69

Mapa responsive

70

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

驴Qu茅 es backend?

72

Instalaci贸n de Node.js y NPM

73

Terminal de comandos y Node.js

74

Servidor web con Express.js

75

HTTP, localhost, servidores y puertos

76

Express.js y fetch: API REST con JavaScript

77

JSON y POST: mokepon online

78

Transmisi贸n de coordenadas

79

Mokepones din谩micos en el mapa

80

Optimizando el mapa del juego

81

Batalla entre jugadores

82

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Pr贸ximos pasos

83

Probando el juego en varios dispositivos

84

驴Y ahora qu茅 curso tomar?

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Tablas de verdad

27/84
Recursos

Aportes 119

Preguntas 6

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

馃暤锔忊嶁檪锔 Hice unos apuntes explicando con m谩s ejemplos c贸mo funcionan las tablas de verdad. Aqu铆 te los dejo para que les eches un ojo 馃挌
馃憠 Qu茅 son las tablas de verdad: reglas y ejemplos con frutas

This is true hahaha
O deber铆a decir This is !false

Con las tablas de verdad logr茅 reducir mucho el c贸digo del combate:

ANTES:

DESPUES:

鈿ablas de verdad

Operadores vistos en la clase:

  • ! <鈥揘OT = Tabla Negaci贸n
  • && <鈥揂ND = Tabla Conjunci贸n
  • || <鈥揙R = Tabla Disyunci贸n

Las barritas del 鈥渙r鈥 en mi teclado est谩 sobre la tecla 鈥渢ab鈥, a la izquierda del numero 1

Este s铆mbolo | en realidad se llama PLECA y es usado en varios contextos. Por ejemplo en matem谩ticas se usa para encerrar una expresi贸n obteniendo su Valor Absoluto; en los shell de sistemas operativos como Linux o Windows, se utiliza para canalizar o entubar la salida de un programa con la entrada de otro, operaci贸n se que denomina PIPE (tuber铆a). En programaci贸n, como bien se ha presentado en esta clase, se utiliza para representar la operaci贸n OR o Disyunci贸n.

Yo lo entend铆 f谩cilmente cuando empec茅 a tomar el AND como el operador multiplicar y el OR como el sumar:
AND:
1x1=1 (TRUE)
1x0=0 (FALSE)
0x1=0 (FALSE)
0x0=0 (FALSE
OR:
1+1=1 (TRUE)
1+0=1 (TRUE)
0+1=1 (TRUE)
0+0=0 (FALSE)

Para continuar la tradici贸n de enviar este v铆deo cada vez que aparece el tema: https://youtu.be/Pfyuv5ZnNNw

El 鈥渙r鈥 lopodemos utilizarpor ejemplo en el juego de 鈥淢okepon鈥. Si unimos todas las condiciones en que ganamos.

si se quiere buscar documentaci贸n en la web sobre este tema, se puede encontrar de la siguiente forma:

NOT -> ! = llamada tabla de negaci贸n
AND -> && = llamada tabla de conjunci贸n
OR -> || = llamada tabla de disyunci贸n

En 鈥楢ND鈥 solamente son verdadero cuando sus dos condiciones son VERDADERAS, en 鈥極R鈥 es falso cuando sus dos condiciones son FALSAS.

Que complicados son los operadores logicos!!! 馃ゴ

A veces lo vemos complicado, pero la verdad la logica computacional es muy bonita y cuando la entiendes el mundo de la programacion se te hace un mundo de facil!

al fin entendi el meme del patricio, quien lo habria dicho

En mi teclado las barritas del or || aparecen abajo de la tecla escape, al lado del numero 1, arriba de la tecla tab.

En la escritura de python, usamos:

and 'operador y鈥
or 鈥榦perador o鈥
== 鈥業gual a鈥
!= 鈥楧irefrente a鈥

Seguimos aprendiendo, hasta ahora le voy entendiendo bastante bien, no me acuerdo todos los codigos si tuviera que emplearlos para crear algo yo solo, pero todo es pr谩ctica, los profes ense帽an muy bien!

Aqu铆 tienen toda la informaci贸n sobre las tablas de verdad:

Les comparto esta tabla que encontre en las clases de pensamiento l贸gico

  • Conjunci贸n = la conclusi贸n es verdadera cuando ambos valores son verdaderos y se representa con un && (AND) 鈭

  • Disyunci贸n inclusiva = la conclusi贸n es verdadera, cuando uno de los valores es verdadero y se representa con un or, ||, 鈭

  • Disyunci贸n exclusiva = la conclusi贸n es falsa cuando ambos valores se repiten (F XOR F // V XOR V) En pocas palabras: la conclusi贸n es verdadera solo cuando ambos valores NO se repiten. Se representa con XOR, 鈯

  • Condicional = la conclusi贸n es falsa cuando el primer valor es verdadero y el segundo falso. Se representa con un then, 鈬
    Bicondicional = La conclusi贸n es verdadera cuando ambas premisas son verdaderas o falsas. Si son diferentes (F鈬擵 // V鈬擣) la conclusi贸n es falsa. Se representa con un if, 鈬.

El curso de fundamentos del software es vital porque te explican como de verdad funciona esto de la programaci贸n y la informatica

En mi caso como estudiante en mecatr贸nica utilizo las tablas de verdad tanto como para programar como para circuitos que usan compuertas l贸gicas, con esto podemos crear desde contadores, cron贸metros, relojes etc. Cuando son circuitos muy largos solemos simplificarlos con Algebra de boole, mapas de karnaugh.
Otros operadores l贸gicos que conozco son los condicionales donde si pasa A entonces B, los bicondicionales y los negativos de todos los mencionados XAND, XOR donde si su resultado se invierte si lo comparamos con sus hom贸logos AND y OR, un ejemplo es que si en AND ES 1 and 1 -> 1 en XAND ser铆a 0 simplemente por que est谩 negando el uno.

Saber las tablas es muy importante para las condiciones 馃槂

LOGICA PROPOSICIONAL

Tambien existe el XOR al menos lo vi en Python, ser铆a interesante saber m谩s sombre este operador.

En esta clase no continuaremos el proyecto, vamos a tratar las tablas de verdad. Esta es la base de la programaci贸n. Debido a que la electricidad y los computadores funcionan as铆.
La l贸gica de las tablas se basa en binaro, es decir unos y ceros o verdaderos y falsos

De aqu铆 salen todos los operadores y sus combinaciones

function combateMokepon() { 
    if (ataqueEnemigo == ataqueJugador) {
        crearMensajes('EMPATE')
    } else if((ataqueJugador == 'FUEGO馃敟' && ataqueEnemigo == 'TIERRA馃尡') || (ataqueJugador == 'AGUA馃挧' && ataqueEnemigo  == 'FUEGO馃敟') || (ataqueJugador == 'TIERRA馃尡' && ataqueEnemigo  == 'AGUA馃挧')) {
        crearMensajes('GANASTE')
    } else {
        crearMensajes('PERDISTE')
    }
}

Habia visto tablas de verdad anteriormente pero de verdad no sabia como aplicar esa logica a un codigo, gracias totales paor este curso

En mi teclado no hay la barrita: F

Esto tambi茅n lo vimos el los cursos de pensamiento l贸gico con la profe Ana Belisa Martinez

  1. Operadores de asignaci贸n

  2. Operadores de comparaci贸n

  3. Operadores aritm茅ticos

  4. Operadores l贸gicos

  5. Operadores de cadena

Esto me record贸 este episodio de Futurama

En mi teclado, || est谩 abajo del Escape. Mi c贸digo mejorado con ||:

function combate(){
    if (ataqueEnemigo == ataqueJugador){
        crearMensaje("EMPATE")
    } 
    else if ((ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA') || (ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO') || (ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA') ){
        crearMensaje("GANASTE")
    }
    else{
        crearMensaje("PERDISTE")
    }
}

Las dos barras de rectas en mi PC est谩n debajo de la tecla DEL

Cuando hablamos de un operador como AND tenemos las siguientes condiciones:

Cuando las 2 condiciones cumplen, es decir, que sea verdadero, el resultado es VERDADERO o TRUE.
.
Esta es la 煤nica condici贸n en el caso del operador AND en el que el resultado ser谩 verdadero.
Los dem谩s escenarios que se presenten, ya sea que uno si cumpla con la condici贸n verdadera y el otro no, o tambi茅n cuando los dos no llegan a cumplir con la condici贸n, el resultado ser谩 FALSO o FALSE.

En el caso del operador OR o tambi茅n conocido como 鈥淥鈥 en cualquiera de las condiciones, mientras una cumpla como verdadero, el resultado ser谩 VERDADERO.
.
Pero a excepci贸n del operador AND, para poder obtener un FALSE las 2 condiciones no se deben cumplir, es decir que las 2 condiciones sena FALSAS para que el resultado sea FALSE o FALSA.

Representaci贸n de los operadores en lenguaje de programaci贸n
.
AND -> &&
OR -> ||
NOT -> !

mi | esta arriba de la tecla tab

el mio || esta , arriba de Tab , a la izquiera del numero 1

En mi laptop tengo el s铆mbolo de pipe en la tecla que est谩 debajo de la tecla esc

La Tabla de verdad con operador && (AND), es de tipo Conjunci贸n, donde el resultado es Verdadero cuando ambas (exp1 y exp 2) lo son.

La Tabla de verdad con operador || (OR), es de tipo Disyunci贸n, donde el resultado es Verdadero cuando una de los dos(exp1 贸 exp 2) lo sea

Psdta: El simbolo || (OR) est谩 ubicado en sobre la tecla tabulador 贸 a la izquierda del n煤mero 1 en el teclado.

El operador de OR 鈥渱|鈥 en mi teclado esta encima de la tecla TAB

En mi pc la barrita del OR || se encuentra debajo de la techa escape

realmente quiero de jar me comentario, volvere... con conocimineto 馃榿

OR = alt + 124

脕lgebra b谩sica: operaci贸n entre signos:

Sistema binario y Booleanos

Cuando yo no encuentro un signo para el operador que estoy necesitando busco 鈥渙perador l贸gico y, o, xor, not鈥 y lo copio en el c贸digo.

No es la mejor manera pero le he usado muchas veces

La OR es una 鈥榦鈥 inclusiva, ya que permite el evento de que mabas sean verdaderas.
Existe una que se llama EXOR que es una 鈥榦鈥 exclusiva, ya que solo permite los eventos donde solo uno de los dos ocurra.

驴Qu茅 son las tablas de verdad?: Tabla de verdad AND (&&)

Tabla de verdad del operador OR (||)

Hablando de los ciclos que hemos usado en este curso, record茅 que utilice casi los mismo ciclos para crear un algoritmo para una cafeter铆a.

Es un ciclo mientras para el men煤 y dentro lleva ciclos si para complementos:

claro aqu铆 esta todo en espa帽ol la mayor diferencia.

Que incre铆ble tanto en la Universidad como en platzi e visto estos temas cada d铆a afino mas mis habilidades.

#TeAmoPlatzi.

En mi teclado la barrita recta para representar el operador OR se encuentra arriba de mi tecla TAB, saludos a toda la comunidad.

comparto este curioso hecho de la historia, El desarrollo de un computador a partir de l贸gica ternaria

setun

Si este tema se explicara en el colegio nos evitar铆amos muchos problemas en la educaci贸n superior y en la vida en general. Con ejemplos de la vida diario incluso ayuda a pensar de forma sistem谩tica, de consecuencias, acci贸n - reacci贸n.

En mi caso, estuve utilizando el or para el momento de determinar si ganaste o perdiste, solo para escribir en una sola l铆nea todas las condiciones de victoria

Gente les recomiendo que hagan el curso de pensamiento l贸gico: algoritmos, es el primero de la escuela de desarrollo de software, tocan este tema con mucha profundidad

En esta clase del curso de logica explican todos lo tipos de tablas de verdad

https://platzi.com/clases/3221-pensamiento-logico/50676-que-son-las-tablas-de-verdad/

excelente como explicas todo!!! enganchas al curso

El s铆mbolo | en mi teclado esta abajo del Esc

Aplicando tablas de verdad en el juego Pierda-Papel-Tijeras

// Funci贸n para saber qui茅n gana
function comparar(eleccionHumano, eleccionComputadora) {            
    //Cuando el jugador gana
    if((opcionElegida(eleccionHumano) == "piedra" && opcionElegida(eleccionComputadora) == "tijera")
        || (opcionElegida(eleccionHumano) == "papel" && opcionElegida(eleccionComputadora) == "piedra") 
        || (opcionElegida(eleccionHumano) == "tijera" && opcionElegida(eleccionComputadora) == "papel")) {  
        resultado = "GANASTE"
    //Cuando el jugador empata
    } else if(eleccionHumano == eleccionComputadora) {
        return resultado = "EMPATARON"  
    //Cuando el jugador pierde
    } else {
        return resultado = "PERDISTE"  
    }
}

El pipe operator, pleca, o barra vertical, en mi teclado est谩 arriba del enter, pero tambi茅n puede estar arriba del Tab si cambio el idioma de mi pc a espa帽ol鈥 El idioma del pc cambia el teclado de disposici贸n ISO (espa帽ol) a ANSI (ingl茅s). Esto explica por qu茅 a los teclados americanos les funciona la letra 帽 a煤n cuando no la tienen impresa.

or esta encima del tab

Uno de los tantos usos que le podemos dar a las tablas de verdad es en el if :

Ejm. 1.- Cuando ambos son verdaderos, S脥 hago la acci贸n.
si tengo hambre (verdadero) && hay comida en el plato (verdadero) {
entonces (como hasta saciarme)
}
Ejm. 2.- Cuando uno es falso, NO hago la acci贸n.
si tengo hambre (verdadero) && hay comida en el plato (falso) {
entonces (como hasta saciarme)
}

esto fue lo que hize con las tablas de verdad, las meti en un excel y agale
(
y de esta manera ahorrarme parde condicionales

en la mia el or (||) esta abajo de la tecla ESC

con esto pude reducir bastante el c贸digo

function definirResultado() {
    if(ataqueJugador == ataqueEnemigo){
        resultado = 'EMPATE'
    } else if ((ataqueJugador == 'FUEGO' && 		 
       ataqueEnemigo == 'TIERRA') || (ataqueJugador == 
       'AGUA' && ataqueEnemigo == 'FUEGO') || 
       (ataqueJugador == 'TIERRA' && ataqueEnemigo == 
        'AGUA')){
             resultado = 'GANASTE'
    } else {
        resultado = 'PERDISTE'
    }
}

Hola

Yo los uso para esto

las barritas paradas me salen encima del boton de tab

Es interesante que en algunos proyectos de FrontEnd se hayan usado estas tablas de verdad. Por un lado, tiene mucho sentido debido a que permiten la validacion del funcionamiento de una pagina web hecha con JS y otra hecha con Flutter. Ahora si me quedo claro el uso de las condicionales y porque algunas llevaban valores como 鈥&&鈥, 鈥渱|鈥 o 鈥!鈥. Bien explicado Profe Juan.

Este curso es un reto particular para mi desarrollo. Aprend铆 estos fundamentos en clases cl谩sicas pre-pandemia, al terminar mis materias de la licenciatura sent铆 que no sab铆a nada por no tener habilidades pr谩cticas notables (y llego la pandemia) y tome un sindrome de BurnOut por casi 2 a帽os sin poder escribir c贸digo sin sentir ansiedad.

Ahora con un enf谩sis en los cursos de habilidades blandas he estado viendo c贸mo manejar mis emociones y que es ser productivo. Me perdono por aprender de mala manera a programar, ahora lo hago jugando, creando, expresandom茅.

Est茅n atentos a publicaci贸n de mi portafolio. ;D

Me encanto este resumen!!

la verdad es que me cuesta mucho entender

las pc y la inform谩tica funciona de lo mas b谩sico y profundo de componentes de unos y ceros( 1 , 0 ) y en programaci贸n verdaderos o falsos

y las tablas de verdad podrian ser . operadores:

AND AND (&&) = solo se cumple cuando las dos condiciones son Verdaderas

OR ( | | ) = se cumple cuando al menos dos de la condiciones es verdadera

NOT (!) = convierte a lo opuesto es decir si es false lo convierte a true

me pasa que el profe dijo en un momento que nuestro codigo no tiene que ser igual al de el. PERO YO NO SE NI HACER CODIGO AUN JAJAJA.

Me acord茅 de mis tiempos en la prepa; " Las clases de 谩lgebra"

Mi pipe est谩 arriba del shift 馃槉

馃搶 Las tablas de verdad y sus operadores ayudan a crear enunciados l贸gicos

function combate(){
    if(ataqueJugador == ataqueEnemigo){
        mensajeCombate("EMPATE")
    }
    else if(ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO"){
        mensajeCombate("GANASTE")
    }
    else if(ataqueJugador == "FUEGO" && ataqueEnemigo == "PLANTA" ){
        mensajeCombate("GANASTE")
    }
    else if(ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
        mensajeCombate("GANASTE")
    }
    else if(ataqueJugador == "PLANTA" && ataqueEnemigo == "TIERRA"){
        mensajeCombate("GANASTE")
    }
    else if(ataqueJugador == "AGUA" && ataqueEnemigo == "PLANTA"){
        mensajeCombate("GANASTE")
    }
    else if(ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA"){
        mensajeCombate("GANASTE")
    }
    else{
        mensajeCombate("PERDISTE")
    }

este signo | lo encuentran arriba de la tecla tab, para quienes tienen en ingl茅s su teclado

Ese no lo tengo, tengo que sacarlo con alt 124 jejeje

Mi || esta arriba de la tecla TAP.

Aqui un video en YouTube que lo explica aun mejor!!! Espero les sirva:

https://youtu.be/bxqLsrlakK8

Con el operador OR logre reducir un poco el c贸digo

function combate(){
    if(ataqueEnemigo == ataqueJugador){
        crearMensaje('EMPATE')
    }else if(ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA' || ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO' || ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA'){
        crearMensaje('GANASTE')

    }else{
        crearMensaje('PERDISTE')
    }

}

En mi caso el s铆mbolo de Or se hace con
ALT+1
El alt es el que esta a la derecha de la barra espaciadora, con el otro no me funciona. 馃槂

con el or se pueden concatenar los if que corresponden a GANASTE en una sola linea

function combate() {
if(ataqueJugador == ataqueEnemigo) {
console.log(鈥楨mpataste鈥);
crearMensaje(鈥楨MPATASTE鈥)
} else if((ataqueJugador == 鈥楩UEGO鈥 && ataqueEnemigo == 鈥楾IERRA鈥) || (ataqueJugador == 鈥楢GUA鈥 && ataqueEnemigo == 鈥楩UEGO鈥) || (ataqueJugador == 鈥楾IERRA鈥 && ataqueEnemigo == 鈥楢GUA鈥)) {
console.log(鈥楪anaste鈥);
crearMensaje(鈥楪ANASTE鈥)
} else {
console.log(鈥楶erdiste鈥);
crearMensaje(鈥楶ERDISTE鈥)
}
}

! = exclamaci贸n

El costo de este certificado delcurso si lo logro terminar tiene un costo economico o es gratis!

Seg煤n mi l贸gica este es mi resultado en mis condicionales:

// FUNCI脫N - RESULTADO DE ATAQUE
function resultAttack(){
    if(attackPlayer == attackEnemy){
        resultFight = 'EMPATASTE 馃槖';
    } else if((attackPlayer == 'Agua' && attackEnemy == 'Fuego') || (attackPlayer == 'Tierra' && attackEnemy == 'Fuego') || (attackPlayer == 'Tierra' && attackEnemy == 'Agua')){
        resultFight = 'GANASTE 馃帀';
    } else if((attackPlayer == 'Fuego' && attackEnemy == 'Agua') || (attackPlayer == 'Fuego' && attackEnemy == 'Tierra') || (attackPlayer == 'Agua' && attackEnemy == 'Tierra')){
        resultFight = 'PERDISTE 馃槬';
    } else{
        resultFight = 'No elegiste un tipo de Ataque';
    }
}

Yo utilice el OR (ll) para simplificar los else if en mi c贸digo

|| en mi caso est谩 al lado del n煤mero 1 y encima de tab

De esta forma he usado el operador && y || para agregarlo al c贸digo en la secci贸n combate y hacer un condicional m谩s complejo

function combate() {
    if(ataqueEnemigo == ataqueJugador) {
        crearMensaje('Empate');
    } else if((ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA') || (ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO') || (ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA')) {
        crearMensaje('Ganaste')
    } else {
        crearMensaje('Perdiste')
    }
}

la tecla de la barra regularmente est谩 al lado del n煤mero 1 y abajo del esc. c贸mo es mi caso 鈽猴笍馃槂

or me permite organizar mejor el c贸digo


function combateJuego(){
    if(ataqueEnemigo == ataqueJugador){
        crearMensaje("Empate")
    } else if(ataqueJugador == 'Fuego' && ataqueEnemigo == 'Tierra' || ataqueJugador == 'Agua' && ataqueEnemigo == 'Fuego' || ataqueJugador == 'Tierra' && ataqueEnemigo == 'Agua'){
        crearMensaje("Ganaste")
    } else { 
        crearMensaje("Perdiste")
    }        
}

En mi caso utilic茅 dos operadores para resumir las lineas de condicionales, lo hice de esta forma:

En mi caso no veo donde est谩 el pipe pero su atajo en mi teclado es Alt + 124

En mi computador no veo ninguna tecla que tenga las dos l铆neas verticales 馃槙