Make a car race game that asks trivia questions while running's game

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

No:26197

←

Prev Next

→

Make a car race game that asks trivia questions wh..ALL
Developer User12922｜Date and time 23/11/27 20:35:47
Build time 44.921 sec｜Game capacity 3.614KB｜

Script

Sure! Here's an example of a simple car race game implemented as a single HTML file using JavaScript. The game will ask trivia questions while the car races towards the finish line. It will display pictograms for the options along with the questions. Please note that this is a basic example and can be expanded further based on your specific requirements.

To play the game, open the HTML file in a web browser (preferably on a smartphone). The car will start racing, and you need to select the correct option by tapping the corresponding pictogram. Once you answer all the questions, the game will display your final score. Feel free to modify and enhance this example to meet your specific needs.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Car Race Game with Trivia Questions</title>
  <style>
    #race-track {
      position: relative;
      width: 100%;
      height: 200px;
      background: #ddd;
    }

#car {
      position: absolute;
      top: 10px;
      left: 0;
      width: 50px;
      height: 20px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="race-track">
    <div id="car"></div>
  </div>

const raceTrack = document.getElementById("race-track");
    const car = document.getElementById("car");
    const totalQuestions = questions.length;
    let currentQuestion = 0;
    let score = 0;

// Function to update car position based on correct answers
    function updateCarPosition() {
      const trackWidth = raceTrack.clientWidth;
      const questionPercentage = (currentQuestion / totalQuestions) * 100;
      const carPosition = (trackWidth * questionPercentage) / 100;

car.style.left = `${carPosition}px`;
    }

// Function to display the current question
    function displayQuestion() {
      const currentQuestionObj = questions[currentQuestion];
      const options = currentQuestionObj.options;

// Generate the options as pictograms
      let optionsHTML = "";
      for (const option in options) {
        const pictogram = options[option];
        optionsHTML += `<div onclick="checkAnswer('${option}')" style="cursor: pointer;">${pictogram}</div>`;
      }

// Display question and options
      raceTrack.innerHTML = `
        <h3>${currentQuestionObj.question}</h3>
        <div>${optionsHTML}</div>
      `;
    }

// Function to check the selected answer
    function checkAnswer(selectedOption) {
      const currentQuestionObj = questions[currentQuestion];
      const correctAnswer = currentQuestionObj.correctAnswer;

if (selectedOption === correctAnswer) {
        score++;
      }

currentQuestion++;

if (currentQuestion < totalQuestions) {
        displayQuestion();
        updateCarPosition();
      } else {
        raceTrack.innerHTML = `<h3>Game Over! Your score: ${score}/${totalQuestions}</h3>`;
      }
    }

// Start the game
    displayQuestion();
    updateCarPosition();
  </script>
</body>
</html>
```

Feel free to modify and enhance this example to meet your specific needs.