Juego de los 5 dados

README.md

@@ -0,0 +1,6 @@
+# Contarhasta5dados
+Juego para Infantil para aprender a contar hasta tres usando dados.
+
+Puedes probar el juego en esta url:
+
+https://axelcotongutierrez.github.io/Contarhasta5dados/

contar123.js

@@ -0,0 +1,126 @@
+// Axel Cotón Gutiérrez Copyright 2023
+  // Generar imágenes aleatorias
+  const images = [
+    "https://raw.githubusercontent.com/AxelCotonGutierrez/Contarhasta5dados/master/img/D6_1.svg.png",
+    "https://raw.githubusercontent.com/AxelCotonGutierrez/Contarhasta5dados/master/img/D6_2.svg.png",
+    "https://raw.githubusercontent.com/AxelCotonGutierrez/Contarhasta5dados/master/img/D6_3.svg.png",
+    "https://raw.githubusercontent.com/AxelCotonGutierrez/Contarhasta5dados/master/img/D6_4.svg.png",
+    "https://raw.githubusercontent.com/AxelCotonGutierrez/Contarhasta5dados/master/img/D6_5.svg.png"
+  ];
+
+   let score = 0; // Contador de respuestas correctas
+  let questionsCount = 0; // Contador de preguntas realizadas
+  let previousImageIndex = -1; // Índice de la imagen de la pregunta anterior
+
+  // Función para restablecer los resultados y mensajes del juego anterior
+  function resetGame() {
+    const scoreElement = document.querySelector("#score");
+    const resultElement = document.querySelector("#result");
+
+    scoreElement.textContent = "";
+    resultElement.textContent = "";
+    scoreElement.style.color = "initial";
+    resultElement.style.color = "initial";
+  }
+
+  function generateQuestion() {
+    resetGame(); // Restablecer resultados y mensajes del juego anterior
+
+    // Verificar si se han realizado las 5 preguntas
+    if (questionsCount >= 5) {
+      const scoreElement = document.querySelector("#score");
+      scoreElement.textContent = `\u00A1Fin!`;
+
+      if (score === 5) {
+        scoreElement.textContent += ` \u00A1Felicidades, eres un/a campeón/a!`;
+        scoreElement.style.color = "green";
+      } else {
+        scoreElement.textContent += ` \u00A1Vuelve a intentarlo!`;
+        scoreElement.style.color = "red";
+      }
+
+      // Mostrar botón "Volver a jugar"
+      const playAgainButton = document.querySelector("#play-again-button");
+      playAgainButton.style.display = "block";
+
+      return;
+    }
+
+    let chosenImageIndex = generateRandomImageIndex();
+
+    // Asegurarse de que la imagen no se repita consecutivamente
+    while (chosenImageIndex === previousImageIndex) {
+      chosenImageIndex = generateRandomImageIndex();
+    }
+
+    previousImageIndex = chosenImageIndex;
+
+    // Mostrar la imagen elegida en el HTML
+    const imageContainer = document.querySelector("#image-container");
+    imageContainer.innerHTML = ""; // Limpiar el contenedor de imágenes
+
+    const chosenImage = document.createElement("img");
+    chosenImage.src = images[chosenImageIndex];
+    chosenImage.alt = "Imagen";
+    chosenImage.classList.add("game-image"); // Agregar la clase "game-image" a la imagen
+    imageContainer.appendChild(chosenImage);
+
+    // Pedir al jugador que adivine
+    const guessButtons = document.querySelectorAll(".guess-button");
+
+    // Eliminar eventos click anteriores
+    guessButtons.forEach((button) => {
+      button.removeEventListener("click", handleGuess);
+    });
+
+    // Asignar eventos click nuevos
+    guessButtons.forEach((button) => {
+      button.addEventListener("click", handleGuess);
+    });
+  }
+
+  function generateRandomImageIndex() {
+    return Math.floor(Math.random() * images.length);
+  }
+
+  function handleGuess(event) {
+    const guess = parseInt(event.target.textContent);
+    const resultElement = document.querySelector("#result");
+    questionsCount++;
+
+    if (guess === previousImageIndex + 1) {
+      score++;
+      resultElement.textContent = "\u00A1Correcto!";
+      resultElement.style.color = "green";
+    } else {
+      resultElement.textContent = `Incorrecto, el valor de la imagen era ${previousImageIndex + 1}.`;
+      resultElement.style.color = "red";
+    }
+
+    // Actualizar puntaje y generar la siguiente pregunta
+    const scoreElement = document.querySelector("#score");
+    scoreElement.textContent = ` ${score} respuestas correctas de ${questionsCount}`;
+
+    setTimeout(generateQuestion, 1000);
+  }
+
+  function restartGame() {
+    // Restablecer variables de juego
+    score = 0;
+    questionsCount = 0;
+    previousImageIndex = -1;
+
+    // Ocultar botón "Volver a jugar"
+    const playAgainButton = document.querySelector("#play-again-button");
+    playAgainButton.style.display = "none";
+
+    // Reiniciar el juego
+    generateQuestion();
+  }
+
+  // Llamar a la función para iniciar el juego
+  generateQuestion();
+
+  // Agregar evento clic al botón "Volver a jugar"
+  const playAgainButton = document.querySelector("#play-again-button");
+  playAgainButton.addEventListener("click", restartGame);

