젠프레소 바이브 코딩 열기 ↗

오늘의 요청

글을 옮겨 치지 말고 「복사」 버튼을 쓴다. 색 글자는 보기 쉽게 표시한 것이다. 주황은 개념어, 파랑은 ⚙ 슬라이더다.

1부 · 디저트 합체소

프로젝트 이름: 디저트 합체소 · 단계마다 같은 프로젝트에 이어서 붙여 넣는다.

질문하지 말고 바로 HTML 파일 하나로 만들어 줘. 코드는 짧게, 물리는 matter-js 0.19.0(cdn.jsdelivr.net).
Canvas에 위가 열린 상자를 그리고, 위쪽 조준선이 마우스·손가락을 따라 좌우로 움직여(← → 키도).
클릭·탭·Space를 누르면 조준선 자리에서 공이 떨어져 튕기고 차곡차곡 쌓여.
중력·튕김·공 크기는 맨 위 상수(짧은 한글 주석)로 두고, 구석 ⚙ 버튼으로 여는 작은 「조절판」(처음엔 닫힘)에 슬라이더로도 넣어 바로 바뀌게 해 줘. 조절판을 만질 땐 공이 안 떨어지게.

이어서, 같은 단계 공 두 개가 닿으면 둘이 사라지고 그 자리에 한 단계 큰 공 하나가 생기게 해 줘.
단계 목록은 단계마다 다른 색 9가지를 담은 배열로 두고, 처음엔 5단계까지만 써. 단계가 오를수록 공이 「커지는 비율」만큼 커져.
떨어뜨릴 공은 작은 1~3단계 중에서 무작위로 고르고, 조준선에 미리 보여 줘.
한 공이 한꺼번에 두 번 합쳐지지 않게 하고, 마지막 단계끼리는 더 안 합쳐져.
「단계 수」(3~9)·「커지는 비율」은 맨 위 상수(한글 주석)로 두고, ⚙ 조절판에 슬라이더로 추가해 줘(앞 슬라이더는 그대로).

이어서, 공을 귀여운 디저트 그림으로 바꿔 줘. 외부 이미지 없이 Canvas 코드로 그리고, 부딪히는 모양은 원 그대로 둬.
단계는 9개로: 별사탕 → 마카롱 → 푸딩 → 도넛 → 붕어빵 → 크루아상 → 컵케이크 → 딸기 케이크 → 3단 웨딩 케이크.
디저트마다 그리기 함수를 하나씩 두고, 모두 눈·입·볼터치를 그려 줘.
색은 맨 위 팔레트 변수(파스텔)에서 가져와. 디저트 목록 배열에 한 줄(이름·색·그리기 함수)을 더하면 새 디저트가 생기게.
화면 위에 다음에 떨어질 디저트 이름도 보여 줘.
⚙ 조절판에 「팔레트」(파스텔·초코·민트)와 「표정」(웃음·윙크·놀람) 고르기를 추가해 줘.

이어서, 게임처럼 마무리해 줘.
상태를 타이틀·플레이·결과 3개로 나눠: 타이틀(「디저트 합체소」·「시작하기」) → 플레이 → 결과(점수·최고 점수·「다시 하기」). 최고 점수는 저장하지 말고 페이지를 연 동안만 기억해.
합칠 때마다 점수가 오르고 화면 위에 보여.
상자 위쪽에 눈에 잘 띄는 점선을 그려. 매 프레임 그 점선보다 위에 걸친 디저트가 있으면 시간을 재고, 2초가 넘으면 결과 화면으로 넘어가.
합칠 때 그 자리에 반짝이 파티클이 터지고 「+점수」 글자가 떠올라. 합체 소리는 Web Audio 오실레이터로 코드에서 만들어 줘(큰 디저트일수록 낮은 음).
점수 배율·파티클 수·파티클 색·소리 높낮이는 맨 위 상수(한글 주석)로 두고, ⚙ 조절판에 슬라이더로 추가해 줘.

이어서, 상자 위쪽 점선이 안 보이고 디저트가 상자 밖까지 넘쳐도 결과 화면이 안 떠. 매 프레임 도는 게임 루프 안에서 점선을 그리고, 같은 루프에서 점선보다 위에 걸친 디저트가 있으면 시간을 재서 2초가 넘으면 결과 화면(점수·최고 점수·「다시 하기」)을 띄워 줘. 함수만 만들지 말고 루프에서 실제로 불러 줘. 다른 기능은 그대로 둬.

2부 · 젤리빈 레이스

새 프로젝트 이름: 젤리빈 레이스 · 단계마다 같은 프로젝트에 이어서 붙여 넣는다.

질문하지 말고 바로 HTML 파일 하나로 만들어 줘. 「젤리빈 레이스」 3D 무대만. 코드는 짧게.
three.js는 importmap으로 three@0.160.0(cdn.jsdelivr.net)을 module 스크립트보다 먼저 두고, three 본체만 써 줘(addons 없이).
창 전체 캔버스(창 크기에 맞춤), 하늘색 배경, 길게 뻗은 파스텔 트랙, 출발점에 노란 젤리빈 캐릭터(캡슐 + 눈 두 개).
카메라는 캐릭터 뒤 위에서 캐릭터를 바라보게. 밝은 해(방향광) + 반구광, 캐릭터 그림자가 트랙에 보이게. 계속 다시 그려 줘.
카메라 높이·좌우 각도·빛 방향은 맨 위 상수(한국어 주석)로, ⚙ 버튼으로 여는 「조절판」(처음엔 닫힘)에 슬라이더로도.
다 쓴 뒤 코드를 다시 읽고 빠진 함수 인자·NaN·오타를 고쳐 줘.

