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

No:41277

Good, bad or neutral game
Developer User18493｜Date and time 24/2/6 18:19:49
Build time 21.938 sec｜Game capacity 5.249KB｜

Script

Title: Picto Challenge

Picto Challenge

Time: 0s

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Title: Picto Challenge

<html>
  <head>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f1f1f1;
        font-family: Arial, sans-serif;
      }

#game-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
      }

h1 {
        margin-bottom: 20px;
        text-align: center;
      }

#timer {
        font-size: 24px;
        margin-bottom: 10px;
      }

#message {
        font-size: 18px;
        margin-bottom: 10px;
        display: none;
      }

#pictogram-container {
        display: flex;
        justify-content: space-between;
        width: 200px;
        margin-bottom: 20px;
      }

.pictogram {
        font-size: 36px;
      }

.pictogram.correct {
        color: green;
      }

.pictogram.incorrect {
        color: red;
      }

.button-container {
        display: flex;
        justify-content: center;
      }

button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        margin: 0 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        text-transform: uppercase;
      }

#start-button {
        background-color: #3366cc;
      }

#next-button {
        background-color: #ffbb33;
        display: none;
      }

button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    </style>

<title>Picto Challenge</title>

let currentPictogram, timer, timerInterval;

function startGame() {
        resetGame();
        showNewPictogram();
        timer = 10;
        updateTimer();

// Start the timer interval
        timerInterval = setInterval(() => {
          timer--;
          updateTimer();

if (timer <= 0) {
            clearInterval(timerInterval);
            showMessage("Time's up!");
            enableNextButton();
          }
        }, 1000);
      }

function resetGame() {
        currentPictogram = "";
        timer = 0;
        clearInterval(timerInterval);
        hideMessage();
        disableNextButton();
      }

function updateTimer() {
        document.getElementById("timer").textContent = `Time: ${timer}s`;
      }

function showMessage(text, type = "neutral") {
        const messageElement = document.getElementById("message");
        messageElement.textContent = text;

if (type === "neutral") {
          messageElement.style.color = "#333";
        } else if (type === "correct") {
          messageElement.style.color = "green";
        } else if (type === "incorrect") {
          messageElement.style.color = "red";
        }

messageElement.style.display = "block";
      }

function hideMessage() {
        document.getElementById("message").style.display = "none";
      }

function showNewPictogram() {
        const pictogramContainer = document.getElementById("pictogram-container");
        pictogramContainer.innerHTML = "";

const availablePictograms = [...pictograms];
        const index = Math.floor(Math.random() * availablePictograms.length);
        currentPictogram = availablePictograms[index];
        availablePictograms.splice(index, 1);

pictogramContainer.innerHTML += `<div class="pictogram">${currentPictogram}</div>`;

for (let i = 0; i < 2; i++) {
          const randomIndex = Math.floor(Math.random() * availablePictograms.length);
          pictogramContainer.innerHTML += `<div class="pictogram">${availablePictograms[randomIndex]}</div>`;
          availablePictograms.splice(randomIndex, 1);
        }
      }

function checkAnswer(answer) {
        if (answer === currentPictogram) {
          showMessage("Correct!", "correct");
        } else {
          showMessage("Incorrect!", "incorrect");
        }

clearInterval(timerInterval);
        enableNextButton();
      }

function enableNextButton() {
        document.getElementById("next-button").disabled = false;
        document.getElementById("next-button").style.display = "block";
      }

function disableNextButton() {
        document.getElementById("next-button").disabled = true;
      }
    </script>
  </head>

<body>
    <div id="game-container">
      <h1>Picto Challenge</h1>

<div class="button-container">
        <button id="start-button" onclick="startGame()">Start</button>
        <button id="next-button" onclick="startGame()" disabled>Next</button>
      </div>
    </div>
  </body>
</html>