Claude Opus 3

AnthropicMarch 2024

What it wrote

<!DOCTYPE html>
<html>
<head>
  <title>Super Awesome Incremental</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f0f0f0;
    }
    .resource {
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      display: inline-block;
      margin: 10px;
      padding: 20px;
      min-width: 150px;
    }
    .resource h2 {
      margin-top: 0;
    }
    .button {
      background-color: #007BFF;
      border: none;
      border-radius: 5px;
      color: white;
      cursor: pointer;
      font-size: 16px;
      margin: 10px;
      padding: 10px 20px;
    }
    .button:hover {
      background-color: #0056b3;
    }
    #game-container {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Super Awesome Incremental</h1>
  <div id="game-container"></div>

  <script>
    const gameData = {
      points: 0,
      pointsPerClick: 1,
      pointsPerSecond: 0,
      upgrades: [
        { id: 'clicker', name: 'Super Clicker', cost: 10, multiplier: 2, quantity: 0 },
        { id: 'generator', name: 'Point Generator', cost: 25, pointsPerSecond: 1, quantity: 0 }
      ]
    };

    const gameContainer = document.getElementById('game-container');

    function updateGame() {
      gameContainer.innerHTML = `
        <div class="resource">
          <h2>Points: ${gameData.points.toFixed(0)}</h2>
          <button class="button" onclick="incrementPoints()">Click Me!</button>
        </div>
        ${gameData.upgrades.map(upgrade => `
          <div class="resource">
            <h2>${upgrade.name} (${upgrade.quantity})</h2>
            <p>Cost: ${upgrade.cost} points</p>
            <button class="button" onclick="buyUpgrade('${upgrade.id}')">Buy</button>
          </div>
        `).join('')}
      `;
    }

    function incrementPoints() {
      gameData.points += gameData.pointsPerClick;
      updateGame();
    }

    function buyUpgrade(upgradeId) {
      const upgrade = gameData.upgrades.find(u => u.id === upgradeId);
      if (gameData.points >= upgrade.cost) {
        gameData.points -= upgrade.cost;
        upgrade.quantity++;
        upgrade.cost = Math.round(upgrade.cost * 1.15);
        if (upgrade.multiplier) {
          gameData.pointsPerClick *= upgrade.multiplier;
        }
        if (upgrade.pointsPerSecond) {
          gameData.pointsPerSecond += upgrade.pointsPerSecond;
        }
        updateGame();
      }
    }

    function gameLoop() {
      gameData.points += gameData.pointsPerSecond;
      updateGame();
    }

    updateGame();
    setInterval(gameLoop, 1000);
  </script>
</body>
</html>