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

No:40219

←

Prev Next

→

Ben 10
Developer User18028｜Date and time 24/2/1 20:37:57
Build time 10.024 sec｜Game capacity 2.444KB｜

Script

Ben 10 Game

In the above HTML file, I have created a simple Ben 10 game that can be played on a smartphone. It contains a pictogram image and a "Transform!" button. When the button is clicked, a random Ben 10 alien pictogram is displayed. The JavaScript code defines an array of Ben 10 pictogram names. The `getRandomPictogram()` function selects a random pictogram name from the array. The `transform()` function updates the source of the pictogram image with the randomly selected pictogram. The event listener is added to the transform button, so when it is clicked, the `transform()` function is called to change the pictogram.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Ben 10 Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        
        #game-container {
            text-align: center;
            margin-top: 20px;
        }
        
        #pictogram-image {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin-bottom: 10px;
        }
        
        #btn-transform {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Ben 10 Game</h1>
    <div id="game-container">
        <img id="pictogram-image" src="ben10.png" alt="Ben 10 Pictogram" />
        <button id="btn-transform">Transform!</button>
    </div>

// Function to randomly select a pictogram
        function getRandomPictogram() {
            const randomIndex = Math.floor(Math.random() * ben10Pictograms.length);
            return ben10Pictograms[randomIndex];
        }

// Function to transform into a random Ben 10 alien
        function transform() {
            const pictogramContainer = document.getElementById('pictogram-image');
            const randomPictogram = getRandomPictogram();
            pictogramContainer.setAttribute('src', randomPictogram + '.png');
        }

// Event listener for the transform button click
        const transformButton = document.getElementById('btn-transform');
        transformButton.addEventListener('click', transform);
    </script>
</body>
</html>
```

The JavaScript code defines an array of Ben 10 pictogram names. The `getRandomPictogram()` function selects a random pictogram name from the array. The `transform()` function updates the source of the pictogram image with the randomly selected pictogram.

The event listener is added to the transform button, so when it is clicked, the `transform()` function is called to change the pictogram.