contar123c.css

@@ -0,0 +1,135 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  font-family: 'Nunito';
+}
+
+body {
+  max-height: 80%;
+  text-align: center;
+  color: #0c4fe1;
+}
+
+h1 {
+  color: rgb(10, 10, 10);
+  padding: 50px;
+  font-size: 40px;
+}
+
+.container {
+  background-color: #ddff62;
+  max-width: 80%;
+  margin: auto;
+  border: 3px solid #000;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  padding: 50px 0;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden; /* Evitar desbordamiento horizontal en dispositivos móviles */
+}
+
+.container2 {
+  background-color: #f0f3e9;
+  max-width: 80%;
+  margin: auto;
+  border: 3px solid #000;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  padding: 50px 0;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden; /* Evitar desbordamiento horizontal en dispositivos móviles */
+}
+
+.textosuperior {
+  font-size: 30px;
+  justify-content: center;
+  align-items: center;
+}
+
+.msj {
+  font-size: 30px;
+  height: 30px;
+}
+
+#buttons-container {
+  margin-top: 10px;
+}
+
+.guess-button {
+  width: 100px;
+  height: 100px;
+  border: 2px solid #000;
+  font-size: 50px;
+  margin-bottom: 20px;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: #000;
+  color: white;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+#play-again-button {
+  background-color: #4285f4;
+  color: #fff;
+  padding: 10px 20px;
+  font-size: 16px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 20px;
+}
+
+#play-again-button:hover {
+  background-color: #3367d6;
+}
+
+.game-image {
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+  max-height: 200px;
+}
+
+#score {
+  font-size: 20px;
+  margin-top: 20px;
+}
+
+#result {
+  font-size: 24px;
+  margin-top: 20px;
+  font-weight: bold;
+}
+
+/* Nuevo código para redimensionar imágenes en dispositivos móviles */
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.container img {
+  margin: 5px;
+}
+
+@media (max-width: 768px) {
+  .container {
+    max-width: 100%; /* Ancho completo en dispositivos móviles */
+  }
+
+  container img {
+    width: calc(30% - 10px); /* Ajusta el valor según tus necesidades */
+  }
+}

index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>CONTAR HASTA 3</title>
+	<link rel="stylesheet" href="contar123c.css">
+	<!-- Llamamos al estilo -->
+</head>
+<body>
+	<h1>CONTAR HASTA 3</h1>
+	<div class="container2">
+	<span class="textosuperior">¿Eres capaz de contar hasta cinco usando dados?</span>
+	<button id="play-again-button" style="display: none;">Volver a jugar</button>
+	</div>
+	<div class="container">
+		<div id="buttons-container">
+    		<button class="guess-button">1</button>
+    		<button class="guess-button">2</button>
+    		<button class="guess-button">3</button> 
+			<button class="guess-button">4</button> 
+			<button class="guess-button">5</button> </div>
+			<!-- Ponemos las cinco opciones entre ellas la verdadera"-->
+			<div id="image-container"></div>
+			<span class="msj" id="result">
+				<!-- Desplegamos el mensaje "Excelente o Inténtalo de nuevo"-->
+
+			 </span>
+			 <span class="msj" id="score">
+
+
+			 </span>
+		</div>
+
+	</div>
+
+	<script src="contar123.js"></script>
+	<!-- Llamamos a Java"-->
+	<br>
+	<a href="https://commons.wikimedia.org/wiki/File:D6_2.svg">Imágenes: Christophe Dang Ngoc Chan (cdang)</a>, <a href="http://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a>, via Wikimedia Commons
+</body>
+</div>
+</html>