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

No:26825

←

Prev Next

→

Dress up game
Developer User13271｜Date and time 23/12/2 15:29:34
Build time 63.645 sec｜Game capacity 2.754KB｜

Script

Dress Up Game

This is a simple dress up game implemented as a single HTML file. It uses pictograms for different outfit options such as tops, bottoms, and shoes. The player can click on the pictograms to select the desired outfit. When a pictogram is clicked, it gets a border to indicate it is selected, and if another pictogram was previously selected, it becomes unselected. The game can be played on a smartphone device. Note that in the code, replace `emozi_all/dress.png`, `emozi_dog.png`, `emozi_himawari.png`, `emozi_cat.png`, `emozi_rabbit.png`, `emozi_apple.png`, `emozi_bear.png`, `emozi_chicken.png`, `emozi_rabbit.png` with the actual image file names you want to use for the game.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html

<!DOCTYPE html>
<html>
<head>
    <title>Dress Up Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        h1 {
            color: #FF69B4;
        }
        
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        .outfit-selector {
            margin-bottom: 20px;
        }
        
        .pictogram {
            width: 80px;
            height: 80px;
            cursor: pointer;
        }
        
        .selected {
            border: 2px solid #FF69B4;
        }
    </style>
</head>
<body>
    <h1>Dress Up Game</h1>
    
    <div class="container">
        <div class="outfit-selector">
            <img class="pictogram" src="top1.png" alt="Top 1">
            <img class="pictogram" src="top2.png" alt="Top 2">
            <img class="pictogram" src="top3.png" alt="Top 3">
        </div>
        
        <div class="outfit-selector">
            <img class="pictogram" src="bottom1.png" alt="Bottom 1">
            <img class="pictogram" src="bottom2.png" alt="Bottom 2">
            <img class="pictogram" src="bottom3.png" alt="Bottom 3">
        </div>
        
        <div class="outfit-selector">
            <img class="pictogram" src="shoes1.png" alt="Shoes 1">
            <img class="pictogram" src="shoes2.png" alt="Shoes 2">
            <img class="pictogram" src="shoes3.png" alt="Shoes 3">
        </div>
    </div>
    
    <script>
        const pictograms = document.querySelectorAll('.pictogram');
        
        pictograms.forEach((pictogram) => {
            pictogram.addEventListener('click', () => {
                if (pictogram.classList.contains('selected')) {
                    pictogram.classList.remove('selected');
                } else {
                    pictograms.forEach((picto) => picto.classList.remove('selected'));
                    pictogram.classList.add('selected');
                }
            });
        });
    </script>
</body>
</html>
```

This is a simple dress up game implemented as a single HTML file. It uses pictograms for different outfit options such as tops, bottoms, and shoes. The player can click on the pictograms to select the desired outfit. When a pictogram is clicked, it gets a border to indicate it is selected, and if another pictogram was previously selected, it becomes unselected. The game can be played on a smartphone device. Note that in the code, replace `top1.png`, `top2.png`, `top3.png`, `bottom1.png`, `bottom2.png`, `bottom3.png`, `shoes1.png`, `shoes2.png`, `shoes3.png` with the actual image file names you want to use for the game.