이어서, 캐릭터가 트랙 위를 달리고 점프하게 해 줘.
방향키·WASD로 앞뒤좌우 이동(▲ = 트랙 먼 쪽), Space로 점프 — 내려오면 트랙 위에 착지. 트랙 밖으로 떨어지면 출발점으로.
키는 window에서 받고 방향키·Space 기본 동작(스크롤)은 막아 줘. 휴대폰은 화면 아래 버튼(◀ ▲ ▼ ▶, 점프)으로.
카메라는 캐릭터 뒤 위에서 조금 늦게 부드럽게 따라와(매 프레임 목표 위치로 일정 비율씩 다가가기 = lerp). 해와 그림자도 캐릭터를 따라가게.
1단계 카메라 높이·좌우 각도·빛 방향 슬라이더도 그대로 통하게.
새 숫자는 맨 위 상수로(한국어 주석): 달리기 속도, 점프 높이, 따라오는 부드러움. ⚙ 조절판에 슬라이더로도 더해 줘.
다 쓴 뒤 코드를 다시 읽고 빠진 함수 인자·NaN·오타를 고쳐 줘.

이어서, 트랙에 장애물을 넣어 줘.
굴러오는 공: 트랙 먼 쪽에서 캐릭터 쪽으로 데굴데굴 굴러오고, 트랙 끝을 지나면 다시 먼 쪽에서 출발. 여러 개.
도는 막대: 트랙 위 낮은 높이(점프로 넘을 수 있게)에서 수평으로 빙글빙글 도는 막대. 여러 개를 일정 간격으로 반복 배치.
캐릭터가 장애물에 닿으면 반대쪽으로 크게 튕겨 나가고(살짝 위로 뜨며) 잠깐 깜빡여. 충돌은 거리로 간단히(공 = 중심까지, 막대 = 막대 선분까지).
새 숫자는 맨 위 상수로(한국어 주석): 장애물 수, 장애물 속도, 장애물 크기. ⚙ 조절판에 슬라이더로도(움직이면 바로 다시 배치).
달리기·점프·카메라·기존 슬라이더는 그대로. 다 쓴 뒤 코드를 다시 읽고 빠진 함수 인자·NaN·오타를 고쳐 줘.

이어서, 결승선과 꾸미기를 넣어 줘.
트랙 끝에 체크무늬 결승선(아치)을 세우고, 화면 위에 달린 시간을 0.1초 단위로 보여 줘.
결승선을 넘으면 「완주! 기록 ○○.○초」, 이번에 켠 동안의 최고 기록, 「다시 하기」(출발점에서 0초부터). 저장(localStorage)은 하지 마.
캐릭터 꾸미기: 몸 색, 광택(반짝임), 표정 몇 가지(웃음·놀람·윙크). 착지하면 납작해졌다 통 튀어 돌아오는 스쿼시(부피 그대로, 발은 바닥에).
새 숫자는 맨 위 상수로(한국어 주석): 코스 길이, 출렁임 세기, 캐릭터 색.
⚙ 조절판에 코스 길이(트랙 끝과 결승선이 바로 옮겨짐)·출렁임 세기·광택 슬라이더, 몸 색 고르기, 표정 버튼을 더해 줘.
기존 기능·슬라이더는 그대로. 다 쓴 뒤 코드를 다시 읽고 빠진 함수 인자·NaN·오타를 고쳐 줘.

트랙에 장애물이 하나도 안 보이거나, 닿아도 그냥 지나가거나, 화면에 트랙이 안 나오고 「오류」가 떠. 고쳐 줘.
먼저 코드 문법 오류(같은 이름을 두 번 만든 변수, 괄호 짝)가 있으면 고쳐 줘.
굴러오는 공 여러 개와 트랙 위 낮은 높이에서 수평으로 도는 막대 여러 개를 실제로 장면에 넣고, 매 프레임 도는 게임 루프 안에서 움직이게 해 줘.
같은 루프에서 충돌 검사: 캐릭터 중심에서 공 중심까지, 막대 선분까지의 거리가 (캐릭터 반지름 + 장애물 반지름)보다 작으면 부딪힘 → 반대쪽으로 튕기고 0.8초 동안 깜빡이며 다시 안 부딪히게.
장애물 수·속도·크기 슬라이더를 움직이면 지우고 다시 배치해 줘. 기존 기능·슬라이더는 그대로.

시간이 0.0초에서 안 움직이거나, 결승선을 지나도 완주가 안 뜨거나, 착지해도 안 납작해지거나, 화면에 트랙이 안 나오고 「오류」가 떠. 고쳐 줘.
먼저 코드 문법 오류(괄호 짝, 빠진 })가 있으면 고쳐 줘.
그다음 매 프레임 도는 게임 루프 안에서 직접 해 줘: 달린 시간 더하기, 캐릭터가 결승선을 넘었는지 판정(딱 한 번, 시간 멈춤, 완주 카드), 착지한 순간 스쿼시 시작과 출렁임 계산. 함수만 만들지 말고 루프에서 실제로 불러 줘.
트랙 밖 판정과 결승선 위치는 코스 길이 슬라이더 값을 따라가게. 다시 하기는 위치·속도·시간·완주 상태를 모두 처음으로. 저장(localStorage)은 쓰지 마. 기존 기능·슬라이더는 그대로.