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

No:39346

101

←

Prev Next

→

Ten second game timer
Developer User15231｜Date and time 24/1/28 3:33:16
Build time 14.047 sec｜Game capacity 4.136KB｜

Script

Sure! Here's a simple game implemented as a single HTML file using JavaScript and enclosed in script tags. It's a guessing game where the player needs to guess the correct pictogram within a given time limit of 10 seconds.

Pictogram Guessing Game

Note: Please make sure to have a folder named "pictograms" in the same directory as the HTML file containing the pictogram images (named as "emozi_all/pictogram.png", "emozi_hamuster.png", "emozi_dog.png", etc.). You can add more pictogram image paths to the `pictograms` array as needed. This game displays an initial pictogram image with a text input field where the player can enter their guess. After submitting their guess, the game checks if the guess matches the pictogram name (ignoring case sensitivity). The result is displayed, and if there are more pictograms to guess, the next one is shown. The game ends either when the player guesses all the pictograms or when the time runs out after 10 seconds.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pictogram Guessing Game</title>
</head>
<body>
    <h1>Pictogram Guessing Game</h1>
    <div id="game-container">
        <img id="pictogram" src="pictograms/1.png" alt="Pictogram">
        <input type="text" id="guess-input" placeholder="Enter your guess">
        <button id="submit-button">Submit</button>
        <p id="result"></p>
        <p id="timer"></p>
    </div>

// Game variables
        let timerInterval;
        let secondsLeft = 10;
        let currentPictogramIndex = 0;
        const pictogramImg = document.getElementById("pictogram");
        const guessInput = document.getElementById("guess-input");
        const submitButton = document.getElementById("submit-button");
        const resultText = document.getElementById("result");
        const timerText = document.getElementById("timer");

// Function to start the game
        function startGame() {
            setPictogram();
            startTimer();
        }

// Function to set the current pictogram
        function setPictogram() {
            pictogramImg.src = pictograms[currentPictogramIndex];
            guessInput.value = "";
            resultText.textContent = "";
            guessInput.focus();
        }

// Function to handle submit button click
        function handleGuess() {
            const userGuess = guessInput.value.toLowerCase();
            const pictogramName = getFileNameFromPath(pictograms[currentPictogramIndex]).split(".")[0].toLowerCase();

if (userGuess === pictogramName) {
                resultText.textContent = "Correct!";
            } else {
                resultText.textContent = "Wrong answer!";
            }

if (currentPictogramIndex < pictograms.length - 1) {
                currentPictogramIndex++;
                setPictogram();
            } else {
                endGame();
            }
        }

// Function to start the timer
        function startTimer() {
            timerInterval = setInterval(() => {
                if (secondsLeft === 0) {
                    clearInterval(timerInterval);
                    endGame();
                } else {
                    timerText.textContent = `Time left: ${secondsLeft} seconds`;
                    secondsLeft--;
                }
            }, 1000);
        }

// Function to end the game
        function endGame() {
            clearInterval(timerInterval);
            timerText.textContent = "Game over!";
            guessInput.disabled = true;
            submitButton.disabled = true;
        }

// Helper function to get file name from path
        function getFileNameFromPath(path) {
            return path.split("/").pop();
        }

// Start the game when the page loads
        window.onload = startGame;

// Event listener for submit button click
        submitButton.addEventListener("click", handleGuess);
    </script>
</body>
</html>
```

Note: Please make sure to have a folder named "pictograms" in the same directory as the HTML file containing the pictogram images (named as "1.png", "2.png", "3.png", etc.). You can add more pictogram image paths to the `pictograms` array as needed.

This game displays an initial pictogram image with a text input field where the player can enter their guess. After submitting their guess, the game checks if the guess matches the pictogram name (ignoring case sensitivity). The result is displayed, and if there are more pictograms to guess, the next one is shown. The game ends either when the player guesses all the pictograms or when the time runs out after 10 seconds.