`data/artifacts/1d4944290382/qwen25-7b.html`

77 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Isometric City Builder</title>
    <style>
        body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
        canvas { border: 1px solid #000; }
    </style>
</head>
<body>
    <canvas id="city" width="400" height="300"></canvas>
    <div style="margin-top: 20px;">
        <button onclick="rotateView()">Rotate View</button>
        House: <span id="houseCount">0</span>, Tree: <span id="treeCount">0</span>, Road: <span id="roadCount">0</span>, Shop: <span id="shopCount">0</span>
    </div>
    <script>
        const canvas = document.getElementById('city');
        const ctx = canvas.getContext('2d');
        const tileWidth = 50;
        const tileHeight = 28.864; // 90°/360 * tileWidth
        let viewAngle = Math.PI / 4;
        let buildingCount = { house: 0, tree: 0, road: 0, shop: 0 };
        
        function rotateView() {
            viewAngle += Math.PI / 8;
            if (viewAngle > Math.PI * 2) viewAngle -= Math.PI * 2;
        }

        function drawTile(x, y, type) {
            ctx.save();
            ctx.translate(canvas.width / 2 + x * tileWidth * Math.cos(viewAngle) - y * tileHeight * Math.sin(viewAngle), canvas.height / 2 - x * tileWidth * Math.sin(viewAngle) - y * tileHeight * Math.cos(viewAngle));
            ctx.rotate(-viewAngle);
            ctx.beginPath();
            switch (type) {
                case 'house':
                    ctx.fillStyle = '#6f42c1';
                    break;
                case 'tree':
                    ctx.fillStyle = '#2e8b57';
                    break;
                case 'road':
                    ctx.fillStyle = '#9a9a9a';
                    break;
                case 'shop':
                    ctx.fillStyle = '#ff6347';
                    break;
            }
            ctx.rect(-tileWidth / 2, -tileHeight / 2, tileWidth, tileHeight);
            ctx.fill();
            ctx.restore();
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let x = 0; x < 10; x++) {
                for (let y = 0; y < 10; y++) {
                    let type = Math.floor(Math.random() * 4);
                    buildingCount[Object.keys(buildingCount)[type]]++;
                    drawTile(x, y, Object.keys(buildingCount)[type]);
                }
            }
        }

        function updateCounts() {
            document.getElementById('houseCount').textContent = buildingCount.house;
            document.getElementById('treeCount').textContent = buildingCount.tree;
            document.getElementById('roadCount').textContent = buildingCount.road;
            document.getElementById('shopCount').textContent = buildingCount.shop;
        }

        setInterval(draw, 100);
        updateCounts();
    </script>
</body>
</html>