우주 키 입력 - Anthropic

직접 시도해 보려면 이 프롬프트를 개발자 Console에 복사하세요!

	내용
사용자	단일 HTML 파일로 완전한 웹 앱을 작성해 주세요. 이 앱에는 WASD를 사용하여 이동할 수 있는 간단한 사이드 스크롤 게임이 포함되어야 합니다. 세계를 돌아다니다 보면 가끔 캐릭터/스프라이트가 단어를 만나게 됩니다. 단어를 만나면 플레이어는 가능한 한 빨리 정확하게 단어를 입력해야 합니다. 단어를 성공적으로 입력하는 속도가 빠를수록 플레이어는 더 많은 점수를 얻습니다. 우리는 오른쪽 상단에 점수를 추적하는 카운터를 두어야 합니다. 게임을 흥미롭게 유지하기 위해 단어는 무작위로 매우 다양해야 합니다. 웹사이트를 매우 심미적으로 만들고 Tailwind를 사용해야 합니다.

내용

사용자

단일 HTML 파일로 완전한 웹 앱을 작성해 주세요. 이 앱에는 WASD를 사용하여 이동할 수 있는 간단한 사이드 스크롤 게임이 포함되어야 합니다. 세계를 돌아다니다 보면 가끔 캐릭터/스프라이트가 단어를 만나게 됩니다. 단어를 만나면 플레이어는 가능한 한 빨리 정확하게 단어를 입력해야 합니다. 단어를 성공적으로 입력하는 속도가 빠를수록 플레이어는 더 많은 점수를 얻습니다. 우리는 오른쪽 상단에 점수를 추적하는 카운터를 두어야 합니다. 게임을 흥미롭게 유지하기 위해 단어는 무작위로 매우 다양해야 합니다.

웹사이트를 매우 심미적으로 만들고 Tailwind를 사용해야 합니다.

출력 예시

<!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>사이드 스크롤 타이핑 게임</title>
  </head>
  <body class="bg-gray-900 text-white">
    <div class="fixed top-4 right-4 text-2xl">
      점수: <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">
        제출
      </button>
    </div>
    <script>
      const words = [
        '능력',
        '가능한',
        '약',
        '위',
        '받아들이다',
        '따르면',
        '계정',
        '건너서',
        '행동',
        '활동',
        '실제로',
        '주소',
        '관리',
        '인정하다',
        '성인',
        '영향을 미치다',
        '후',
        '다시',
        '반대',
        '기관',
        '에이전트',
        '전',
        '동의하다',
        '계약',
        '앞서',
        '공기',
        '모두',
        '허용하다',
        '거의',
        '혼자',
        '따라',
        '이미',
        '또한',
        '비록',
        '항상',
        '미국인',
        '중',
        '양',
        '분석',
        '그리고',
        '동물',
        '또 다른',
        '대답',
        '어떤',
        '누구나',
        '무엇이든',
        '나타나다',
        '적용하다',
        '접근',
        '지역',
        '주장하다',
        '팔',
        '주위에',
        '도착하다',
        '예술',
        '기사',
        '예술가',
        '~처럼',
        '묻다',
        '가정하다',
        '~에',
        '공격',
        '주의',
        '변호사',
        '청중',
        '저자',
        '권위',
        '이용 가능한',
        '피하다',
        '멀리',
        '아기',
        '뒤로',
        '나쁜',
        '가방',
        '공',
        '은행',
        '바',
        '기초',
        '이다',
        '이기다',
        '아름다운',
        '왜냐하면',
        '되다',
        '침대',
        '전에',
        '시작하다',
        '행동',
        '뒤에',
        '믿다',
        '이익',
        '최고의',
        '더 나은',
        '사이에',
        '넘어서',
        '큰',
        '법안',
        '십억',
        '조금',
        '검은색',
        '피',
        '파란색',
        '보드',
        '몸',
        '책',
        '태어난',
        '둘 다',
        '상자',
        '소년',
        '깨다',
        '가져오다',
        '형제',
        '예산',
        '짓다',
        '건물',
        '사업',
        '그러나',
        '사다',
        '~에 의해',
        '전화하다',
        '카메라',
        '캠페인',
      ];

      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>

API 요청

Claude 3 Opus가 곧 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": "단일 HTML 파일로 완전한 웹 앱을 작성해 주세요. 이 앱에는 WASD를 사용하여 이동할 수 있는 간단한 사이드 스크롤 게임이 포함되어야 합니다. 세계를 돌아다니다 보면 가끔 캐릭터/스프라이트가 단어를 만나게 됩니다. 단어를 만나면 플레이어는 가능한 한 빨리 정확하게 단어를 입력해야 합니다. 단어를 성공적으로 입력하는 속도가 빠를수록 플레이어는 더 많은 점수를 얻습니다. 우리는 오른쪽 상단에 점수를 추적하는 카운터를 두어야 합니다. 게임을 흥미롭게 유지하기 위해 단어는 무작위로 매우 다양해야 합니다.  \n  \n웹사이트를 매우 심미적으로 만들고 Tailwind를 사용해야 합니다."
                }
            ]
        }
    ]
)
print(message.content)

프롬프트 라이브러리

​출력 예시

​API 요청

출력 예시

API 요청