`data/artifacts/1d4944290382/hf-qwen-coder-32b.html`

114 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 { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #e0e0e0; }
  canvas { border: 1px solid #000; }
  button { position: absolute; top: 10px; left: 10px; z-index: 10; }
  .counts { position: absolute; bottom: 10px; right: 10px; background: rgba(255,255,255,0.8); padding: 10px; border-radius: 5px; }
</style>
</head>
<body>
<canvas id="city"></canvas>
<button onclick="rotateView()">Rotate View</button>
<div class="counts" id="counts"></div>
<script>
const canvas = document.getElementById('city');
const ctx = canvas.getContext('2d');
const gridSize = 5;
const cellSize = 40;
let angle = 0;
const types = ['house', 'tree', 'road', 'shop'];
let grid = Array.from({length: gridSize}, () => Array(gridSize).fill(0));

function drawIsometric(x, y, type) {
  const dx = (x - y) * cellSize / 2;
  const dy = (x + y) * cellSize / 4;
  ctx.save();
  ctx.translate(canvas.width/2 + dx, canvas.height/3 + dy);
  ctx.rotate(angle);
  switch(type) {
    case 'house': 
      ctx.fillStyle = '#8B4513';
      ctx.fillRect(-cellSize/2, -cellSize/2, cellSize, cellSize);
      ctx.beginPath();
      ctx.moveTo(-cellSize/2, -cellSize/2);
      ctx.lineTo(0, -cellSize*0.75);
      ctx.lineTo(cellSize/2, -cellSize/2);
      ctx.fillStyle = '#A0522D';
      ctx.fill();
      break;
    case 'tree': 
      ctx.fillStyle = '#228B22';
      ctx.fillRect(-cellSize/4, cellSize/6, cellSize/2, cellSize*0.75);
      ctx.beginPath();
      ctx.arc(0, -cellSize/3, cellSize/2, 0, Math.PI * 2);
      ctx.fillStyle = '#3CB371';
      ctx.fill();
      break;
    case 'road': 
      ctx.fillStyle = '#808080';
      ctx.fillRect(-cellSize/2, -cellSize/4, cellSize, cellSize/2);
      break;
    case 'shop': 
      ctx.fillStyle = '#FFD700';
      ctx.fillRect(-cellSize/2, -cellSize/2, cellSize, cellSize);
      ctx.beginPath();
      ctx.moveTo(-cellSize/2, -cellSize/2);
      ctx.lineTo(0, -cellSize*1.5);
      ctx.lineTo(cellSize/2, -cellSize/2);
      ctx.fillStyle = '#FFA500';
      ctx.fill();
      break;
  }
  ctx.restore();
}

function drawGrid() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let y = 0; y < gridSize; y++) {
    for (let x = 0; x < gridSize; x++) {
      drawIsometric(x, y, types[grid[y][x]]);
    }
  }
  updateCounts();
}

function updateCounts() {
  const counts = types.map(() => 0);
  grid.forEach(row => row.forEach(cell => counts[cell]++));
  document.getElementById('counts').innerHTML = types.map((type, i) => `${type}: ${counts[i]}`).join('<br>');
}

canvas.width = cellSize * gridSize;
canvas.height = cellSize * gridSize;

canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  for (let cy = 0; cy < gridSize; cy++) {
    for (let cx = 0; cx < gridSize; cx++) {
      const dx = (cx - cy) * cellSize / 2;
      const dy = (cx + cy) * cellSize / 4;
      if (Math.abs(x - (canvas.width/2 + dx)) < cellSize/2 && Math.abs(y - (canvas.height/3 + dy)) < cellSize/2) {
        grid[cy][cx] = (grid[cy][cx] + 1) % types.length;
        drawGrid();
        return;
      }
    }
  }
});

function rotateView() {
  angle += Math.PI / 4;
  drawGrid();
}

drawGrid();
</script>
</body>
</html>