`data/artifacts/1d4944290382/qwen3-14b.html`

177 lines
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tiny Isometric City Builder</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #222;
      color: #fff;
      font-family: sans-serif;
    }
    canvas {
      display: block;
    }
    #toolbar {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0,0,0,0.5);
      padding: 10px;
      border-radius: 5px;
    }
    #toolbar button {
      margin: 5px;
      padding: 5px 10px;
      cursor: pointer;
      background: #444;
      border: none;
      color: #fff;
      border-radius: 3px;
    }
    #toolbar button:hover {
      background: #666;
    }
    #counts {
      position: absolute;
      bottom: 10px;
      left: 10px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div id="toolbar">
    <button id="rotateView">Rotate View</button>
    <button id="house">House</button>
    <button id="tree">Tree</button>
    <button id="road">Road</button>
    <button id="shop">Shop</button>
  </div>
  <div id="counts">
    Houses: <span id="countHouse">0</span> |
    Trees: <span id="countTree">0</span> |
    Roads: <span id="countRoad">0</span> |
    Shops: <span id="countShop">0</span>
  </div>
  <canvas id="gameCanvas"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const toolbar = document.getElementById('toolbar');
    const countHouse = document.getElementById('countHouse');
    const countTree = document.getElementById('countTree');
    const countRoad = document.getElementById('countRoad');
    const countShop = document.getElementById('countShop');

    const tileSize = 40;
    const mapSize = 16;
    const isometricTileSize = 40;
    const isometricMapWidth = mapSize * isometricTileSize;
    const isometricMapHeight = mapSize * isometricTileSize;
    let currentBuilding = 'house';
    let rotation = 0;

    canvas.width = isometricMapWidth;
    canvas.height = isometricMapHeight;

    const map = Array.from({ length: mapSize }, () => Array(mapSize).fill(null));
    const buildingColors = {
      house: '#6b46c1',
      tree: '#228b22',
      road: '#808080',
      shop: '#ff6347'
    };

    function drawIsometricTile(x, y, color) {
      const px = (x - y) * isometricTileSize / 2;
      const py = (x + y) * isometricTileSize / 4;
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.moveTo(px, py);
      ctx.lineTo(px + isometricTileSize / 2, py + isometricTileSize / 2);
      ctx.lineTo(px + isometricTileSize / 2, py + isometricTileSize);
      ctx.lineTo(px - isometricTileSize / 2, py + isometricTileSize);
      ctx.lineTo(px - isometricTileSize / 2, py + isometricTileSize / 2);
      ctx.closePath();
      ctx.fill();
    }

    function drawMap() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let y = 0; y < mapSize; y++) {
        for (let x = 0; x < mapSize; x++) {
          const tile = map[y][x];
          if (tile) {
            drawIsometricTile(x, y, buildingColors[tile]);
          }
        }
      }
    }

    function getTileFromMouse(mx, my) {
      for (let y = 0; y < mapSize; y++) {
        for (let x = 0; x < mapSize; x++) {
          const px = (x - y) * isometricTileSize / 2;
          const py = (x + y) * isometricTileSize / 4;
          const tileX = px + isometricTileSize / 2;
          const tileY = py + isometricTileSize / 2;
          if (mx >= tileX - isometricTileSize / 2 && mx <= tileX + isometricTileSize / 2 &&
              my >= tileY - isometricTileSize / 2 && my <= tileY + isometricTileSize / 2) {
            return { x, y };
          }
        }
      }
      return null;
    }

    function rotateMap() {
      rotation = (rotation + 1) % 4;
      canvas.width = isometricMapWidth;
      canvas.height = isometricMapHeight;
      drawMap();
    }

    function updateCounts() {
      let houses = 0, trees = 0, roads = 0, shops = 0;
      for (let y = 0; y < mapSize; y++) {
        for (let x = 0; x < mapSize; x++) {
          const tile = map[y][x];
          if (tile === 'house') houses++;
          else if (tile === 'tree') trees++;
          else if (tile === 'road') roads++;
          else if (tile === 'shop') shops++;
        }
      }
      countHouse.textContent = houses;
      countTree.textContent = trees;
      countRoad.textContent = roads;
      countShop.textContent = shops;
    }

    canvas.addEventListener('click', function (e) {
      const rect = canvas.getBoundingClientRect();
      const mx = e.clientX - rect.left;
      const my = e.clientY - rect.top;
      const tile = getTileFromMouse(mx, my);
      if (tile && tile.x >= 0 && tile.x < mapSize && tile.y >= 0 && tile.y < mapSize) {
        map[tile.y][tile.x] = currentBuilding;
        drawMap();
        updateCounts();
      }
    });

    document.getElementById('house').addEventListener('click', () => currentBuilding = 'house');
    document.getElementById('tree').addEventListener('click', () => currentBuilding = 'tree');
    document.getElementById('road').addEventListener('click', () => currentBuilding = 'road');
    document.getElementById('shop').addEventListener('click', () => currentBuilding = 'shop');
    document.getElementById('rotateView').addEventListener('click', rotateMap);

    drawMap();
    updateCounts();
  </script>
</body>
</html>