Village to be built in 2's game

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

No:15614

105

←

Prev Next

→

Village to be built in 2
Developer SkyllerForce｜Date and time 23/9/10 6:11:40
Build time 20.084 sec｜Game capacity 2.964KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Construction du village</title>
    <style>
        body {
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

#game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

#village {
            width: 200px;
            height: 200px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 5px;
            background-color: #99ccff;
            border-radius: 10px;
            padding: 10px;
        }

.building {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

.building:hover {
            transform: scale(1.1);
        }

.tree {
            background-image: url('tree.png');
            background-repeat: no-repeat;
            background-size: cover;
        }

.house {
            background-image: url('house.png');
            background-repeat: no-repeat;
            background-size: cover;
        }

.shop {
            background-image: url('shop.png');
            background-repeat: no-repeat;
            background-size: cover;
        }

.road {
            background-color: #7c7c7c;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="village">
            <div class="building" id="tree"></div>
            <div class="building" id="house"></div>
            <div class="building" id="shop"></div>
            <div class="building" id="road"></div>
            <div class="building" id="road"></div>
            <div class="building" id="road"></div>
            <div class="building" id="road"></div>
            <div class="building" id="road"></div>
            <div class="building" id="road"></div>
            <div class="building" id="road"></div>
            <div class="building" id="road"></div>
            <div class="building" id="road"></div>
            <div class="building" id="road"></div>
            <div class="building" id="road"></div>
            <div class="building" id="road"></div>
            <div class="building" id="road"></div>
        </div>
    </div>
    <script>
        const village = document.getElementById('village');
        const buildings = document.getElementsByClassName('building');

for (let i = 0; i < buildings.length; i++) {
            buildings[i].addEventListener('click', function() {
                const selectedBuilding = this.id;
                village.style.cursor = `url(${selectedBuilding}.png), auto`;
            });
        }
    </script>
</body>
</html>