Click here for free DL of the app version that can save data.

No:20041

106

←

Prev Next

→

Memes
Developer User8925｜Date and time 23/10/8 1:11:36
Build time 21.644 sec｜Game capacity 3.515KB｜

Script

Como eres un programador y deseas implementar un juego en un solo archivo HTML utilizando JavaScript, puedo darte un ejemplo básico de cómo podrías hacerlo. A continuación se presenta un ejemplo de un juego de adivinanzas utilizando pictogramas para operar en un smartphone:

¿Qué objeto se representa aquí?

Recuerda reemplazar las rutas de las imágenes de los pictogramas y las preguntas con tus propias imágenes y personalizar el diseño y las opciones de respuesta según tus necesidades. Este es solo un ejemplo básico para que puedas empezar a crear tu juego. ¡Diviértete programando!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Adivinanzas - Juego</title>
</head>
<body>
  <div id="pictogram-container">
    <img id="pictogram" src="ruta_a_tu_imagen_pictograma.png" alt="Pictograma">
  </div>
  
  <div id="question-container">
    <h1 id="question">¿Qué objeto se representa aquí?</h1>
  </div>
  
  <div id="options-container">
    <button id="option1">Opción 1</button>
    <button id="option2">Opción 2</button>
    <button id="option3">Opción 3</button>
  </div>
  
  <script>
    // Lista de preguntas y respuestas
    const questions = [
      {
        image: "ruta_a_tu_imagen_pregunta_1.png",
        question: "¿Qué objeto se representa aquí?",
        options: ["Opción 1", "Opción 2", "Opción 3"],
        answer: 0  // Índice de la respuesta correcta dentro del array 'options'
      },
      // Agrega más preguntas aquí...
    ];
    
    let score = 0;
    let currentQuestionIndex = 0;
    
    // Función para cargar la siguiente pregunta
    function loadNextQuestion() {
      const currentQuestion = questions[currentQuestionIndex];
      
      // Actualiza la imagen de la pregunta
      const pictogram = document.getElementById("pictogram");
      pictogram.src = currentQuestion.image;
      
      // Actualiza el texto de la pregunta
      const question = document.getElementById("question");
      question.textContent = currentQuestion.question;
      
      // Actualiza las opciones de respuesta
      const options = document.querySelectorAll("#options-container button");
      options.forEach((option, index) => {
        option.textContent = currentQuestion.options[index];
      });
    }
    
    // Función para manejar la lógica al seleccionar una opción
    function handleOptionSelection(event) {
      const selectedOptionIndex = Array.from(event.currentTarget.parentElement.children).indexOf(event.currentTarget);
      const currentQuestion = questions[currentQuestionIndex];
      
      if (selectedOptionIndex === currentQuestion.answer) {
        score++;  // Incrementa el puntaje si la respuesta es correcta
      }
      
      currentQuestionIndex++;  // Incrementa el índice para cargar la siguiente pregunta
      
      if (currentQuestionIndex < questions.length) {
        loadNextQuestion();
      } else {
        // Se acabaron las preguntas, muestra la puntuación final
        const gameContainer = document.getElementById("pictogram-container");
        gameContainer.innerHTML = `<h1>Juego Terminado</h1><p>Puntuación: ${score} de ${questions.length}</p>`;
      }
    }
    
    // Agrega el evento 'click' a todas las opciones de respuesta
    const options = document.querySelectorAll("#options-container button");
    options.forEach((option) => {
      option.addEventListener("click", handleOptionSelection);
    });
    
    // Inicializa el juego cargando la primera pregunta
    loadNextQuestion();
  </script>
</body>
</html>
```