버블 슈터 게임
세부 정보
요약
HTML5 Canvas와 JavaScript로 제작된 2D 버블 슈터 인터랙티브 게임.
태그
프롬프트
HTML5 Canvas와 JavaScript를 사용하여 클래식 2D "Bubble Shooter" 게임을 인터랙티브 HTML 페이지로 만드세요. 게임은 기본 메커니즘과 미니멀한 디자인으로 완벽하게 작동해야 합니다.
---
1. 게임 요소:
- 게임 필드:
- Canvas 크기: 800x600 픽셀.
- 상단: 계단식 배열의 버블 그리드.
- 하단: 버블 발사를 위한 캐논.
- 캐논:
- 마우스 또는 좌우 화살표 키로 조준 가능.
- 캐논에 현재 버블과 다음 버블(미리보기) 표시.
- 버블:
- 최소 5가지 색상(예: 빨강, 파랑, 초록, 노랑, 보라).
- 다른 버블이나 그리드에 충돌 시 붙음.
---
2. 주요 메커니즘:
- 발사:
- 마우스 왼쪽 버튼 또는 SPACE 키로 버블 발사.
- 버블은 캐논의 조준 방향으로 직선 이동.
- 다른 버블 또는 상단 경계에 닿으면 붙음.
- 매칭 및 터짐:
- 동일 색상의 버블이 3개 이상 연속하면 터지며 점수 획득.
- 연쇄 반응: 지지 받지 못한 버블은 떨어져 제거됨.
- 게임 오버 조건:
- 버블이 화면 하단에 닿으면 게임 종료.
---
3. 비주얼 및 인터페이스:
- 스타일:
- 미니멀 디자인: 그라데이션 채움의 원형 버블.
- 터짐 애니메이션 (예: 크기 감소 및 투명도 효과).
- UI:
- 화면 상단에 점수 표시.
- 게임 재시작 버튼 제공.
- 승리/패배 메시지 (예: "승리!" 또는 "게임 오버").
- 사운드:
- 발사, 터짐, 배경음악 (선택적) 효과.
---
4. 기술 요구사항:
- HTML5 Canvas를 사용하여 게임 요소 렌더링.
- 버블 충돌 물리 및 부착 효과 구현.
- 인접 버블 검사(재귀 사용) 등 매칭 체크 최적화.
- localStorage에 점수를 저장하여 최고 기록 표시.
---
코드 구조 예시:
HTML:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bubble Shooter</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; background: #87CEEB; }
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script src="game.js"></script>
</body>
</html>
JavaScript (game.js):
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 주요 변수들
let bubbles = [];
let currentBubble, nextBubble;
let score = 0;
// 게임 초기화 함수
function init() {
createBubbleGrid();
spawnBubble();
gameLoop();
}
// 버블 그리드 생성
function createBubbleGrid() {
// 초기 그리드 생성 로직
}
// 새 버블 생성
function spawnBubble() {
currentBubble = { x: 400, y: 550, color: getRandomColor() };
nextBubble = { color: getRandomColor() };
}
// 메인 게임 루프
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBubbles();
drawCannon();
requestAnimationFrame(gameLoop);
}
// 버블 그리기
function drawBubbles() {
bubbles.forEach(bubble => {
ctx.beginPath();
ctx.arc(bubble.x, bubble.y, 20, 0, Math.PI * 2);
ctx.fillStyle = bubble.color;
ctx.fill();
ctx.stroke();
});
}
// 충돌 처리
function checkCollisions() {
// 충돌 및 매칭 체크 로직
}
// 게임 시작
init();
원본 프롬프트
"Разработай классическую 2D-игру «Bubble Shooter» в виде интерактивной HTML-страницы с использованием HTML5 Canvas и JavaScript. Игра должна быть полностью функциональной, с базовой механикой и минималистичным дизайном.
---
### **1. Основные элементы игры:**
- **Игровое поле:**
- Холст (Canvas) размером 800x600 пикселей.
- Верхняя часть экрана: сетка из пузырей, расположенных в шахматном порядке.
- Нижняя часть экрана: пушка для стрельбы пузырями.
- **Пушка:**
- Управление мышью или стрелками клавиатуры (влево/вправо) для наведения.
- Отображение текущего пузыря в пушке и следующего пузыря (предварительный просмотр).
- **Пузыри:**
- Минимум 5 цветов (например, красный, синий, зеленый, желтый, фиолетовый).
- Пузыри прилипают к сетке или другим пузырям при попадании.
---
### **2. Основная механика:**
- **Стрельба:**
- Нажатие ЛКМ или SPACE для выстрела пузырем.
- Пузырь летит по прямой траектории в направлении пушки.
- При столкновении с другим пузырем или верхней границей пузырь прилипает.
- **Совпадения и уничтожение:**
- Если 3+ пузыря одного цвета соединяются, они лопаются, игрок получает очки.
- Цепные реакции: пузыри, оставшиеся без опоры, падают вниз и уничтожаются.
- **Условия поражения:**
- Игра заканчивается, если пузыри достигают нижней границы экрана.
---
### **3. Визуал и интерфейс:**
- **Стиль:**
- Минималистичный дизайн: пузыри — это круги с градиентной заливкой.
- Анимация лопания пузырей (например, уменьшение размера с эффектом прозрачности).
- **UI:**
- Отображение счета в верхнем углу экрана.
- Кнопка «Рестарт» для перезапуска игры.
- Сообщение о победе/поражении (например, «Вы выиграли!» или «Игра окончена»).
- **Звуки:**
- Звук выстрела, лопания пузырей, фоновой музыки (опционально).
---
### **4. Технические требования:**
- Использовать HTML5 Canvas для отрисовки игровых элементов.
- Реализовать физику столкновений и прилипания пузырей.
- Оптимизировать проверку совпадений (например, поиск соседних пузырей через рекурсию).
- Сохранение счета в localStorage для отображения лучшего результата.
---
### **Пример структуры кода:**
**HTML:**
```html
Bubble Shooter
```
**JavaScript (game.js):**
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Основные переменные
let bubbles = [];
let currentBubble, nextBubble;
let score = 0;
// Инициализация игры
function init() {
createBubbleGrid();
spawnBubble();
gameLoop();
}
// Создание сетки пузырей
function createBubbleGrid() {
// Логика создания начальной сетки
}
// Спавн нового пузыря
function spawnBubble() {
currentBubble = { x: 400, y: 550, color: getRandomColor() };
nextBubble = { color: getRandomColor() };
}
// Основной игровой цикл
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBubbles();
drawCannon();
requestAnimationFrame(gameLoop);
}
// Отрисовка пузырей
function drawBubbles() {
bubbles.forEach(bubble => {
ctx.beginPath();
ctx.arc(bubble.x, bubble.y, 20, 0, Math.PI * 2);
ctx.fillStyle = bubble.color;
ctx.fill();
ctx.stroke();
});
}
// Обработка столкновений
function checkCollisions() {
// Логика проверки столкновений и совпадений
}
// Запуск игры
init();
```
---
### **Результат:**
Готовая HTML-страница с игрой «Bubble Shooter», где игрок стреляет пузырями, собирая группы из 3+ одинаковых цветов. Игра должна быть интерактивной, с базовой физикой и минималистичным дизайном.
Q: Нужна ли дополнительная информация по механике стрельбы?
A: нет
Q: Какого уровня детализации ожидается для анимации пузырей?
A: простая
Q: Следует ли учитывать адаптацию под мобильные устройства?
A: да
생성 비용 요약
모델 이름: claude-3-7-sonnet-latest
응답 시간: 115.63 sec.
결과 토큰: 9,124
비용: $0.14211000