키움 홈런 챌린지

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Recreate a responsive 2D browser game titled "홈런 퀴즈" (Home Run Quiz), using a full-screen canvas with HTML overlay UI. The game is an educational baseball quiz: the player answers five randomly selected fifth-grade English multiple-choice questions, and each answer becomes a baseball hit whose distance depends on correctness and speed.

Visual presentation: use a simple flat/vector illustration with no sprites or textures. The full-screen field has a dark navy-to-teal vertical gradient sky, a large pale yellow circular sun high on the right, and a row of alternating dark blue rounded hill/silhouette shapes near the horizon. The lower half is green grass. A lighter green triangular outfield perspective points from the center horizon toward the bottom corners, with a brown/orange triangular dirt base path extending from the center horizon to the bottom edge. Put a white home plate diamond near the lower center and small white base/field markings on either side. At home plate, draw a minimal batter slightly left of center: dark navy circular head, red rectangular torso, peach horizontal arms, and a thick dark bat angled upward toward the right. Draw a small white baseball just in front of the batter. Above the batter, display the instruction text "문제를 풀고 힘껏 휘두르세요!" in bold white Korean. Keep the style clean, colorful, geometric, and arcade-like.

Overlay HUD: at the top center, show four dark translucent rounded pills with white text: "이닝 1/5" (round), "점수 0" (score), "최장 비거리 0m" (best/longest distance), and "연속 정답 0" (current correct streak). Make the HUD responsive and hide the third pill on very narrow screens. At the bottom center show the hint "정답을 고르면 타격합니다 · PC: 1~4 키" in small semi-transparent white text.

Initial/menu state: center a dark translucent navy quiz card with rounded corners, subtle light border, shadow, and white centered text. It contains the large title "홈런 퀴즈", the subtitle "5학년 영어 문제를 빨리 풀수록 공이 더 멀리 날아갑니다!", the placeholder "시작 버튼을 눌러 타석에 들어가세요.", and a full-width orange "게임 시작" button. On starting, initialize round=1, score=0, best distance=0, streak=0 and total distance=0, then show the first question.

Question state: keep the central card (responsive width, about 620px maximum) with the title/subtitle and show one question in large bold type, followed by four answer buttons in a 2-column grid. Buttons are blue with rounded corners and white bold text, labeled "1. ..." through "4. ..."; they should work with pointer/touch input and keyboard keys 1, 2, 3, and 4. Use this exact pool of ten possible questions, selecting one at random for each of the five rounds (questions may repeat):
1. "What is the past tense of “go”?" answers ["goed","went","gone","going"], correct "went".
2. "Choose the correct sentence." answers ["She play soccer.","She plays soccer.","She playing soccer.","She played soccer every day now."], correct "She plays soccer.".
3. "What is the opposite of “quiet”?" answers ["loud","slow","small","kind"], correct "loud".
4. "Which word means “not sad”?" answers ["hungry","happy","heavy","healthy"], correct "happy".
5. "I have lived here ___ 2020." answers ["for","at","since","during"], correct "since".
6. "What is the comparative form of “fast”?" answers ["fastest","more fast","faster","fastly"], correct "faster".
7. "Which sentence is in the future tense?" answers ["I visited my aunt.","I am reading now.","I will study tomorrow.","I study every day."], correct "I will study tomorrow.".
8. "How many days are there in a week?" answers ["five","six","seven","eight"], correct "seven".
9. "Choose the correct question." answers ["Where you live?","Where do you live?","Where does you live?","Where living you?"], correct "Where do you live?".
10. "What does “borrow” mean?" answers ["to give forever","to take and return later","to break something","to buy something"], correct "to take and return later".
Shuffle the four answer choices every time, while preserving the correct answer mapping.

Timing and scoring: start a timer when each question appears. The nominal time limit is 6 seconds; when an answer is selected, calculate elapsed time capped at 6 seconds, speed = max(0.12, 1 - elapsed/6). For a correct answer, increment the streak and calculate distance = round(95 + speed*225 + min(streak,5)*9). Add distance + streak*20 to score, update best distance, and add distance to total distance. Show the Korean feedback "정답! X.XX초 만에 쳐서 Y m!" (with the actual elapsed seconds and distance) in green. For an incorrect answer, reset streak to 0, calculate distance = round(25 + speed*45), add only that distance to score and total distance, and show "아쉬워요! 그래도 Ym 날아갔습니다." in light red. There is no automatic timeout action; the player answers by clicking/tapping or using 1–4.

After an answer, disable/hide the answer choices and switch to a hit state. Animate the white baseball from its starting position near the batter at roughly (center+5, 69% of screen height) toward the upper/right field. The endpoint should be farther right as distance increases, approximately center + (distance/360)*90% of viewport width, with a slightly higher endpoint for longer hits. Move it along a curved arc using a sine-shaped vertical lift and draw a faint white motion trail behind it. When the ball reaches the endpoint, show the distance in large bold text around the upper-middle of the field: correct hits in pale yellow, incorrect hits in pale red. During this hit state show an orange full-width "다음 타석" button on the card unless this was round 5. Allow Enter to activate the next-at-bat action.

Rounds: after rounds 1–4, the next button increments the round and presents another question. After the fifth answer, do not show a next button; after the hit animation finishes (about 1.2 seconds), end the game. The result overlay replaces the question card and says "경기 종료!", displays "총 비거리 X m" prominently in yellow, then "최장 타구 Ym · 최종 점수 Z점", with an orange "다시 플레이" button. Restarting begins a fresh five-round game and resets all displayed values. Space should also start the game from the initial menu. Keep the implementation touch-friendly, prevent page scrolling, and scale the canvas to the viewport/device pixel ratio while retaining the same composition.