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

No:22425

Put stuff together to make stuff You can use The s..ALL
Developer User7456｜Date and time 23/10/22 15:05:41
Build time 48.963 sec｜Game capacity 3.421KB｜

Script

Sure! Here's a simple game that you can play as a finished game using pictograms. The goal of the game is to combine different elements to create new ones.

Element Combiner Game

Drag and drop elements to combine them!

Inventory:

In this game, you'll find two initial elements, water and fire, represented by pictograms. You can drag and drop these elements to the game area to combine them. When you combine water and fire, it will create stone, which will be added to your inventory. You can see your inventory below the game area. Please make sure to replace the following image filenames with your own image files or use appropriate pictogram images: - water.png - fire.png - stone.png Additionally, you can customize the game's styling and add more elements by extending the `elements` array in the JavaScript code.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's a simple game that you can play as a finished game using pictograms. The goal of the game is to combine different elements to create new ones.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Element Combiner Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        img {
            width: 100px;
            height: 100px;
            margin: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Element Combiner Game</h1>
    <p>Drag and drop elements to combine them!</p>
    
    <div id="gameArea">
        <img src="water.png" id="water" draggable="true" ondragstart="drag(event)">
        <img src="fire.png" id="fire" draggable="true" ondragstart="drag(event)">
    </div>

<h2>Inventory:</h2>
    <div id="inventory"></div>

// Game logic
        const inventory = [];

function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

function allowDrop(ev) {
            ev.preventDefault();
        }

function drop(ev) {
            ev.preventDefault();
            const elementId = ev.dataTransfer.getData("text");
            const draggedElement = elements.find(element => element.id === elementId);
            if (draggedElement) {
                inventory.push(draggedElement);
                ev.target.appendChild(document.getElementById(elementId));
                combineElements();
            }
        }

function combineElements() {
            if (inventory.length >= 2) {
                const element1 = inventory[inventory.length - 1];
                const element2 = inventory[inventory.length - 2];

if (element1.name === "Water" && element2.name === "Fire") {
                    createNewElement(elements[2]); // Stone
                    inventory.splice(-2); // Remove used elements from inventory
                }
            }
        }

function createNewElement(newElement) {
            const resultElement = document.createElement("img");
            resultElement.src = newElement.image;
            resultElement.alt = newElement.name;
            resultElement.draggable = true;
            resultElement.ondragstart = drag;
            document.getElementById("inventory").appendChild(resultElement);
            inventory.push(newElement);
            document.getElementById("result").innerText = `You created ${newElement.name}!`;
        }
    </script>
</body>
</html>
```

Please make sure to replace the following image filenames with your own image files or use appropriate pictogram images:

- water.png
- fire.png
- stone.png

Additionally, you can customize the game's styling and add more elements by extending the `elements` array in the JavaScript code.