HTML5 Canvas와 JavaScript를 사용하여 인터랙티브한 HTML 페이지로 클래식한 2D 게임 'Bubble Shooter'를 만드세요. 게임은 기본 메커니즘과 미니멀한 디자인을 갖추어 완벽하게 작동해야 합니다.

1. 주요 게임 요소:
- 게임 필드:
  - 캔버스 크기: 800x600 픽셀.
  - 화면 상단: 체스판 패턴의 버블 그리드.
  - 화면 하단: 버블 슈터 캐논.
- 캐논:
  - 마우스 또는 좌우 화살표 키로 조준할 수 있습니다.
  - 캐논 내에 현재 버블과 다음 버블(미리보기)을 표시합니다.
- 버블:
  - 최소 5가지 색상 (예: 빨강, 파랑, 초록, 노랑, 보라).
  - 버블은 충돌 시 그리드나 다른 버블에 붙습니다.

2. 기본 메커니즘:
- 발사:
  - 좌클릭 또는 스페이스 키를 눌러 발사합니다.
  - 버블은 캐논의 방향으로 직선 이동합니다.
  - 다른 버블이나 경계와 충돌하면 붙게 됩니다.
- 매칭 및 팝:
  - 동일한 색상의 버블이 3개 이상 연결되면 터져서 점수를 얻습니다.
  - 체인 반응: 연결되지 않은 버블은 떨어져 제거됩니다.
- 패배 조건:
  - 버블이 화면 하단에 도달하면 게임 종료됩니다.

3. 시각 및 인터페이스:
- 스타일:
  - 미니멀 디자인: 그라데이션 채움의 원형 버블.
  - 팝 애니메이션 (예: 크기 축소와 투명화 효과).
- UI:
  - 화면 구석에 점수를 표시합니다.
  - '재시작' 버튼으로 게임을 다시 시작합니다.
  - 승리 또는 패배 메시지 (예: '승리!' 또는 'Game Over').

4. 기술 요구 사항:
- HTML5 Canvas를 사용하여 게임 요소를 그립니다.
- 버블 간의 충돌과 부착 물리를 구현합니다.
- 매칭 체크를 최적화합니다 (예: 인접 버블을 재귀적으로 탐색).
- localStorage에 점수를 저장하여 최고 점수를 표시합니다.

코드 구조 예제:
HTML:
[코드 블록]
JavaScript (game.js):
[코드 블록]

결과:
플레이어가 같은 색의 버블 3개 이상을 연결해 터뜨리는 'Bubble Shooter' 게임이 포함된 HTML 페이지를 완성합니다. 게임은 기본 물리와 미니멀 디자인을 갖추고 있습니다.

"Разработай классическую 2D-игру «Bubble Shooter» в виде интерактивной HTML-страницы с использованием HTML5 Canvas и JavaScript. Игра должна быть полностью функциональной, с базовой механикой и минималистичным дизайном.  

---

### **1. Основные элементы игры:**  
- **Игровое поле:**  
  - Холст (Canvas) размером 800x600 пикселей.  
  - Верхняя часть экрана: сетка из пузырей, расположенных в шахматном порядке.  
  - Нижняя часть экрана: пушка для стрельбы пузырями.  
- **Пушка:**  
  - Управление мышью или стрелками клавиатуры (влево/вправо) для наведения.  
  - Отображение текущего пузыря в пушке и следующего пузыря (предварительный просмотр).  
- **Пузыри:**  
  - Минимум 5 цветов (например, красный, синий, зеленый, желтый, фиолетовый).  
  - Пузыри прилипают к сетке или другим пузырям при попадании.  

---

### **2. Основная механика:**  
- **Стрельба:**  
  - Нажатие ЛКМ или SPACE для выстрела пузырем.  
  - Пузырь летит по прямой траектории в направлении пушки.  
  - При столкновении с другим пузырем или верхней границей пузырь прилипает.  
- **Совпадения и уничтожение:**  
  - Если 3+ пузыря одного цвета соединяются, они лопаются, игрок получает очки.  
  - Цепные реакции: пузыри, оставшиеся без опоры, падают вниз и уничтожаются.  
- **Условия поражения:**  
  - Игра заканчивается, если пузыри достигают нижней границы экрана.  

---

### **3. Визуал и интерфейс:**  
- **Стиль:**  
  - Минималистичный дизайн: пузыри — это круги с градиентной заливкой.  
  - Анимация лопания пузырей (например, уменьшение размера с эффектом прозрачности).  
- **UI:**  
  - Отображение счета в верхнем углу экрана.  
  - Кнопка «Рестарт» для перезапуска игры.  
  - Сообщение о победе/поражении (например, «Вы выиграли!» или «Игра окончена»).  
- **Звуки:**  
  - Звук выстрела, лопания пузырей, фоновой музыки (опционально).  

---

### **4. Технические требования:**  
- Использовать HTML5 Canvas для отрисовки игровых элементов.  
- Реализовать физику столкновений и прилипания пузырей.  
- Оптимизировать проверку совпадений (например, поиск соседних пузырей через рекурсию).  
- Сохранение счета в localStorage для отображения лучшего результата.  

---

### **Пример структуры кода:**  

**HTML:**  
```html  
  
  
  
    
    
    
    
  
  
    
    
  
  
```  

**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: Отображение счета в верхнем углу экрана.  Кнопка «Рестарт» для перезапуска игры.  Сообщение о победе/поражении (например, «Вы выиграли!» или «Игра окончена»)