프롬프트 라이브러리
우주 키보드
사이드 스크롤 게임플레이와 Tailwind CSS 스타일링을 특징으로 하는 대화형 속도 타이핑 게임을 단일 HTML 파일로 생성합니다.
직접 시도해 보려면 이 프롬프트를 개발자 Console에 복사하세요!
내용 | |
---|---|
사용자 | 단일 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>