Salin prompt ini ke Console pengembang kami untuk mencobanya sendiri!

Konten
PenggunaBuatkan saya aplikasi web lengkap sebagai satu file HTML. Aplikasi harus berisi game side-scrolling sederhana di mana saya menggunakan WASD untuk bergerak. Saat bergerak di dunia, kadang-kadang karakter/sprite akan menemukan kata-kata. Ketika sebuah kata ditemukan, pemain harus mengetik kata tersebut secepat mungkin dengan benar. Semakin cepat kata diketik dengan sukses, semakin banyak poin yang didapat pemain. Kita harus memiliki penghitung di kanan atas untuk melacak poin. Kata-kata harus acak dan sangat bervariasi untuk menjaga game tetap menarik.

Anda harus membuat situs web sangat estetis dan menggunakan Tailwind.

​
Contoh Output

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Game Ketik Side-Scrolling</title>
  </head>
  <body class="bg-gray-900 text-white">
    <div class="fixed top-4 right-4 text-2xl">
      Skor: <span id="score">0</span>
    </div>
    <div id="game" class="h-screen w-screen overflow-hidden relative">
      <div
        id="player"
        class="absolute bottom-10 left-10 w-8 h-8 bg-blue-500"
      ></div>
    </div>
    <div
      id="word-input"
      class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white text-black p-4 rounded hidden"
    >
      <input
        type="text"
        id="typed-word"
        class="border border-gray-300 rounded px-2 py-1 mb-2 w-full"
      />
      <button id="submit-word" class="bg-blue-500 text-white px-4 py-2 rounded">
        Kirim
      </button>
    </div>
    <script>
      const words = [
        'kemampuan',
        'bisa',
        'tentang',
        'atas',
        'terima',
        'menurut',
        'akun',
        'melintasi',
        'tindakan',
        'aktivitas',
        'sebenarnya',
        'alamat',
        'administrasi',
        'mengakui',
        'dewasa',
        'mempengaruhi',
        'setelah',
        'lagi',
        'melawan',
        'lembaga',
        'agen',
        'lalu',
        'setuju',
        'perjanjian',
        'depan',
        'udara',
        'semua',
        'mengizinkan',
        'hampir',
        'sendiri',
        'sepanjang',
        'sudah',
        'juga',
        'meskipun',
        'selalu',
        'Amerika',
        'antara',
        'jumlah',
        'analisis',
        'dan',
        'hewan',
        'lain',
        'jawaban',
        'apa pun',
        'siapa pun',
        'apa saja',
        'muncul',
        'terapkan',
        'pendekatan',
        'daerah',
        'berdebat',
        'lengan',
        'sekitar',
        'tiba',
        'seni',
        'artikel',
        'seniman',
        'sebagai',
        'tanya',
        'asumsikan',
        'di',
        'serang',
        'perhatian',
        'pengacara',
        'audiens',
        'penulis',
        'otoritas',
        'tersedia',
        'hindari',
        'jauh',
        'bayi',
        'kembali',
        'buruk',
        'tas',
        'bola',
        'bank',
        'bar',
        'dasar',
        'menjadi',
        'mengalahkan',
        'cantik',
        'karena',
        'menjadi',
        'tempat tidur',
        'sebelum',
        'mulai',
        'perilaku',
        'belakang',
        'percaya',
        'manfaat',
        'terbaik',
        'lebih baik',
        'antara',
        'melampaui',
        'besar',
        'tagihan',
        'miliar',
        'sedikit',
        'hitam',
        'darah',
        'biru',
        'papan',
        'tubuh',
        'buku',
        'lahir',
        'keduanya',
        'kotak',
        'anak laki-laki',
        'istirahat',
        'membawa',
        'saudara laki-laki',
        'anggaran',
        'membangun',
        'bangunan',
        'bisnis',
        'tapi',
        'membeli',
        'oleh',
        'panggilan',
        'kamera',
        'kampanye',
      ];

      let score = 0;
      let currentWord;
      let startTime;

      const game = document.getElementById('game');
      const player = document.getElementById('player');
      const wordInput = document.getElementById('word-input');
      const typedWord = document.getElementById('typed-word');
      const submitWord = document.getElementById('submit-word');
      const scoreDisplay = document.getElementById('score');

      let playerX = 10;
      let playerY = game.offsetHeight - 50;
      const speed = 5;

      function placeWord() {
        const word = document.createElement('div');
        word.textContent = words[Math.floor(Math.random() * words.length)];
        word.className = 'absolute text-2xl';
        word.style.left = `${game.offsetWidth + 10}px`;
        word.style.top = `${Math.random() * (game.offsetHeight - 50)}px`;
        game.appendChild(word);
        return word;
      }

      function checkCollision(word) {
        const playerRect = player.getBoundingClientRect();
        const wordRect = word.getBoundingClientRect();
        return !(
          playerRect.right < wordRect.left ||
          playerRect.left > wordRect.right ||
          playerRect.bottom < wordRect.top ||
          playerRect.top > wordRect.bottom
        );
      }

      function startInput(word) {
        currentWord = word.textContent;
        wordInput.style.display = 'block';
        typedWord.value = '';
        typedWord.focus();
        startTime = Date.now();
      }

      function endInput() {
        wordInput.style.display = 'none';
        const endTime = Date.now();
        const elapsedTime = endTime - startTime;
        const timeBonus = Math.max(2000 - elapsedTime, 0);
        score += Math.round(1000 + timeBonus);
        scoreDisplay.textContent = score;
      }

      function checkInput() {
        if (typedWord.value === currentWord) {
          endInput();
        }
      }

      function gameLoop() {
        playerY = Math.max(
          0,
          Math.min(playerY, game.offsetHeight - player.offsetHeight)
        );
        playerX = Math.max(
          0,
          Math.min(playerX, game.offsetWidth - player.offsetWidth)
        );
        player.style.top = `${playerY}px`;
        player.style.left = `${playerX}px`;

        const words = Array.from(
          document.querySelectorAll('#game > div:not(#player)')
        );
        words.forEach((word) => {
          const currentLeft = parseInt(word.style.left);
          word.style.left = `${currentLeft - speed}px`;
          if (checkCollision(word)) {
            startInput(word);
          }
          if (currentLeft < -word.offsetWidth) {
            word.remove();
          }
        });

        if (Math.random() < 0.01) {
          placeWord();
        }

        requestAnimationFrame(gameLoop);
      }

      document.addEventListener('keydown', (e) => {
        if (e.key === 'w') playerY -= speed;
        if (e.key === 'a') playerX -= speed;
        if (e.key === 's') playerY += speed;
        if (e.key === 'd') playerX += speed;
      });

      typedWord.addEventListener('input', checkInput);
      submitWord.addEventListener('click', checkInput);

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

​
Permintaan API

Claude 3 Opus akan segera hadir di Bedrock API
import anthropic

client = anthropic.Anthropic(
    # defaults to os.environ.get("ANTHROPIC_API_KEY")
    api_key="my_api_key",
)
message = client.messages.create(
    model="claude-3-opus-20240229",
    max_tokens=2000,
    temperature=0,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "text",
                    "text": "Buatkan saya aplikasi web lengkap sebagai satu file HTML. Aplikasi harus berisi game side-scrolling sederhana di mana saya menggunakan WASD untuk bergerak. Saat bergerak di dunia, kadang-kadang karakter/sprite akan menemukan kata-kata. Ketika sebuah kata ditemukan, pemain harus mengetik kata tersebut secepat mungkin dengan benar. Semakin cepat kata diketik dengan sukses, semakin banyak poin yang didapat pemain. Kita harus memiliki penghitung di kanan atas untuk melacak poin. Kata-kata harus acak dan sangat bervariasi untuk menjaga game tetap menarik.  \n  \nAnda harus membuat situs web sangat estetis dan menggunakan Tailwind."
                }
            ]
        }
    ]
)
print(message.content)
PerpustakaanCorporate clairvoyant