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

No:44582

←

Prev Next

→

Merge Game
Developer User19422｜Date and time 24/2/18 14:29:54
Build time 5.458 sec｜Game capacity 1.717KB｜

Script

html

Merge Pictogram Game

Click on two different pictograms to merge them!

←

Prev　Next

→ 　

Back　

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

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

``` html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Merge Pictogram Game</title>
<style>
    body { 
        font-family: Arial, sans-serif;
        text-align: center;
    }
    .container {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        max-width: 500px;
        margin: 20px auto;
    }
    .pictogram {
        width: 100px;
        height: 100px;
        margin: 10px;
        border: 2px solid black;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>Merge Pictogram Game</h1>
<p>Click on two different pictograms to merge them!</p>
<div class="container">
    <img class="pictogram" src="pictogram1.png">
    <img class="pictogram" src="pictogram2.png">
    <img class="pictogram" src="pictogram3.png">
    <img class="pictogram" src="pictogram4.png">
</div>
<script>
    const pictograms = document.querySelectorAll('.pictogram');
    pictograms.forEach(p => {
        p.addEventListener('click', mergePictograms);
    });
    
    function mergePictograms(event) {
        const clickedPictogram = event.target;
        clickedPictogram.remove();
        
        const remainingPictograms = document.querySelectorAll('.pictogram');
        if (remainingPictograms.length === 1) {
            const finalPictogram = remainingPictograms[0].getAttribute('src');
            displayFinalPictogram(finalPictogram);
        }
    }
    
    function displayFinalPictogram(src) {
        const finalContainer = document.querySelector('.container');
        finalContainer.innerHTML = `<img class="pictogram" src="${src}">`;
    }
</script>
</body>
</html>
```