diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f605342
--- /dev/null
+++ b/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/
diff --git a/contar123.js b/contar123.js
new file mode 100644
index 0000000..d89026a
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/contar123c.css b/contar123c.css
new file mode 100644
index 0000000..a486862
--- /dev/null
+++ b/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 */
+ }
+}
\ No newline at end of file
diff --git a/img/D6_1.svg.png b/img/D6_1.svg.png
new file mode 100644
index 0000000..7a26b16
Binary files /dev/null and b/img/D6_1.svg.png differ
diff --git a/img/D6_2.svg.png b/img/D6_2.svg.png
new file mode 100644
index 0000000..03275d7
Binary files /dev/null and b/img/D6_2.svg.png differ
diff --git a/img/D6_3.svg.png b/img/D6_3.svg.png
new file mode 100644
index 0000000..c62fde2
Binary files /dev/null and b/img/D6_3.svg.png differ
diff --git a/img/D6_4.svg.png b/img/D6_4.svg.png
new file mode 100644
index 0000000..0e287a3
Binary files /dev/null and b/img/D6_4.svg.png differ
diff --git a/img/D6_5.svg.png b/img/D6_5.svg.png
new file mode 100644
index 0000000..78e64b7
Binary files /dev/null and b/img/D6_5.svg.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..569da42
--- /dev/null
+++ b/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+ CONTAR HASTA 3
+
+
+
+
+ CONTAR HASTA 3
+
+ ¿Eres capaz de contar hasta cinco usando dados?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Imágenes: Christophe Dang Ngoc Chan (cdang), CC BY-SA 3.0, via Wikimedia Commons
+
+
+
