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

No:40435

←

Prev Next

→

Drone
Developer User18108｜Date and time 24/2/2 19:03:51
Build time 17.661 sec｜Game capacity 5.2KB｜

Script

Sure, I can help you create a simple game using HTML, JavaScript, and pictograms. Here's an example of a "Guess the Pictogram" game for smartphone operation:

Guess the Pictogram

Select the correct word that corresponds to the displayed pictogram:

To use this code, you need to replace the sample pictogram URLs (`emozi_all/pictogram.png`) with actual image URLs of pictograms you want to use in your game. Additionally, you can add more pictograms to the `pictograms` array. The game starts automatically when you open the HTML file on your smartphone's web browser.

←

Prev　Next

→ 　

Back　

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

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

Sure, I can help you create a simple game using HTML, JavaScript, and pictograms. Here's an example of a "Guess the Pictogram" game for smartphone operation:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Guess the Pictogram</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        img {
            width: 150px;
            height: 150px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Guess the Pictogram</h1>
    <p>Select the correct word that corresponds to the displayed pictogram:</p>
    <img id="pictogram" src="">
    <br>
    <button id="btnOption1"></button>
    <button id="btnOption2"></button>
    <button id="btnOption3"></button>

let currentPictogramIndex = 0;
            let score = 0;

// Initialize game
            displayPictogram();
            createOptions();

// Event listeners for option buttons
            document.getElementById("btnOption1").addEventListener("click", checkAnswer);
            document.getElementById("btnOption2").addEventListener("click", checkAnswer);
            document.getElementById("btnOption3").addEventListener("click", checkAnswer);

// Function to display current pictogram
            function displayPictogram() {
                document.getElementById("pictogram").src = pictograms[currentPictogramIndex].imgSrc;
            }

// Function to create random answer options
            function createOptions() {
                const options = getOptions(currentPictogramIndex);
                document.getElementById("btnOption1").innerHTML = options[0];
                document.getElementById("btnOption2").innerHTML = options[1];
                document.getElementById("btnOption3").innerHTML = options[2];
            }

// Function to get random answer options
            function getOptions(index) {
                const correctAnswer = pictograms[index].correctAnswer;
                const allAnswers = [...pictograms.map(obj => obj.correctAnswer)];
                allAnswers.splice(index, 1); // Remove correct answer from answer options
                const randomOptions = getRandomElements(allAnswers, 2); // Get 2 random incorrect options
                randomOptions.push(correctAnswer); // Add correct answer
                return shuffleArray(randomOptions); // Shuffle the options
            }

// Function to get a specified number of random elements from an array
            function getRandomElements(array, numElements) {
                const randomElements = [];
                while (randomElements.length < numElements) {
                    const randomIndex = Math.floor(Math.random() * array.length);
                    const element = array[randomIndex];
                    if (!randomElements.includes(element)) {
                        randomElements.push(element);
                    }
                }
                return randomElements;
            }

// Function to shuffle an array
            function shuffleArray(array) {
                for (let i = array.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [array[i], array[j]] = [array[j], array[i]];
                }
                return array;
            }

// Function to check the selected answer
            function checkAnswer(event) {
                const selectedAnswer = event.target.innerHTML;
                const correctAnswer = pictograms[currentPictogramIndex].correctAnswer;
                if (selectedAnswer === correctAnswer) {
                    score++;
                    alert("Correct! Your score: " + score);
                } else {
                    alert("Incorrect! The correct answer was: " + correctAnswer);
                }
                currentPictogramIndex++;
                if (currentPictogramIndex === pictograms.length) {
                    gameOver();
                } else {
                    displayPictogram();
                    createOptions();
                }
            }

// Function to handle game over
            function gameOver() {
                alert("Game Over! Your final score: " + score);
                // Add any additional game over logic here
            }
        };
    </script>
</body>
</html>
```

To use this code, you need to replace the sample pictogram URLs (`https://example.com/pictogramX.png`) with actual image URLs of pictograms you want to use in your game. Additionally, you can add more pictograms to the `pictograms` array. The game starts automatically when you open the HTML file on your smartphone's web browser.