원반을 쳐서 상대 골대에 넣는 빠른 대전 게임.
<aside> 💡
직사각형 경기장에서 플레이어와 컴퓨터가 원형 패들을 움직여 퍽을 치고 상대 골대에 넣는 '에어하키' 게임을 만들어줘. 플레이어는 경기장 아래쪽, 컴퓨터는 위쪽에서 움직이게 하고, 컴퓨터는 퍽의 위치를 따라가는 간단한 AI로 만들어줘. 퍽이 벽과 패들에 부딪힐 때 자연스럽게 튕기도록 하고, 먼저 7점을 얻으면 승리하게 해줘. 골이 들어간 뒤에는 퍽을 중앙에서 다시 시작하고, 점수가 높아질수록 퍽의 최대 속도가 조금씩 빨라지게 해줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 마우스 이동과 모바일 드래그를 모두 지원하고, 점수판과 승부 결과·다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
제한시간 안에 문제를 풀며 최대한 오래 살아남기.
<aside> 💡
화면에 객관식 문제가 한 문제씩 나오고, 제한시간 안에 정답을 선택해야 하는 '퀴즈 서바이벌' 게임을 만들어줘. 상식·과학·역사·수학·컴퓨터 분야의 쉬운 문제를 코드 안에 최소 40개 포함해줘. 정답을 맞히면 점수와 남은 시간이 조금 증가하고, 틀리거나 시간이 끝나면 생명이 줄어들게 해줘. 연속으로 정답을 맞히면 콤보 보너스를 주고, 문제가 진행될수록 제한시간이 짧아지게 해줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 숫자키와 모바일 터치를 모두 지원하고, 점수·콤보·남은 시간·생명 표시와 게임오버/다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
화면이 바뀌는 순간 빠르게 클릭.
<aside> 💡
화면이 빨강에서 초록으로 바뀌는 순간 최대한 빨리 클릭해서 반응속도(ms)를 측정하는 게임을 만들어줘. 너무 일찍 누르면 실패, 5회 평균 기록과 최고 기록을 보여줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 키보드와 모바일 터치를 모두 지원하고, 점수 표시와 게임오버/다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
클릭으로 재화를 모아 업그레이드.
<aside> 💡
버튼을 클릭하면 점수가 쌓이고, 그 점수로 자동 생산·클릭 강화 업그레이드를 사는 '쿠키 클리커' 스타일 키우기 게임을 만들어줘. 숫자가 커져도 보기 좋게 표시해줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 키보드와 모바일 터치를 모두 지원하고, 점수 표시와 게임오버/다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
제한된 기회 안에 알파벳을 골라 숨은 단어 찾기.
<aside> 💡
숨겨진 영어 단어의 글자 수만큼 빈칸을 보여주고, 알파벳을 하나씩 선택해서 단어를 맞히는 '행맨' 게임을 만들어줘. 정답에 포함된 알파벳은 해당 위치에 표시하고, 틀린 알파벳을 선택할 때마다 남은 기회가 줄어들게 해줘. 총 6번 틀리면 게임오버가 되고, 그 전에 단어를 완성하면 승리하게 해줘. 동물·음식·직업·학교생활 등의 카테고리별 단어 목록을 코드에 포함하고, 간단한 힌트도 제공해줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 실제 키보드 입력과 모바일 화면 키보드를 모두 지원하고, 연속 정답 점수와 다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
길을 따라오는 적을 타워로 막아내는 전략 게임.
<aside> 💡
적들이 정해진 길을 따라 출발 지점에서 기지까지 이동하고, 플레이어가 길 주변의 빈칸에 방어 타워를 설치해 적을 막는 '타워 디펜스' 게임을 만들어줘. 기본 타워, 공격속도가 빠른 타워, 이동속도를 늦추는 타워 3종류를 넣어줘. 적을 처치하면 골드를 얻고, 골드로 새로운 타워를 설치하거나 기존 타워를 업그레이드할 수 있게 해줘. 웨이브가 진행될수록 적의 체력과 이동속도가 증가하고, 적이 기지에 도착하면 기지 체력이 줄어들게 해줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 마우스와 모바일 터치를 모두 지원하고, 골드·웨이브·기지 체력·점수 표시와 게임오버/다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
움직이는 자동차와 장애물을 피해 도로를 건너기.
<aside> 💡
캐릭터를 위·아래·왼쪽·오른쪽으로 한 칸씩 움직여 여러 차선의 도로와 강을 건너 목적지까지 도달하는 '도로 건너기' 게임을 만들어줘. 도로에서는 좌우로 움직이는 자동차를 피해야 하고, 강에서는 움직이는 통나무 위에 올라타야 건널 수 있게 해줘. 자동차와 부딪히거나 물에 빠지면 생명이 줄어들고, 목적지에 도착하면 다음 스테이지로 넘어가면서 이동속도가 빨라지게 해줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 방향키와 모바일 방향 버튼을 모두 지원하고, 점수·스테이지·생명 표시와 게임오버/다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
움직이는 표시를 정확한 구간에 맞춰 물고기 잡기.
<aside> 💡
화면에 낚싯대를 던진 뒤 물고기가 입질하면 타이밍에 맞춰 버튼을 눌러 물고기를 잡는 '낚시 타이밍' 게임을 만들어줘. 물고기가 입질하는 시간은 무작위로 하고, 너무 일찍 누르거나 너무 늦게 누르면 물고기를 놓치게 해줘. 물고기가 걸리면 움직이는 게이지의 표시를 성공 구간 안에 일정 시간 유지해야 잡을 수 있게 해줘. 물고기마다 크기와 희귀도, 점수를 다르게 설정하고, 제한시간 동안 잡은 물고기의 총점과 도감 목록을 보여줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 스페이스바와 모바일 터치를 모두 지원하고, 점수·남은 시간·잡은 물고기 수 표시와 다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
같은 색 공을 3개 이상 연결해 터뜨리는 퍼즐.
<aside> 💡
화면 위쪽에 여러 색상의 버블이 붙어 있고, 아래쪽 발사대의 방향을 조절해 버블을 쏘는 '버블 슈터' 게임을 만들어줘. 같은 색 버블이 3개 이상 연결되면 터지고, 연결이 끊어진 버블도 아래로 떨어지게 해줘. 버블을 일정 횟수 발사할 때마다 위쪽에 새로운 줄이 추가되고, 버블이 바닥 선까지 내려오면 게임오버가 되게 해줘. 다음에 발사할 버블을 미리 보여주고 점수와 연속 제거 보너스를 표시해줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 마우스 조준과 모바일 터치를 모두 지원하고, 다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
같은 모양 블록 3개를 연결해 없애는 퍼즐.
<aside> 💡
8x8 보드에 여러 색상과 모양의 블록을 배치하고, 서로 붙어 있는 블록 두 개의 위치를 바꿔 같은 블록을 가로 또는 세로로 3개 이상 연결하면 사라지는 '3매치 퍼즐' 게임을 만들어줘. 블록이 사라진 자리에는 위쪽 블록이 내려오고 새로운 블록이 채워지게 해줘. 4개 이상 연결하면 특수 블록이 만들어지고, 연속으로 블록이 사라지면 콤보 점수가 올라가게 해줘. 제한시간 60초 동안 최대한 높은 점수를 얻는 방식으로 만들어줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 마우스 드래그와 모바일 스와이프를 모두 지원하고, 점수 표시와 다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
섞여 있는 숫자 타일을 순서대로 정렬하기.
<aside> 💡
4x4 보드에 1부터 15까지의 숫자 타일과 한 칸의 빈칸을 배치하고, 빈칸과 인접한 타일을 움직여 숫자를 순서대로 정렬하는 '15 퍼즐' 게임을 만들어줘. 게임을 시작할 때 반드시 풀 수 있는 상태로 타일을 무작위로 섞어줘. 이동 횟수와 경과 시간을 표시하고, 모든 숫자가 순서대로 정렬되면 클리어 화면을 보여줘. 3x3, 4x4, 5x5 난이도를 선택할 수 있게 해줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 방향키와 모바일 터치를 모두 지원하고, 다시 섞기와 다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
제한된 기회 안에 알파벳을 골라 숨은 단어 찾기.
<aside> 💡
숨겨진 영어 단어의 글자 수만큼 빈칸을 보여주고, 알파벳을 하나씩 선택해서 단어를 맞히는 '행맨' 게임을 만들어줘. 정답에 포함된 알파벳은 해당 위치에 표시하고, 틀린 알파벳을 선택할 때마다 남은 기회가 줄어들게 해줘. 총 6번 틀리면 게임오버가 되고, 그 전에 단어를 완성하면 승리하게 해줘. 동물·음식·직업·학교생활 등의 카테고리별 단어 목록을 코드에 포함하고, 간단한 힌트도 제공해줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 실제 키보드 입력과 모바일 화면 키보드를 모두 지원하고, 연속 정답 점수와 다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
상자를 밀어 모든 목표 지점에 옮기는 창고 퍼즐.
<aside> 💡
격자로 이루어진 창고에서 캐릭터를 움직여 상자를 밀고, 모든 상자를 지정된 목표 지점 위에 올려놓으면 클리어되는 '소코반' 퍼즐 게임을 만들어줘. 상자는 당길 수 없고 밀기만 가능하게 하며, 벽이나 다른 상자에 막혀 움직일 수 없는 규칙을 적용해줘. 최소 5개의 스테이지를 코드에 포함하고, 스테이지가 올라갈수록 구조가 복잡해지게 해줘. 이동 횟수와 상자를 민 횟수를 표시하고, 한 단계 되돌리기와 스테이지 다시 시작 기능을 넣어줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 방향키와 모바일 방향 버튼을 모두 지원해줘. 코드만 보여줘.
</aside>
떨어뜨린 말을 가로·세로·대각선으로 4개 연결하기.
<aside> 💡
7개의 세로줄과 6개의 가로줄로 이루어진 보드에서 플레이어와 컴퓨터가 말을 번갈아 떨어뜨리고, 가로·세로·대각선으로 같은 색 말 4개를 먼저 연결하면 이기는 '사목(Connect Four)' 게임을 만들어줘. 플레이어가 열을 선택하면 말이 가장 아래의 빈칸으로 떨어지는 애니메이션을 넣어줘. 컴퓨터는 승리할 수 있는 위치나 플레이어를 막을 수 있는 위치를 우선 선택하는 간단한 AI로 만들어줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 키보드와 모바일 터치를 모두 지원하고, 승부 결과와 다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
상대 돌을 사이에 끼워 내 돌로 뒤집는 보드게임.
<aside> 💡
8x8 보드에서 흑돌과 백돌을 번갈아 놓고, 상대방 돌을 가로·세로·대각선으로 사이에 끼우면 내 돌로 뒤집을 수 있는 '오델로' 게임을 만들어줘. 플레이어는 흑돌, 컴퓨터는 백돌로 하고, 컴퓨터는 놓을 수 있는 위치 중 하나를 선택하는 간단한 AI로 만들어줘. 돌을 놓을 수 있는 위치를 표시하고, 게임이 끝나면 흑돌과 백돌의 개수를 계산해 승자를 알려줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 마우스와 모바일 터치를 모두 지원하고, 점수 표시와 다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>
숫자가 겹치지 않도록 빈칸을 채우는 논리 퍼즐.
<aside> 💡
9x9 격자판의 빈칸에 1부터 9까지의 숫자를 입력해서 각 가로줄, 세로줄, 3x3 구역에 같은 숫자가 겹치지 않도록 완성하는 '스도쿠' 게임을 만들어줘. 쉬움·보통·어려움 난이도를 선택할 수 있게 하고, 잘못된 숫자를 입력하면 표시해줘. 힌트 기능, 경과 시간, 실수 횟수, 게임 완료 화면을 포함해줘. HTML, CSS, JavaScript만 사용해서 브라우저에서 동작하는 게임을 만들어줘. 외부 라이브러리나 인터넷 연결 없이 단일 index.html 파일 하나로 완성해줘. 화면 크기에 맞춰 반응형으로 동작하고, 키보드 숫자 입력과 모바일 터치를 모두 지원하고, 다시하기 기능을 포함해줘. 코드만 보여줘.
</aside>