Voy siguiendo el curso con una ligera variante
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
Juan David Castro Gallego
Aportes 545
Preguntas 165
Voy siguiendo el curso con una ligera variante
Lo resolvi con una o dos lineas demás yo…
let resultado //común a todas las funciones
function ataqueAleatorioEnemigo() {
let ataqueAleatorio = aleatorio(1, 3)
if (ataqueAleatorio == 1) {
ataqueEnemigo = "FUEGO"
} else if (ataqueAleatorio == 2){
ataqueEnemigo = "AGUA"
} else if (ataqueAleatorio == 3){
ataqueEnemigo = "TIERRA"}
combate()//se invoca la función aquí, antes de la de crearMensaje, para que la variable resultado ya tenga un valor establecido
crearMensaje()
}
function combate() {
if (ataqueJugador == ataqueEnemigo) {
resultado = "EMPATE"
} else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA") {
resultado = "GANASTE"
} else if (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO") {
resultado = "GANASTE"
} else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA") {
resultado = "GANASTE"
} else {resultado = "PERDISTE"}
}//En vez de invocar la función crearMensaje en cada una de las condicionantes se le asigna un valor a la variable resultado
function crearMensaje() {
let sectionMensajes = document.getElementById("mensajes")
let parrafo = document.createElement("p")
parrafo.innerHTML = "Tu mascota atacó con " + ataqueJugador + ", la mascota del enemigo atacó con " + ataqueEnemigo + ": " + resultado
sectionMensajes.appendChild(parrafo)
}
Muy bueno que en este curso nuevo de programación básica utilicen let en js 💚
Descripción. let te permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando. a diferencia de la palabra clave var la cual define una variable global o local en una función sin importar el ámbito del bloque.
para no crear muchos ELSE IF por cada victoria, yo lo que hice fue, meter todas las victorias en un solo ELSE IF, usando este operador “||”
if(ataqueJugador == ataqueEnemigo){
crearMensaje("EMPATE");
}else if(ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO" || ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA" || ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
crearMensaje("GANASTE");
}else{
crearMensaje("perdiste");
}
Mejor explicado no puede haber, su forma de enseñar con animos y alegria, al usuario lo mantiene atento a la clase, cosa que no pasa con algunos prof de las universidades
Soy demasiado novata en esto, tenía miedo de empezar y siempre me preguntaba cómo hacen los programadores para saber qué hacer en cada caso, pero creo que tengo la respuesta, y es hacer lo que hicieron en el caso anterior jajaja, me gusta estar entendiendo por fin!!
Yo cree una variable global llamada resultadoDelCombate
Cree una función llamada combate() la cual se ejecuta dentro de la función ataqueAleatoreoEnemigo() Justo antes de la función crearmensaje()
La logica del combate es exactamente la misma del Piedra Papel o Tijera, donde por medio de los condicionales if, else if y else se define el resultado que se guarda en la variable global resultadoDelCombate.
Añado la variable global resultadoDelCombate dentro de mi parrafo en la funcion crearMensaje()
voy a pasasr este juego a nft xD
Así lo resolví. Creé una nueva variable global llamada resultado , luego creé una función llamada combate y dentro de la función, el resultado del combate se lo asignaba a la variable resultado. Por último, el resultado lo concateno con el mensaje que se dispara en la función crearMensaje.
Estuve dos dias, DOS DIAS¡¡¡¡ intentando solucionar un error, el error consistía que el resultado siempre me daba undefined, y lo que pasa es que estuve haciendo de todo para solucionar el dicho error, al fin lo encontré, y es que no estaba invocando a la función combate, que felicidad xd
no se olviden de revisar donde invocan las funciones, es reimportante ya que la solución no se encuentra en ninguna parte mas que en la lógica, y se los digo por que busque en muchas zonas como solucionar errores de directorio y eso, mucha suerte¡¡¡
Vamos que vamos👏🙌
Yo de mokepon no se mucho de quien debería ganar pero yo lo hice así:
//Se creo la variable resultado
let resultado
//Se hizo la función de resultado de batalla
function resultado_batalla(){
if (ataqueEnemigo == ataqueJugador){
resultado = "EMPATE"
} else if (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO"){
resultado = "GANASTE"
} else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "FUEGO"){
resultado = "GANASTE"
} else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
resultado = "GANASTE"
} else{
resultado = "PERDISTE"
}
}
// Coloque la función antes de que se cree el mensaje
function ataqueAleatorioEnemigo(){
let ataqueAleatorio = aleatorio(1,3)
// let spanAtaqueEnemigo = document.getElementById("mascota-enemigo")
if (ataqueAleatorio == 1){
ataqueEnemigo = "FUEGO"
}
else if (ataqueAleatorio == 2){
ataqueEnemigo = "AGUA"
}
else if (ataqueAleatorio == 3){
ataqueEnemigo = "TIERRA"
}
resultado_batalla()
crearMensaje()
}
//Se agrego a la función de creanMensaje la variable resultado
function crearMensaje(){
let sectionMensajes = document.getElementById("mensajes")
let parrafo = document.createElement("p")
parrafo.innerHTML = "Tu mascota atacó con " + ataqueJugador + ", la mascota del enemigo atacó con " + ataqueEnemigo + " " + resultado
sectionMensajes.appendChild(parrafo)
}
vi en un comentario anterior a alguien usando “and/or” || y me ha servido para agrupar todas las posiiblidades con eñ mismo resultado, les dejo esa parte de mi codigo
function combate(){
if (ataqueJugador == ataqueEnemigo) {
result = "EMPATE"
} else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA" || ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO" || ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA") {
result = "GANASTE"
} else {
result = "PERDISTE"
}
Yo lo resolví de otra manera. Puse todo el combate dentro de la función crearMensaje que ya teníamos y no cambié nada más.
Me quedo asi:
let ataqueJugador
let ataqueEnemigo
function iniciarJuego(){
let botonMascotaJugador = document.getElementById("boton-mascota")
botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador)
let botonFuego = document.getElementById("boton-fuego")
botonFuego.addEventListener("click", ataqueFuego)
let botonAgua = document.getElementById("boton-agua")
botonAgua.addEventListener("click", ataqueAgua)
let botonTierra = document.getElementById("boton-tierra")
botonTierra.addEventListener("click", ataqueTierra)
}
function seleccionarMascotaJugador(){
let inputHipodoge = document.getElementById("hipodoge")
let inputCapipepo = document.getElementById("capipepo")
let inputRatigueya = document.getElementById("ratigueya")
let spanMascotaJugador = document.getElementById("mascota-jugador")
if (inputHipodoge.checked) {
spanMascotaJugador.innerHTML = "Hipodoge"
} else if (inputCapipepo.checked) {
spanMascotaJugador.innerHTML = "Capipepo"
} else if (inputRatigueya.checked) {
spanMascotaJugador.innerHTML = "Ratigueya"
} else {
alert("Todavía no seleccionaste a tu mascota")
}
seleccionarMascotaEnemigo()
}
function seleccionarMascotaEnemigo() {
let mascotaAleatoria = aleatorio(1,3)
let spanMascotaEnemigo = document.getElementById("mascota-enemigo")
if (mascotaAleatoria == 1) {
spanMascotaEnemigo.innerHTML = "Hipodoge"
} else if (mascotaAleatoria == 2) {
spanMascotaEnemigo.innerHTML = "Capipepo"
} else {
spanMascotaEnemigo.innerHTML = "Ratigueya"
}
}
function ataqueFuego() {
ataqueJugador = "FUEGO"
ataqueAleatorioEnemigo()
}
function ataqueAgua() {
ataqueJugador = "AGUA"
ataqueAleatorioEnemigo()
}
function ataqueTierra() {
ataqueJugador = "TIERRA"
ataqueAleatorioEnemigo()
}
function ataqueAleatorioEnemigo() {
let ataqueAleatorio = aleatorio(1,3)
if (ataqueAleatorio == 1) {
ataqueEnemigo = "FUEGO"
} else if (ataqueAleatorio == 2) {
ataqueEnemigo = "AGUA"
} else {
ataqueEnemigo = "TIERRA"
}
crearMensaje()
}
function crearMensaje() {
let resultado
if (ataqueJugador == ataqueEnemigo) {
resultado = "Empate 🤝"
} else if ((ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA") || (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO") || (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA")) {
resultado = "Ganaste! 🎉"
} else if ((ataqueJugador == "FUEGO" && ataqueEnemigo == "AGUA") || (ataqueJugador == "AGUA" && ataqueEnemigo == "TIERRA") || (ataqueJugador == "TIERRA" && ataqueEnemigo == "FUEGO")) {
resultado = "Perdiste! 😭"
}
let sectionMensajes = document.getElementById("mensajes")
let parrafo = document.createElement("p")
parrafo.innerHTML = "Tu mascota atacó con " + ataqueJugador + ", la mascota del enemigo atacó con " + ataqueEnemigo + ". " + resultado
sectionMensajes.appendChild(parrafo)
}
function aleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
window.addEventListener("load", iniciarJuego)
Me pasó lo de los memes…
Hice una solución distinta a la del maestro, primero no funcionó entonces usé la solución de él. Pero me di cuenta de un error y volví a intentar con mi solución y funcionó.
Aunque si les soy honesto, no tengo ni pta idea de por qué mi código funciona xd
Está fue la manera como lo resolví. El código me funciona sin embargo es algo diferente a como lo realizó El profe Juan David
gracias platzi tengo trece años y es muy genial y facil aprender con ustedes una pregunta mi pagina se creshea al momento de aplicar un while
//#region variablesId
//#region buttonsId
let petButton = document.getElementById("selectPet");
let fireButtonAttack = document.getElementById("fireAttack");
let waterButtonAttack = document.getElementById("waterAttack");
let earthButtonAttack = document.getElementById("earthAttack");
//#endregion
//#region petsId
let hipodogeId = document.getElementById("hipodoge");
let capipepoId = document.getElementById("capipepo");
let ratigueyaId = document.getElementById("ratigueya");
let langostelvisId = document.getElementById("langostelvis");
let tucapalmaId = document.getElementById("tucapalma");
let pydosId = document.getElementById("pydos");
//#endregion
//#region dataPetsId
let petToThePlayer = document.getElementById("petToPlayer");
let petToThePlayerLives = document.getElementById("livesToPetToPlayer");
let petToTheEnemy = document.getElementById("petToEnemy");
let petToTheEnemyLives = document.getElementById("livesToPetToEnemy");
labelP = document.getElementById("messages");
//#endregion
//#endregion
//#region normalVars
let playerPetName;
let pcPetName;
let playerSiSelecionaste;
let pcSiSelecionaste;
let playerAttack;
let playerAttackName;
let pcAttack;
let pcAttackName;
var attackPlayerText;
var attackPCText;
var vicOderText;
var pcPetText;
var playerPetText;
var winsPlayer = 0;
var winsPC = 0;
var quienGano;
//#endregion
//#region events
fireButtonAttack.addEventListener("click",buttonFireAttack);
waterButtonAttack.addEventListener("click",buttonWaterAttack);
earthButtonAttack.addEventListener("click",buttonEarthAttack);
//#endregion
//#region importantExtra
function aleatorio(min,max)
{
return Math.floor(Math.random() * (max - min + 1) + min );
}
function startGame()
{
petButton.addEventListener("click",playerSelectPet);
}
function drawText(messageText)
{
var newMessage = document.createElement("p");
labelP.appendChild(newMessage);
newMessage.innerHTML = messageText;
}
//#endregion
//#region player
function playerSelectPet()
{
if (hipodogeId.checked == true)
{
playerSiSelecionaste = "has seleccionado a: ";
playerPetName = " Hipodoge ";
petToThePlayer.innerHTML = playerPetName + "";
}
else if (capipepoId.checked == true)
{
playerSiSelecionaste = "has seleccionado a: ";
playerPetName = " Capipepo ";
petToThePlayer.innerHTML = playerPetName + "";
}
else if (ratigueyaId.checked == true)
{
playerSiSelecionaste = "has seleccionado a: ";
playerPetName = " Ratigueya ";
petToThePlayer.innerHTML = playerPetName + "";
}
else if (langostelvisId.checked == true)
{
playerSiSelecionaste = "has seleccionado a: ";
playerPetName = " Langostelvis ";
petToThePlayer.innerHTML = playerPetName + "";
}
else if (tucapalmaId.checked == true)
{
playerSiSelecionaste = "has seleccionado a: ";
playerPetName = " Tucapalma ";
petToThePlayer.innerHTML = playerPetName + "";
}
else if (pydosId.checked == true)
{
playerSiSelecionaste = "has seleccionado a: ";
playerPetName = " Pydos ";
petToThePlayer.innerHTML = playerPetName + "";
}
else
{
playerSiSelecionaste = "";
playerPetName = "no has seleccionado ningun mokepon";
petToThePlayer.innerHTML = "";
}
playerPetText = playerSiSelecionaste + playerPetName;
drawText(playerPetText);
attackPlayerText = "el ataque de tu mascota " + playerPetName + " es de " + playerAttackName;
vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
pcSelectPet();
}
function buttonFireAttack()
{
playerAttack = 0;
playerAttackName = "FUEGO";
attackPlayerText = "el ataque de tu mascota " + playerPetName + " es de " + playerAttackName;
drawText(attackPlayerText);
vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
pcSelectAttack();
}
function buttonWaterAttack()
{
playerAttack = 1;
playerAttackName = "AGUA";
attackPlayerText = "el ataque de tu mascota " + playerPetName + " es de " + playerAttackName;
drawText(attackPlayerText);
vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
pcSelectAttack();
}
function buttonEarthAttack()
{
playerAttack = 2;
playerAttackName = "TIERRA";
attackPlayerText = "el ataque de tu mascota " + playerPetName + " es de " + playerAttackName;
drawText(attackPlayerText);
vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
pcSelectAttack();
}
//#endregion
//#region pc
function pcSelectPet()
{
let resultadoAleatorio = aleatorio(1,6);
if (resultadoAleatorio == 1)
{
pcSiSelecionaste = " tu oponente ha seleccionado a: ";
pcPetName = " Hipodoge ";
petToEnemy.innerHTML = pcPetName + "";
}
else if (resultadoAleatorio == 2)
{
pcSiSelecionaste = " tu oponente ha seleccionado a: ";
pcPetName = " Capipepo ";
petToEnemy.innerHTML = pcPetName + "";
}
else if (resultadoAleatorio == 3)
{
pcSiSelecionaste = " tu oponente ha seleccionado a: ";
pcPetName = " Ratigueya ";
petToEnemy.innerHTML = pcPetName + "";
}
else if (resultadoAleatorio == 4)
{
pcSiSelecionaste = " tu oponente ha seleccionado a: ";
pcPetName = " Langostelvis ";
petToEnemy.innerHTML = pcPetName + "";
}
else if (resultadoAleatorio == 5)
{
pcSiSelecionaste = " tu oponente ha seleccionado a: ";
pcPetName = " Tucapalma ";
petToEnemy.innerHTML = pcPetName + "";
}
else if (resultadoAleatorio == 6)
{
pcSiSelecionaste = " tu oponente ha seleccionado a: ";
pcPetName = " Pydos ";
petToEnemy.innerHTML = pcPetName + "";
}
pcPetText = pcSiSelecionaste + pcPetName;
drawText(pcPetText);
attackPCText = "el ataque de la mascota enemiga " + pcPetName + " es de " + pcAttackName;
vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
}
function pcSelectAttack()
{
let resultadoAleatorio = aleatorio(1,3);
if (resultadoAleatorio == 1)
{
pcAttack = 0;
pcAttackName = "FUEGO";
}
else if (resultadoAleatorio == 2)
{
pcAttack = 1;
pcAttackName = "AGUA";
}
else
{
pcAttack = 2;
pcAttackName = "TIERRA";
}
attackPCText = "el ataque de la mascota enemiga " + pcPetName + " es de " + pcAttackName;
vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
drawText(attackPCText);
battle();
}
//#endregion
function battle()
{
//while(winsPlayer < 3 || winsPC < 3)
//{
if (playerAttack == pcAttack)
{
winsPlayer = winsPlayer;
winsPC = winsPC;
quienGano = " EMPATE ";
vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
drawText(vicOderText);
}
else
{
if (playerAttack == 0 && pcAttack == 2)
{
winsPlayer += 1;
quienGano = " GANASTE ";
vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
drawText(vicOderText);
}
else if (playerAttack == 1 && pcAttack == 0)
{
winsPlayer += 1;
quienGano = " GANASTE ";
vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
drawText(vicOderText);
}
else if (playerAttack == 2 && pcAttack == 1)
{
winsPlayer += 1;
quienGano = " GANASTE ";
vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
drawText(vicOderText);
}
else
{
winsPC += 1;
quienGano = " PERDISTE ";
vicOderText = playerPetName + winsPlayer + " - " + winsPC + pcPetName + quienGano;
drawText(vicOderText);
}
}
Mi solucion fue crear una nueva variable al inicio llamada “combatPlay”
let attackPlayer
let attackEnemy
let combatPlay
Y luego a la funcion del combate, sustitui las alertas por la variable creada. Por ultimo hice una concatenacion con el resultado
function combat() {
if(attackPlayer == attackEnemy) {
combatPlay = "Empate"
} else if(attackPlayer == "Fuegardo" && attackEnemy == "Hierbajo") {
combatPlay = "Ganaste"
} else if(attackPlayer == "Aguado" && attackEnemy == "Fuegardo") {
combatPlay = "Ganaste"
} else if(attackPlayer == "Hierbajo" && attackEnemy == "Aguado") {
combatPlay = "Ganaste"
} else {
combatPlay = "Perdiste"
}
Textcombat()
}
function Textcombat() {
let sectionMensajes=document.getElementById("mensajes")
let parrafo=document.createElement("p")
parrafo.innerHTML="Tu pet ataco con " + attackPlayer + ", la pet del enemigo ataco con " + attackEnemy + " " + combatPlay
sectionMensajes.appendChild(parrafo)
lo estoy logrando
Otra forma de concatenar con comillas invertidas
parrafo.innerHTML = `Tu mascota ataco con ${ataqueJugador} , la mascota del enemigo ataco con ${ataqueEnemigo} - ${resultado}🎉`
function combate(pc, jugador) {
//combate
if (ataquePC == ataqueJug) {
mensaje = “Empate”
} else if (ataqueJug == “FUEGO” && ataquePC == “TIERRA”) {
mensaje = “Ganaste”
} else if (ataqueJug == “AGUA” && ataquePC == “FUEGO”) {
mensaje = “Ganaste”
} else if (ataqueJug == “TIERRA” && ataquePC == “AGUA”) {
mensaje = “Ganaste”
} else {
mensaje = “Perdiste”
}
setMensage(mensaje)
}
function setMensage(mensajeRes) {
let sectionMessage = document.getElementById(‘mensajes’)
let parrafo = document.createElement(‘p’)
parrafo.innerHTML = "tu mascota ataco con " + ataqueJug + ", la mascota del PC ataco con " + ataquePC + " " + mensajeRes
sectionMessage.appendChild(parrafo)
}
DEJO MI SOLUCION DE COMO PONER EL RESULTADO!!! 😁
Así lo llevo al momento, lo iré personalizando con el transcurso del curso le quiero poner mas poderes según sus personajes y animaciones.
Aui mi aporte con ataques combinados:
//CLAVE PARA GANAR:
//AGUA le gana al FUEGO
//TIERRA le gana al AGUA
//FUEGO le gana a la TIERRA
//variables de vidas
let vidasJugador1 = 3
let vidasJugador2 = 3
// Función para saber quién gana
function compararAtaques(ataqueElegidoJugador1, ataqueElegidoJugador2) {
let spanVidasJugador1 = document.getElementById('vidas-jugador1')
let spanVidasJugador2 = document.getElementById('vidas-jugador2')
if (vidasJugador1 > 0 && vidasJugador2 > 0) {
// let spanVidasJugador1 = document.getElementById('vidas-jugador1')
// let spanVidasJugador2 = document.getElementById('vidas-jugador2')
//Cuando el jugador gana
if((ataqueElegidoJugador1 == "AGUA" && ataqueElegidoJugador2 == "FUEGO")
|| (ataqueElegidoJugador1 == "TIERRA" && ataqueElegidoJugador2 == "AGUA")
|| (ataqueElegidoJugador1 == "FUEGO" && ataqueElegidoJugador2 == "TIERRA")) {
vidasJugador2 = vidasJugador2 - 1
spanVidasJugador2.innerHTML = vidasJugador2.toFixed(1)
if (vidasJugador2 < 0) {
spanVidasJugador2.innerHTML = vidasJugador2 - vidasJugador2
}
console.log("JUADOR1 GANÓ",vidasJugador1, vidasJugador2)
//Cuando el jugador empata
} else if(ataqueJugador1 == ataqueJugador2) {
vidasJugador1 = vidasJugador1 - 0.5
spanVidasJugador1.innerHTML = vidasJugador1.toFixed(1)
vidasJugador2 = vidasJugador2 - 0.5
spanVidasJugador2.innerHTML = vidasJugador2.toFixed(1)
if (vidasJugador1 < 0 || vidasJugador2 < 0) {
spanVidasJugador1.innerHTML = vidasJugador1 - vidasJugador1
spanVidasJugador2.innerHTML = vidasJugador2 - vidasJugador2
}
console.log("EMPATARON", vidasJugador1, vidasJugador2)
//Cuando el jugador pierde
} else {
vidasJugador1 = vidasJugador1 - 1
spanVidasJugador1.innerHTML = vidasJugador1.toFixed(1)
if (vidasJugador1 < 0) {
spanVidasJugador1.innerHTML = vidasJugador1 - vidasJugador1
}
console.log("JUGADOR1 PERDIÓ", vidasJugador1, vidasJugador2)
}
} else if (vidasJugador1 < 0 || vidasJugador2 < 0) {
spanVidasJugador1.innerHTML = vidasJugador1 - vidasJugador1
spanVidasJugador2.innerHTML = vidasJugador2 - vidasJugador2
}
}
Yo lo resolví un poco diferente, pero funciona igual. Acá les comparto mi aporte (sólo puse las funciones implicadas):
let resultado //creo una variable global vacía
function ataqueAleatorioEnemigo() {
ataqueAleatorio = aleatorio(1, 3)
if (ataqueAleatorio == 1) {
ataqueEnemigo = 'FUEGO'
}
else if (ataqueAleatorio == 2) {
ataqueEnemigo = 'AGUA'
}
else {
ataqueEnemigo = 'TIERRA'
}
combate()
//agrego acá la función combate para que modifique la variable resultado
crearMensaje()
}
function ataqueAleatorioEnemigo() {
ataqueAleatorio = aleatorio(1, 3)
if (ataqueAleatorio == 1) {
ataqueEnemigo = 'FUEGO'
}
else if (ataqueAleatorio == 2) {
ataqueEnemigo = 'AGUA'
}
else {
ataqueEnemigo = 'TIERRA'
}
combate()
//agrego acá la función combate para que modifique la variable resultado
crearMensaje()
}
function crearMensaje() {
//condicional para obligar a usuario a elegir primero un mokepon
if(mascotaSeleccionada) {
let seccionMensaje = document.getElementById('mensajes')
let parrafo = document.createElement("p")
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ', la mascota del enemigo atacó con ' + ataqueEnemigo + ' - ' + resultado
seccionMensaje.appendChild(parrafo)
} else {
alert('Selecciona primero un Mokepon')
}
}
function combate() {
if(ataqueJugador == ataqueEnemigo){
resultado = 'EMPATE'
} else if(ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA' || ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO' || ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA'){
resultado = 'GANASTE! 🎉'
}
else{
resultado = 'PERDISTE 😔'
}
}
logré hacerlo antes de que Juan David Castro lo hiciera… Mi lógica funcionó 😊😊🙋♂️
Ahora con la logica que llevamos solo debemos mostrar por medio de un mensaje al usuario si ganó, empató o perdió
Para ello se implementará un código similar al del juego de piedra papel o tijera para poder definir el estado del jugador
function combate(){
let estado;
if (ataqueJugador == ataqueEnemigo) {
estado = "EMPATE";
}else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA") {
estado = "GANASTE";
}else if(ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO" ){
estado = "GANASTE";
}else if(ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
estado = "GANASTE";
}else{
estado = "PERDISTE";
}
crearMensaje(estado);
}
Con esto ya estamos del otro lado
Mi solución fue crear una variable global “resultadoCombate”, usé la misma logica para el combate y al final en el mensaje concatené la variable “resultadoCombate”
function combate(){
if (ataqueJugador=="FUEGO" && ataqueEnemigo=="TIERRA" || ataqueJugador=="TIERRA" && ataqueEnemigo=="AGUA" || ataqueJugador=="AGUA" && ataqueEnemigo=="FUEGO"){
resultadoCombate = "Ganaste!! 🎉"
} else if(ataqueJugador==ataqueEnemigo){
resultadoCombate = "Empate"
} else {
resultadoCombate= "Perdiste!!"
}
}
Les comparto mi código
function combate(){
if ( ataqueJugador == ataqueEnemigo ){
crearMensaje("𝐄𝐌𝐏𝐀𝐓𝐄");
}
else if( (ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA') ||
( ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO') ||
( ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA')){
crearMensaje("✧ 𝐆𝐀𝐍𝐀𝐒𝐓𝐄 ✧");
}
else{
crearMensaje(" ☠ 𝐏𝐄𝐑𝐃𝐈𝐒𝐓𝐄 ☠ ");
}
}
function crearMensaje(resultado){
let section_mensaje = document.getElementById('mensajes');
let parrafo = document.createElement('p');
parrafo.innerHTML = "Tu mascota atacó con " + ataqueJugador + ", la mascota del enemigo atacó con " + ataqueEnemigo + " ⇢" + resultado;
section_mensaje.appendChild(parrafo);
}
el fuego le gana a la planta pero no a la tierra, la tierra le gana al fuego. buen video profe !
Que emocion ver que todo funciona.
Yo no creé ninguna función nueva. yo solo hice lo siguiente:
<code>
function crearMensaje() {
let seccionMensajes = document.getElementById('Mensajes')
let parrafo = document.createElement('p')
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ', la mascota del enemigo atacó con ' + ataqueEnemigo
if(ataqueJugador == ataqueEnemigo) {
parrafo.innerHTML += ' - EMPATE 🫥'
} else if((ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA") || (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO") || (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA")) {
parrafo.innerHTML += ' - GANASTE 🎉'
} else {
parrafo.innerHTML += ' - PERDISTE 😞'
}
seccionMensajes.appendChild(parrafo)
}
Solo con unas pocas condiciones y aritmética de strings básica ubicadas antes del appendChild se junta todo. y en caso de que fuese difícil de entender con simples comentarios se aclara el contexto =)
En mi caso lo resolvi de la siguiente manera, aplicando lo aprendido hasta aqui
asi solucione del ataque
Amigos! Después de dos horas escribiendo y borrando puede hacer que me funcionara el juego 😄
![](url )
![](url )
mi codigo varió un poco, porque puse una variable global llamada “resultado”, así poder usarla cuando la necesite
let ataqueJugador
let ataqueEnemigo
let resultado
function iniciarJuego (){
let botonMascotaJuagador = document.getElementById('boton-mascota')
let botonFuego = document.getElementById('boton-fuego')
let botonAgua = document.getElementById('boton-agua')
let botonTierra = document.getElementById('boton-tierra')
botonMascotaJuagador.addEventListener('click', seleccionarMascotaJugador)
botonFuego.addEventListener('click', ataqueFuego)
botonAgua.addEventListener('click', ataqueAgua)
botonTierra.addEventListener('click', ataqueTierra)
}
function seleccionarMascotaJugador(){
let inputhipodoge = document.getElementById('hipodoge')
let inputcapipepo = document.getElementById('capipepo')
let inputratigueya = document.getElementById('ratigueya')
let inputlangostelvis = document.getElementById('langostelvis')
let inputtucapalma = document.getElementById('tucapalma')
let inputpydos = document.getElementById('pydos')
let spanMascotaJugador = document.getElementById('mascota-jugador')
if (inputhipodoge.checked) {
spanMascotaJugador.innerHTML = 'Hipodoge'
//alert("has seleccionado Hipodoge")
} else if (inputcapipepo.checked) {
spanMascotaJugador.innerHTML = 'Capipepo'
//alert("has seleccionado Capipepo")
} else if (inputratigueya.checked) {
spanMascotaJugador.innerHTML = 'Ratigueya'
//alert("has seleccionado Ratigueya")
} else if (inputlangostelvis.checked) {
spanMascotaJugador.innerHTML = 'Langostelvis'
//alert("has seleccionado Langostelvis")
} else if (inputtucapalma.checked) {
spanMascotaJugador.innerHTML = 'Tucapalma'
//alert("has seleccionado Tucapalma")
} else if (inputpydos.checked) {
spanMascotaJugador.innerHTML = 'Pyros'
//alert("has seleccionado Pyros")
} else {
alert ("debes seleccionar un mokepon")
}
seleccionarMascotaEnemiga()
}
function seleccionarMascotaEnemiga(){
let mascotaAleatoria = aleatorio(1,6)
let spanMascotaEnemiga = document.getElementById('mascota-enemiga')
if (mascotaAleatoria == 1) {
spanMascotaEnemiga.innerHTML = 'Hipodoge'
} else if (mascotaAleatoria == 2) {
spanMascotaEnemiga.innerHTML = 'Capipepo'
} else if (mascotaAleatoria == 3) {
spanMascotaEnemiga.innerHTML = 'Ratigueya'
} else if (mascotaAleatoria == 4) {
spanMascotaEnemiga.innerHTML = 'Langostelvis'
} else if (mascotaAleatoria == 5) {
spanMascotaEnemiga.innerHTML = 'Tucapalma'
} else {
spanMascotaEnemiga.innerHTML = 'Pyros'
}
}
function ataqueFuego () {
ataqueJugador = 'FUEGO'
ataqueAleatorioEnemigo ()
}
function ataqueAgua () {
ataqueJugador = 'AGUA'
ataqueAleatorioEnemigo ()
}
function ataqueTierra () {
ataqueJugador = 'TIERRA'
ataqueAleatorioEnemigo ()
}
function ataqueAleatorioEnemigo () {
let ataqueAleatorio = aleatorio(1,3)
if (ataqueAleatorio == 1) {
ataqueEnemigo = 'FUEGO'
} else if (ataqueAleatorio == 2) {
ataqueEnemigo = 'AGUA'
} else {
ataqueEnemigo = 'TIERRA'
}
combate ()
crearMensaje ()
}
function crearMensaje () {
let seccionMensajes = document.getElementById ('mensajes')
let parrafo = document.createElement ('p')
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ' , la mascota enemiga atacó con ' + ataqueEnemigo + ", " + resultado
seccionMensajes.appendChild (parrafo)
}
function combate () {
if ( ataqueJugador == ataqueEnemigo) {
resultado = 'EMPATE'
} else if (ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA') {
resultado = 'GANASTE'
}else if (ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO') {
resultado = 'GANASTE'
}else if (ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA') {
resultado = 'GANASTE'
} else{
resultado = 'PERDISTE'
}
}
function aleatorio(min, max){
return Math.floor(Math.random() * (max - min + 1) + min)
}
Use una variable global llamada v_resultado donde guardaba el resultado de la batalla y de hay concatenaba el texto en el parrafo creado
Logré hacerlo creando una nueva variable global (resultado), y cree una función (batalla) similar al piedra, papel, tijera, donde resultado era EMPATE, GANASTE o PERDISTE, luego llame a la nueva función antes antes de la función crearMensaje.
let ataqueJugador
let ataqueEnemigo
let resultado
function iniciarJuego () {
let botonMascotaJugador = document.getElementById('boton-mascota')
botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
let botonFuego = document.getElementById('boton-fuego')
botonFuego.addEventListener('click', ataqueFuego)
let botonAgua = document.getElementById('boton-agua')
botonAgua.addEventListener('click', ataqueAgua)
let botonTierra = document.getElementById('boton-tierra')
botonTierra.addEventListener('click', ataqueTierra)
}
function seleccionarMascotaJugador () {
let hipogue = document.getElementById('hipodoge').checked
let capipepo = document.getElementById('capipepo').checked
let ratigueya = document.getElementById('ratigueya').checked
let spamJugador = document.getElementById('mascota-jugador')
if (hipogue == true) {
spamJugador.innerHTML = 'Hipodogue'
} else if (capipepo == true) {
spamJugador.innerHTML = 'Capipepo'
} else if (ratigueya == true) {
spamJugador.innerHTML = 'Ratigueya'
} else {
alert ("Seleciona a una mascota")
}
seleccionarMascotaEnemigo ()
}
function aleatorio (min, max){
return Math.floor(Math.random()*(max - min +1) + min)
}
function seleccionarMascotaEnemigo () {
let mascotaAleatorio = aleatorio (1, 3)
let spamEnemigo = document.getElementById('mascota-enemigo')
if ( mascotaAleatorio == 1){
spamEnemigo.innerHTML = 'Hipodogue'
} else if (mascotaAleatorio == 2){
spamEnemigo.innerHTML = 'Capipepo'
} else {
spamEnemigo.innerHTML = 'Ratigueya'
}
}
function ataqueFuego () {
ataqueJugador = "FUEGO"
ataqueAleatorioEnemigo ()
}
function ataqueAgua () {
ataqueJugador = "AGUA"
ataqueAleatorioEnemigo ()
}
function ataqueTierra () {
ataqueJugador = "TIERRA"
ataqueAleatorioEnemigo ()
}
function ataqueAleatorioEnemigo (){
let numAleatorio = aleatorio(1, 3)
if ( numAleatorio == 1){
ataqueEnemigo = "FUEGO"
} else if ( numAleatorio == 2){
ataqueEnemigo = "AGUA"
} else if ( numAleatorio == 3){
ataqueEnemigo = "TIERRA"
}
batalla ()
crearMensaje ()
}
function batalla (){
if (ataqueJugador == ataqueEnemigo){
resultado = "EMPATE"
} else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA"){
resultado = "GANASTE"
} else if (ataqueJugador == "AGURA" && ataqueEnemigo == "FUEGO"){
resultado = "GANASTE"
} else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
resultado = "GANASTE"
} else {
resultado = "PERDISTE"
}
}
function crearMensaje () {
let seccionMensajes= document.getElementById('mensajes')
let parrafo = document.createElement('p')
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ', la mascota del enemigo atacó con ' + ataqueEnemigo + " " + resultado
seccionMensajes.appendChild(parrafo)
}
window.addEventListener('load',iniciarJuego)
Hola gente…
Lo que hice fue, crear una variable global y en la función combate asignarle a la variable el valor de “empate”, “ganaste” o “perdiste” y después solo concatenarla en la función crear mensaje.
El resultado del combate lo resolví creado secciones y dejándole el display apagado y según la validación, mostré la sección de mensaje que dice que gane, perdí o empate
Yo declare una nueva variable global llamada “resultado” que utilice en la función “combate()” para asignarle los siguientes valores:
" - EMPATE."
" - GANASTE. “
” - PERDISTE."
Dependiendo de el resultado de las comparaciones. Dentro de la función “combate” mande llamar la función “crearMensaje(resultado)” pasando le como parámetro la variable “resultado”.
function crearMensaje(resultado){
let sctMensajes = document.getElementById("mensajes");
let parrafo = document.createElement("p");
parrafo.innerHTML = "Tu mascota atacó con " + ataqueJugador + ", la mascota del enemigo atacó con " + ataqueEnemigo + " " + resultado;
sctMensajes.appendChild(parrafo);
}
function combate(){
if(ataqueJugador == ataqueEnemigo){
resultado = " - EMPATE."
} else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA"){
resultado = " - GANASTE. 🏆"
} else if (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO"){
resultado = " - GANASTE. 🏆"
} else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
resultado = " - GANASTE. 🏆"
} else {
resultado = " - PERDISTE. 😕"
}
crearMensaje(resultado);
}
**Logré el mismo resultado con una variación. **
En vez de usar resultado como un parámetro, lo dejé como una variable para if, y dejé hasta el final la función de crear mensaje, ya que cualquier opción que elijan se convertirá en un mensaje! Alguien más lo hizo así o saben las complicaciones que puede tener a futuro hacerlo de esta manera?
function combate() {
if(ataqueJugador == ataqueEnemigo) {
resultadoCombate = "EMPATE"
} else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA") {
resultadoCombate = "VICTORIA"
} else if (ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO") {
resultadoCombate = "VICTORIA"
} else if (ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA") {
resultadoCombate = "VICTORIA"
} else {
resultadoCombate = "DERROTA"
}
crearMensaje()
}
Hice unos textos para hacerles saber a los jugadores cuales son los PROS y CONTRAS de los poderes
function combate() {
let resultadoAtaque
if ( ataqueEnemigo == ataqueJugador ) {
alert( "¡EMPATE! 🤼" )
resultadoAtaque = 'EMPATE'
}
else if ((ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA') || ( ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO' ) || ( ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA' )){
alert( "¡GANASTE! 🥳" )
resultadoAtaque = 'GANASTE'
}
else {
alert( "PERDISTE... 😢" )
resultadoAtaque = 'PERDISTE'
}
crearMensaje(resultadoAtaque)
}
function crearMensaje(resultadoAtaque) {
let sectionMensajes = document.getElementById('mensajes')
let parrafo = document.createElement('p')
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ' la mascota del enemigo atacó con ' + ataqueEnemigo + ' - ' + resultadoAtaque
sectionMensajes.appendChild(parrafo)
}
Una alternativa mas básica supongo… no entendí lo de la variable resultado dentro de los paréntesis de la función :S
let ataqueJugador
let ataqueEnemigo
let resultadoCombate
function iniciarJuego(){
//boton Seleccionar Mascota
let botonMascotaJugador = document.getElementById('boton-mascota')
botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
//Botones de Ataque
let botonFuego = document.getElementById('boton-fuego')
botonFuego.addEventListener('click', ataqueFuego)
let botonAgua = document.getElementById('boton-agua')
botonAgua.addEventListener('click', ataqueAgua)
let botonTierra = document.getElementById('boton-tierra')
botonTierra.addEventListener('click', ataqueTierra)
}
function seleccionarMascotaJugador(){
let inputHipodoge = document.getElementById('hipodoge')
let inputCapipepo = document.getElementById('capipepo')
let inputRatigueya = document.getElementById('ratigueya')
let spanMascotaJugador = document.getElementById('mascota-jugador')
if (inputHipodoge.checked) {
spanMascotaJugador.innerHTML = 'Hipodoge'
} else if (inputCapipepo.checked){
spanMascotaJugador.innerHTML = 'Capipepo'
} else if (inputRatigueya.checked){
spanMascotaJugador.innerHTML = 'Ratigueya'
} else {
alert("Selecciona una de las mascotas disponibles")
}
seleccionarMascotaEnemigo()
}
function seleccionarMascotaEnemigo(){
let mascotaEnemigo = aleatorio(1,3)
let spanMascotaJugador = document.getElementById('mascota-enemigo')
if (mascotaEnemigo == 1) {
spanMascotaJugador.innerHTML = "Hipodoge"
} else if (mascotaEnemigo == 2) {
spanMascotaJugador.innerHTML = "Capipepo"
} else {
spanMascotaJugador.innerHTML = "Ratigueya"
}
}
function crearMensaje() {
let sectionMensajes = document.getElementById('mensajes')
let parrafo = document.createElement('p')
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ', la mascota del enemigo atacó con ' + ataqueEnemigo + '. ' + resultadoCombate
sectionMensajes.appendChild(parrafo)
}
function aleatorio(min, max) {
return Math.floor(Math.random() * max - min + 1) + min
}
function ataqueFuego(){
ataqueJugador='FUEGO'
ataqueAleatorioEnemigo()
}
function ataqueAgua(){
ataqueJugador='AGUA'
ataqueAleatorioEnemigo()
}
function ataqueTierra(){
ataqueJugador='TIERRA'
ataqueAleatorioEnemigo()
}
function ataqueAleatorioEnemigo(){
ataqueEnemigo = aleatorio(1,3)
// 1 es Fuego // 2 es Agua // 3 es Tierra
if (ataqueEnemigo == 1){
ataqueEnemigo = 'FUEGO'
} else if (ataqueEnemigo == 2){
ataqueEnemigo = 'AGUA'
} else {
ataqueEnemigo = 'TIERRA'
}
combate()
}
function combate(){
if (ataqueJugador == ataqueEnemigo){
resultadoCombate = 'EMPATE!'
} else if(ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA'
|| ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO'
|| ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA') {
resultadoCombate = 'GANASTE!'
} else {
resultadoCombate = 'PERDISTE!'
}
crearMensaje()
}
window.addEventListener('load', iniciarJuego)```
Mi logica para resolverlo fue un poco diferente, yo primero cree una variable general llamada “resultadoCombate”;
let resultadoCombate
luego creé una función llamada “combate” en la que puse todos los condicionales
function combate () {
if (ataqueJugador == ataqueEnemigo) {
resultadoCombate = '¡Empate!😑'
} else if (ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA') {
resultadoCombate = '¡GANASTE!🥳'
} else if (ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO') {
resultadoCombate = '¡GANASTE!🥳'
} else if (ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA') {
resultadoCombate = '¡GANASTE!🥳'
} else {
resultadoCombate = '¡PERDISTE!😩'
}
luego modifique el parrafo creado en la función “crearMensaje”, en la parte final del parrafo para que en el innerHTML se mostrará la variable “ResultadoCombate”
parrafo.innerHTML = 'Tu mascota uso '+ ataqueJugador + ', tu oponente uso ' + ataqueEnemigo + '- ' + resultadoCombate
y por ultimo llame a la función “combate” justo antes de llamar a la función “crearMensaje” que esta dentro de la función “ataqueAleatorioEnemigo”
function ataqueAleatorioEnemigo () {
let ataqueAleatorio = aleatorio (1,3)
if (ataqueAleatorio == 1) {
ataqueEnemigo = "FUEGO"
} else if (ataqueAleatorio == 2) {
ataqueEnemigo = "AGUA"
} else {
ataqueEnemigo = "TIERRA"
}
combate ()
crearMensaje ()
}
Este código es de ejemplo ya que mi juego cuenta con otras reglas, ataque y personajes, espero que les sirva para expandir ideas
para solucionar el problema de mostrar en el mensaje el resultado de la batalla declare una variable global llamada result en la cual guarde el resultado del combate y luego concatene con el mensaje a mostrar
no se si ya alguien comento de este comando, pero para cambiar la misma palabra al tiempo, puedes sombrearla y con control + D te permite seleccionar todas las palabras que necesites.
Comparto mi solucion:
let combateResultado = '';
function combate() {
if(ataqueJugador == ataqueEnemigo) {
combateResultado = 'Empataste!';
} else if (ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA' || ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO' || ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA') {
combateResultado = 'Ganaste!';
} else {
combateResultado = 'Perdiste!';
}
}
estas equibocado en algo ya que en pokemon el tipo tierra es debil al agua y eficas contra el fuego y ademas en la vida real susede lo mismo, se puede apagar el fuego con la tierra y la tierra se desase cuando hay una cantidad considerable de agua.
corige eso mi bro
yo en vez de appendChild, innerHTML y createElement, he usado insertAdjacentHTML. Este método inserta y crea, a la vez, un elemento HTML. Además de que he podido añadir etiquetas: <br> y <strong>
//html: <section><p id="mensajes"></p></section>
function crearMensaje(resultado) {
let elMensaje = document.getElementById("mensajes")
elMensaje.insertAdjacentHTML('afterbegin', "Tu monttil atacó con " + ataqueJugador + ", el monttil de tu enemigo atacó con " + ataqueEnemigo + '<br/><strong>' + resultado, ' </strong>')
}
yo solo quiero expresar mi humilde opinion. La TIERRA no le gana al AGUA 😦
yo lo resolví así, con una variable global y funciona bien!
Yo en vez de crear un sistema de 3 vidas como el de la clase de piedra, papel y tijera, cree un sistema de puntos de vida que las mascotas van perdiendo hasta llegar a 0 y cada ataque representa una cantidad de daño(mas parecido al sistema de peleas de pokemon)
lo hice aplicando los conocimientos que han mostrado en las clases, estoooy 100% seguro que abra una manera de ejecutar las mismas acciones con un codigo mas limpio y compacto pero de momento desconozco cual pueda ser esa solucion, pero me siento muy contento por que desde que empezo la clase no quise simplemente copiar y pegar, quise ir tomando esos conocimientos que muestran en la clase y tratar de utilizarlos para plasmar una idea que me surgiera en la mente y siento que eso es el principio de ser progamador.
así hice mi código
let resultado
function resultadoCombate(){
if (ataqueJugador == ataqueEnemigo){
resultado = "EMPATE"
}else if (ataqueJugador == "FUEGO" && ataqueEnemigo == "AGUA" || ataqueJugador == "AGUA" && ataqueEnemigo == "TIERRA" || ataqueJugador == "TIERRA" && ataqueEnemigo == "FUEGO" ){
resultado = "🎉GANASTE"
}else {
resultado = "😢PERDISTE"
}
return resultado
}
Lo que hice fue en donde se envía el mensaje poner las condicionales y si se gano perdió o empato es una misma variable que es mostrada en mensaje, se llama win
Lo resolví de esta manera:
let resultadoCombate
function ataqueAleatorioEnemigo(){
let ataqueAleatorio = aleatorio(1, 3)
if (ataqueAleatorio == 1){
ataqueEnemigo = "FUEGO"
} else if(ataqueAleatorio == 2){
ataqueEnemigo = "AGUA"
} else {
ataqueEnemigo = "TIERRA"
}
batalla()
crearMensaje()
}
function batalla(){
if(ataqueJugador == ataqueEnemigo){
resultadoCombate = "EMPATE"
} else if(ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA" || ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO" || ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
resultadoCombate = "GANASTE"
} else {
resultadoCombate = "PERDISTE"
}
}
function crearMensaje(){
let sectionMensajes = document.getElementById("mensajes")// esto lo creé luego que lo que está abajo, para usarlo con appendchild y mostrar el mensaje el el párrafo
let parrafo = document.createElement("p")//con este elemento podemos cambiar un parrafo en html
parrafo.innerHTML = "Tu mascota atacó con " + ataqueJugador + ", la mascota del enemigo atacó con " + ataqueEnemigo + " - " + resultadoCombate
sectionMensajes.appendChild(parrafo)
}
me parece mejor colocar en global el (resultado de batalla) para ver el tema de las vidas.
function combate() {
if(ataqueEnemigo == ataqueJugador){
resultadoBatalla = "EMPATE"
} else if(ataqueJugador == "Fuego" && ataqueEnemigo == "Agua"){
resultadoBatalla = "GANASTE"
} else if(ataqueJugador == "Agua" && ataqueEnemigo == "Fuego"){
resultadoBatalla = "GANASTE"
} else if(ataqueJugador == "Tierra" && ataqueEnemigo == "Agua"){
resultadoBatalla = "GANASTE"
} else {
resultadoBatalla = "PERDISTE"
}
crearMensaje()
}
Este brother se rifa bien duro ¡felicidades! 🙌🏻
Yo cree otra funcion dentro de la funcion combate (game) para que mostrara un resultado aleatorio en caso de que el elmento que elegi se enfrente a otro elemento al cual no tengo determinado si gana o no.
function game () {
function randomResult () {
let randomResolution = random (1,2)
if (randomResolution == 1) {
return 'You win!'
} else {
return 'You lose!'
}
}
if (pcMove == playerMove) {
popUp('Draw')
} else if (playerMove == 'WIND' && pcMove == 'WATER') {
popUp('You win!')
} else if (playerMove == 'WATER' && pcMove == 'FIRE') {
popUp('You win!')
} else if (playerMove == 'EARTH' && pcMove == 'WIND') {
popUp('You win!')
} else if (playerMove == 'FIRE' && pcMove == 'EARTH') {
popUp('You win!')
} else {
popUp(randomResult())
}
}
yo declare una variable global let resultadoCombate; y asigne el valor para cada caso y el mensaje se lo añadi por medio de la variable
Primero cree una variable global y la llame:
let resultadoAtaque
Luego cambie cada alert por esta funcion.
function combate(){
if(ataqueEnemigo == ataqueJugador) {
} else if(ataqueJugador == "FUEGO" && ataqueEnemigo == "TIERRA"){
resultadoAtaque = "GANASTE"
crearMensaje()
} else if(ataqueJugador == "AGUA" && ataqueEnemigo == "FUEGO"){
resultadoAtaque = "GANASTE"
crearMensaje()
} else if(ataqueJugador == "TIERRA" && ataqueEnemigo == "AGUA"){
resultadoAtaque = "GANASTE"
crearMensaje()
}
else {
resultadoAtaque = "PERDISTE"
crearMensaje()
}
Y la concatene en la funcion crear mensaje,
function crearMensaje(){
let sectionMensajes = document.getElementById("mensajes")
let parrafo = document.createElement("p")
parrafo.innerHTML = "Tu mascota ataco con " + ataqueJugador + ", la mascota del enemigo ataco con " + ataqueEnemigo + " >>>> " + resultadoAtaque
sectionMensajes.appendChild(parrafo)
}
En mi intento de resolver solo (No me funcionó xD), lo hice así:
function combate(){
if(ataqueEnemigo == ataqueJugador){
crearMensaje('EMPATE')
} else if(ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA'){
crearMensaje('GANASTE')
} else if(ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO'){
crearMensaje('GANASTE')
} else if(ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA'){
crearMensaje('GANASTE')
} else {
crearMensaje('PERDISTE')
}
}
function crearMensaje(){
let sectionMensajes = document.getElementById('mensajes')
let parrafo = document.createElement('p')
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ' la mascota del enemigo atacó con ' + ataqueEnemigo +' = ' + combate
sectionMensajes.appendChild(parrafo)```
un comando importante para cambiar todo de una sola vez en vez de hacerlo uno por uno es Ctrl + D y darle a la D las veces que necesitas cambiar y listo, borras y escribes y es mas practico.
Mi solución fue crear una variable global llamada resultadoCombate y esta variable cambiaba en la función combate() según la lógica, luego mandaba a llamar a función crearMensaje y le concatenaba la variable resultadoCombate
let roundResult
function combat() {
if (playerAttack == rivalAttack) {
roundResult = "EMPATE"
createMessage()
} else if (playerAttack == fire && rivalAttack == earth || playerAttack == water && rivalAttack == fire || playerAttack == earth && rivalAttack == water) {
roundResult = "GANASTE"
createMessage()
} else {
roundResult = "PERDISTE"
createMessage()
}
Mi solución...
}
function createMessage() {
let sectionMessages = document.getElementById("mensajes")
let attacksParagraph = document.createElement("p")
attacksParagraph.innerHTML = "Tú mascota atacó con " + playerAttack + " La mascota rival atacó con " + rivalAttack + " ..." + roundResult
sectionMessages.appendChild(attacksParagraph)
}
Si pero note que no para, no tiene un stop y ainque no es un loop el combate que es de 3 vidas no se detiene en 3 perdidas,
lo que hice fue crear una variable global y luego concatenarla en la función crearMensaje y me funcionó!
La verdad que me puso muy contento poder hacerlo ya que aún no vi la solución del profe.
Me emocionó mucho porque es la primera vez que pude solucionarlo solo.
Así va mi código
.
.
.
let ataqueJugador;
let ataquePc;
function iniciarJuego() {
let botonMascotaJugador = document.getElementById('boton-mascotas')
botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
let botonAtaqueFuego = document.getElementById('boton-fuego')
botonAtaqueFuego.addEventListener('click', ataqueFuego)
let botonAtaqueAgua = document.getElementById('boton-agua');
botonAtaqueAgua.addEventListener('click', ataqueAgua)
let botonAtaqueTierra = document.getElementById('boton-tierra');
botonAtaqueTierra.addEventListener('click', ataqueTierra)
}
function seleccionarMascotaJugador() {
let mascotaHipo = document.getElementById('hipodoge')
let mascotaCapi = document.getElementById('capipepo')
let mascotaRati = document.getElementById('ratigueya')
let spanMascotaJugador = document.getElementById('spanNombreMascota')
let aux1 = 0;
if (mascotaHipo.checked) {
//alert("Seleccionaste la Mascota Hipodoge 🐗")
spanMascotaJugador.innerHTML = 'Hipodoge'
aux1 = 1;
} else if (mascotaCapi.checked) {
//alert("Seleccionaste la Mascota Capipepo 🐦")
spanMascotaJugador.innerHTML = 'Capipepo'
aux1 = 2;
} else if (mascotaRati.checked) {
//alert("Seleccionaste la Mascota Ratigueya 🐹")
spanMascotaJugador.innerHTML = 'Ratigueya'
aux1 = 3
} else {
alert("Debes seleccionar una mascota 🐗, 🐦 ó 🐹")
}
seleccionarMascotaPc(aux1);
//alert("Seleccionaste la Mascota 👋")
}
function random(min, max) {
return Math.floor((Math.random() * (max - min + 1)) + min);
}
function seleccionarMascotaPc(aux) {
let seleccion = 0;
do {
seleccion = random(1, 3);
} while (seleccion == aux)
let spanMascotaPc = document.getElementById('spanMascotaPc')
if (seleccion == 1) {
aux = 1;
spanMascotaPc.innerHTML = 'Hipodoge'
} else if (seleccion == 2) {
aux = 2;
spanMascotaPc.innerHTML = 'Capipepo'
} else if (seleccion == 3) {
aux = 3;
spanMascotaPc.innerHTML = 'Ratigueya'
}
return seleccion;
}
function seleccionarAtaquePc(aux) {
let seleccion = 0;
ataquePc = “”;
seleccion = random(1, 3);
if (seleccion == 1) {
aux = 1;
//alert("El Pc Seleccionó Fuego")
ataquePc = "Fuego"
} else if (seleccion == 2) {
aux = 2;
//alert("El Pc Seleccionó Agua")
ataquePc = "Agua"
} else {
aux = 3;
//alert("El Pc Seleccionó Tierra")
ataquePc = "Tierra"
}
mensajeResultado();
}
function mensajeResultado() {
let texto1 = resultado(ataqueJugador, ataquePc);
let parrafo = document.createElement('p');
parrafo.innerHTML = 'Tu mascota atacó con ' + ataqueJugador + ' y el PC atacó con ' + ataquePc + '. ' + texto1;
let seccionMensajes = document.getElementById('mensajes');
seccionMensajes.appendChild(parrafo);
}
function ataqueFuego() {
let aux = 0;
//alert("Atacas con Fuego");
ataqueJugador = "Fuego";
aux = 1;
seleccionarAtaquePc(aux);
}
function ataqueAgua() {
let aux = 0;
//alert(“Atacas con Agua”);
ataqueJugador = “Agua”;
aux = 2;
seleccionarAtaquePc(aux);
}
function ataqueTierra() {
let aux = 0;
//alert(“Atacas con Tierra”);
ataqueJugador = “Tierra”;
aux = 1;
seleccionarAtaquePc(aux);
}
function resultado(opcionUsuario, opcionPc) {
let pc = opcionPc;
let opcion = opcionUsuario;
let ganador = “”;
if (pc == opcion) {
ganador = 'Empataron 🙌🏼';
} else if ((opcion == 'Fuego') && (pc == 'Tierra')) {
ganador = '🎉Ganaste 💪👏💥';
} else if ((opcion == 'Tierra') && ((pc == 'Agua'))) {
ganador = '🎉Ganaste 💪👏💥';
} else if ((opcion == 'Agua') && ((pc == 'Fuego'))) {
ganador = '🎉Ganaste 💪👏💥';
} else {
ganador = 'Perdiste 😕👌🏼';
}
return ganador;
}
window.addEventListener(‘load’, iniciarJuego)
Acá les dejo mi aporte. Tiene algunas cositas en Ingles pero se entiende.
function combat() {
if ((playerAttack == 'Fire' && enemysAttack == 'Earth') || (playerAttack == 'Water' && enemysAttack == 'Fire') || (playerAttack == 'Earth' && enemysAttack == 'Water')) {
result = '¡¡¡Ganaste!!! 💥🎉'
wons++
} else if (playerAttack == enemysAttack) {
result = '¡Empate! 🙈'
} else {
result = 'Perdiste 🙀'
lose++
}
}
function createMessage() {
let sectionMessages = document.getElementById('messages')
let paragraph = document.createElement('p')
paragraph.innerHTML = `Tu Pokemon atacó con ${playerAttack}, el Pokemon de tu enemigo ataco con ${enemysAttack} - ${result}`
sectionMessages.appendChild(paragraph)
}
Yo lo hice distinto al profe Juan. Creé una variable global para resultado
y le cambié el valor en la función combate
function combate() {
if (ataqueEnemigo == ataqueJugador) {
resultado = 'Empate 🤜🤛'
crearMensaje()
} else if (ataqueJugador == 'Fuego' && ataqueEnemigo == 'Tierra') {
resultado = 'GANASTE 🎉'
crearMensaje()
} else if (ataqueJugador == 'Agua' && ataqueEnemigo == 'Fuego') {
resultado = 'GANASTE 🎉'
crearMensaje()
} else if (ataqueJugador == 'Tierra' && ataqueEnemigo == 'Agua') {
resultado = 'GANASTE 🎉'
crearMensaje()
} else {
resultado = 'Perdiste 😥'
crearMensaje()
}
}
creo que afecta si las variables no las pones con. mayusculas o minusculas, porque o pierdo siempre o empato…
CÓDIGO CORREGIDO.
interesante clase, para los que ya sabian programar, les propongo resolver o adenlantandose a la clase,haciendo el codigo antes de que el profe lo haga
Una alternativa, a concatenar todas las cadenas + cada una de las variables, seria esta:
parrafo.innerHTML = `Tu mascota ataco con ${ataqueJugador} la mascota del enemigo ataco con ${ataqueEnemigo}...${resultado}`
yo hice la respuesta con este codigo
let ataqueJugador
let ataqueEnemigo
let resultado
function iniciarJuego() {
let botonMascotaJugador = document.getElementById(‘boton-mascota’)
botonMascotaJugador.addEventListener(‘click’, seleccionarMascotaJugador)
let botonFuego = document.getElementById('boton-fuego')
botonFuego.addEventListener('click', ataqueFuego)
let botonAgua = document.getElementById('boton-agua')
botonAgua.addEventListener('click', ataqueAgua)
let botonTierra = document.getElementById('boton-tierra')
botonTierra.addEventListener('click', ataqueTierra)
}
function seleccionarMascotaJugador() {
let inputHipodoge = document.getElementById(‘hipodoge’)
let inputCapipepo = document.getElementById(‘capipepo’)
let inputRatigueya = document.getElementById(‘ratigueya’)
let spanMascotaJugador = document.getElementById(‘mascota-jugador’)
if (inputHipodoge.checked) {
spanMascotaJugador.innerHTML = 'Hipodoge'
} else if (inputCapipepo.checked) {
spanMascotaJugador.innerHTML = 'Capipepo'
} else if (inputRatigueya.checked) {
spanMascotaJugador.innerHTML = 'Ratigueya'
} else {
alert('Selecciona una mascota')
}
seleccionarMascotaEnemigo()
}
function combate () { if(ataqueEnemigo == ataqueJugador) {alert(“acabo en empate”)
resultado = " empate"}
else if(ataqueJugador == ‘TIERRA’ && ataqueEnemigo == ‘AGUA’) {alert(“ganaste”)
resultado = " ganaste"}
else if(ataqueJugador == ‘FUEGO’ && ataqueEnemigo == ‘TIERRA’) {alert(“ganaste”)
resultado = " ganaste"
}
else if(ataqueJugador ==‘AGUA’ && ataqueEnemigo == ‘FUEGO’) {alert(“ganaste”)
resultado = " ganaste"
}else
{alert(" perdiste")
resultado = " PERDISTE"}
crearMensaje()}
function seleccionarMascotaEnemigo() {
let mascotaAleatoria = aleatorio(1,3)
let spanMascotaEnemigo = document.getElementById(‘mascota-enemigo’)
if (mascotaAleatoria == 1) {
spanMascotaEnemigo.innerHTML = 'Hipodoge'
} else if (mascotaAleatoria == 2) {
spanMascotaEnemigo.innerHTML = 'Capipepo'
} else {
spanMascotaEnemigo.innerHTML = 'Ratigueya'
}
}
function ataqueFuego() {
ataqueJugador = 'FUEGO’
alert(ataqueJugador)
ataqueAleatorioEnemigo()
}
function ataqueAgua() {
ataqueJugador = 'AGUA’
alert(ataqueJugador)
ataqueAleatorioEnemigo()
}
function ataqueTierra() {
ataqueJugador = 'TIERRA’
alert(ataqueJugador)
ataqueAleatorioEnemigo()
}
function ataqueAleatorioEnemigo() {
let ataqueAleatorio = aleatorioo(1,3)
if (ataqueAleatorio == 1) {
ataqueEnemigo = 'FUEGO'
} else if (ataqueAleatorio == 2) {
ataqueEnemigo = 'AGUA'
} else {
ataqueEnemigo = 'TIERRA'
}
combate()
}
function crearMensaje() {
let sectionMensajes = document.getElementById('mensajes')
let parrafo = document.createElement('p')
parrafo.innerHTML = 'Tu mascota ataco con ' + ataqueJugador + ', las mascota del enemigo atacó con ' + ataqueEnemigo + resultado
sectionMensajes.appendChild(parrafo)
}
function aleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
function aleatorioo(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)}
window.addEventListener(‘load’, iniciarJuego)
Mi codigo, un poco diferente
<code>
var ataqueJugador = 0;
var ataqueEnemigo = 0;
const rulesGame = {
1: {
3: true,
2: false,
1: false
},
2: {
1: true,
3: false,
2: false
},
3: {
2: true,
1: false,
3: false
}
}
let victorys = 0;
let defeat = 0;
var optionsGame = ["POLLO CABRON", "FUEGO","AGUA","TIERRA"];
iniciarJuego = () =>
{
let buttonMascotas = document.getElementById("seleccionarMascota");
buttonMascotas.addEventListener("click",seleccionMascotaJugador);
let nodelist = document.querySelectorAll("#seleccionar-ataque button");
let ataques = [].slice.call(nodelist);
ataques[0].addEventListener("click", ataqueFuego);
ataques[1].addEventListener("click", ataqueAgua);
ataques[2].addEventListener("click", ataqueTierra);
}
seleccionMascotaJugador = (enemigo) =>
{
// querySelectorAll genera un nodelist con todos los elementos similares
let nodelist = document.querySelectorAll("#seleccionar-mascota input");
console.log(nodelist);
var inputMascotas = [].slice.call(nodelist);
console.log(inputMascotas)
// Convertimos el nodelist en un array(nombresMascotas)
var nombresMascotas = ["Hipodoge","Capipepo","Ratigueya"];
let spanMascotaJugador = document.getElementById("mascota-jugador");
//forEach es el metodo de recorrer un arreglo.
inputMascotas.forEach((valor, indice) =>
{
if(valor.checked)
{
spanMascotaJugador.innerHTML= ` ${nombresMascotas[indice]}`;
enemigo == true;
seleccionarMascotaEnemigo(aleatorio(0,3));
}
})
}
seleccionarMascotaEnemigo = (pc) =>
{
var nombresMascotas = ["Hipodoge","Capipepo","Ratigueya"];
let spanMascotaEnemigo = document.getElementById("mascota-enemigo");
nombresMascotas.forEach((valor, indice) =>
{
if(indice == pc)
{
spanMascotaEnemigo.innerHTML= ` ${nombresMascotas[indice]}`;
}
})
}
ataqueFuego = () =>
{
ataqueJugador = 1
ataqueEnemigo = aleatorio(1, 3);
crearMensaje();
}
ataqueAgua = () =>
{
ataqueJugador = 2
ataqueEnemigo = aleatorio(1, 3);
crearMensaje();
}
ataqueTierra = () =>
{
ataqueJugador = 3
ataqueEnemigo = aleatorio(1, 3);
crearMensaje();
}
crearMensaje = () =>
{
var sectionMensaje = document.getElementById("mensajes");
var parrafo = document.createElement("p");
console.log(ataqueJugador, ataqueEnemigo)
if(rulesGame[ataqueJugador][ataqueEnemigo])
{
parrafo.innerHTML = "Tu mascota atacó con " + optionsGame[ataqueJugador] + ", las mascota del enemigo atacó con " +optionsGame[ataqueEnemigo] + " GANASTE";
sectionMensaje.appendChild(parrafo);
return victorys++
}
else if(ataqueJugador==ataqueEnemigo)
{
parrafo.innerHTML = "Tu mascota atacó con " + optionsGame[ataqueJugador] + ", las mascota del enemigo atacó con " +optionsGame[ataqueEnemigo] + " EMPATE";
sectionMensaje.appendChild(parrafo);
}
else
{
parrafo.innerHTML = "Tu mascota atacó con " + optionsGame[ataqueJugador] + ", las mascota del enemigo atacó con " +optionsGame[ataqueEnemigo] + " PERDISTE";
sectionMensaje.appendChild(parrafo);
return defeat++
}
estadisticas();
}
aleatorio = (min, max) =>
{
return Math.floor(Math.random() * (max - min + 1) + min);
}
estadisticas =() =>
{
while(victorys == 3 || defeat == 3)
{
alert("GANASTE " + victorys +" PERDISTE " + defeat);
victorys = 0;
defeat = 0;
}
}
window.addEventListener("load", iniciarJuego)
me siento un poco perdida con algunas cosas pero intentare teener paciencia
function combate (lo que esta dentro de estos paréntesis es un parámetro)
los parámetros sirven mucho para directamente incluir toda la información del resultado en forma de una variable y así hacerlo dinámico.
Lo resolví declarando variable general = resultado, y luego en vez de alerta poniendo esa variable resultado = perdiste o ganaste o empate en el combate!
En el mensaje al final coloqué + resultado… y funciono!
Yo cree una variable Global resultadoJuego donde almacenes el valor del combate para luego imprimirlo con la funcion mostrarMensaje.
Leyendo los comentarios, veo que fue la soluciòn que se nos ocurrio a la mayoria 😄
Gracias Juan DC
Me da gusto el aprender javascript, pero sobre todo, me da mas gusto mejorar mi logica al analizar mejor mi codigo y poder emplearlo en diferentes aspectos en mi vida.
Yo pense usar la variable resultado como global, para llenar la variable cuando haya un combate con el resultado y asi utilizar la variable en la concatenación al final, dio el mismo resultado
Para mi todo es nuevo… pero continua hacia la meta… Que buen profe
El mensaje oculto de esta clase seria, si puedes re utilizar una lógica que hayas desarrollado previamente, do it.
hay que aprender a utilizar bibliotecas.
Por fin logré que me arrojaran los resultados de los combates jeje ![](
let ataqueJugador
let ataqueEnemigo
function iniciarJuego() {
let botonMascotaJugador = document.getElementById('boton-mascotas')
botonMascotaJugador.addEventListener('click', seleccionarMascotaJugador)
let botonFuego = document.getElementById('boton-fuego')
botonFuego.addEventListener('click',ataqueFuego)
let botonAgua = document.getElementById('boton-agua')
botonAgua.addEventListener('click', ataqueAgua)
let botonTierra = document.getElementById('boton-tierra')
botonTierra.addEventListener('click', ataqueTierra)
}
function seleccionarMascotaJugador(){
let inputHipodoge = document.getElementById('hipodoge')
let inputCapipepo = document.getElementById('capipepo')
let inputRatigueya = document.getElementById('ratigueya')
let spanMascotaJugador = document.getElementById('mascota-jugador')
if (inputHipodoge.checked) {
spanMascotaJugador.innerHTML = 'Hipodoge'
} else if (inputCapipepo.checked) {
spanMascotaJugador.innerHTML = 'Capipepo'
} else if (inputRatigueya.checked) {
spanMascotaJugador.innerHTML = 'Ratigueya'
} else {
alert('Selecciona una mascota 😺')
}
seleccionarMascotaEnemigo()
}
function seleccionarMascotaEnemigo() {
let mascotaAleatoria = aleatorio(1,3)
let spanMascotaEnemigo = document.getElementById('mascota-enemigo')
if (mascotaAleatoria == 1){
spanMascotaEnemigo.innerHTML = 'Hipodoge'
} else if (mascotaAleatoria == 2){
spanMascotaEnemigo.innerHTML = 'Capipepo'
} else {
spanMascotaEnemigo.innerHTML = 'Ratigueya'
}
}
function ataqueFuego() {
ataqueJugador = 'FUEGO'
ataqueAleatorioEnemigo()
//alert('Ataque Fuego')
}
function ataqueAgua() {
ataqueJugador = 'AGUA'
ataqueAleatorioEnemigo()
//alert('Ataque Agua')
}
function ataqueTierra() {
ataqueJugador = 'TIERRA'
ataqueAleatorioEnemigo()
//alert('Ataque Tierra')
}
function ataqueAleatorioEnemigo() {
let ataqueAliatorio = aleatorio(1, 3)
if (ataqueAliatorio == 1) {
ataqueEnemigo = 'FUEGO'
} else if (ataqueAliatorio == 2) {
ataqueEnemigo = 'AGUA'
} else {
ataqueEnemigo = 'TIERRA'
}
combate()
}
function combate(){
if(ataqueEnemigo==ataqueJugador){
crearMensaje("EMPATE")
} else if(ataqueJugador == 'FUEGO' && ataqueEnemigo == 'TIERRA'){
crearMensaje("GANASTE")
} else if(ataqueJugador == 'AGUA' && ataqueEnemigo == 'FUEGO') {
crearMensaje("GANASTE")
} else if(ataqueJugador == 'TIERRA' && ataqueEnemigo == 'AGUA') {
crearMensaje("GANASTE")
} else {
crearMensaje("PERDISTE")
}
}
function crearMensaje(resultado){
let sectionMensajes = document.getElementById('mensajes')
let parrafo = document.createElement('p')
parrafo.innerHTML = 'Tu mascota atacó con '+ ataqueJugador +', las mascota del enemigo atacó con ' + ataqueEnemigo + '- '+ resultado +' 🎉🎉'
sectionMensajes.appendChild(parrafo)
}
function aleatorio(min, max){
return Math.floor( Math.random() * (max - min + 1) + min)
}
window.addEventListener('load', iniciarJuego)
Esta clase estuvo muy buena.
PENSE EN UNA VARIABLE GLOBAL :V
en el combate con un .or. || puedes juntar los tres GANASTE en uno solo y compactar mas la función
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?