Tree maker you could get tree emojis on the side and drag them and create any type of tree any color's game

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

No:38450

←

Prev Next

→

Tree maker you could get tree emojis on the side a..ALL
Developer User17401｜Date and time 24/1/24 22:19:35
Build time 10.356 sec｜Game capacity 2.284KB｜

Script

Sure! I've created a simple game called "Tree Maker" implemented as a single HTML file. The game allows you to drag and create different types and colors of trees using emojis. It is optimized for smartphone operation. Here's the code:

🌲 🎄 🌳 🌴 🌿 🍃

You can copy this code into an HTML file, save it with a ".html" extension, and open it in any web browser on your smartphone. The game will allow you to drag the tree emojis (`🌲 🎄 🌳 🌴 🌿 🍃`) from the side and create any type of tree with any color on the screen by dropping them. Have fun playing with the Tree Maker game!

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Here's the code:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tree Maker Game</title>
    <style>
        #tree-maker {
            display: flex;
            flex-wrap: wrap;
            height: 100vh;
            align-content: flex-start;
            padding: 10px;
        }

.tree {
            font-size: 50px;
            padding: 10px;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="tree-maker">
        <span class="tree" draggable="true">🌲</span>
        <span class="tree" draggable="true">🎄</span>
        <span class="tree" draggable="true">🌳</span>
        <span class="tree" draggable="true">🌴</span>
        <span class="tree" draggable="true">🌿</span>
        <span class="tree" draggable="true">🍃</span>
    </div>

trees.forEach(tree => {
            tree.addEventListener('dragstart', dragStart);
            tree.addEventListener('dragend', dragEnd);
        });

function dragStart(event) {
            offsetX = event.clientX - event.target.getBoundingClientRect().left;
            offsetY = event.clientY - event.target.getBoundingClientRect().top;
        }

function dragEnd(event) {
            const tree = document.createElement('span');
            tree.className = 'tree';
            tree.innerHTML = event.target.innerHTML;
            tree.style.position = 'absolute';
            tree.style.left = event.clientX - offsetX + 'px';
            tree.style.top = event.clientY - offsetY + 'px';
            document.body.appendChild(tree);
        }
    </script>
</body>
</html>
```