قم بإنشاء لعبة كلاسيكية ثنائية الأبعاد "بوبل شوتر" كصفحة HTML تفاعلية. يجب أن تكون اللعبة كاملة الوظائف مع آليات أساسية وتصميم بسيط.

1. العناصر الرئيسية للعبة:
- مجال اللعب: في أعلى الشاشة، شبكة من الفقاعات مرتبة بنمط متناوب؛ وفي أسفل الشاشة يوجد مدفع لإطلاق الفقاعات.
- المدفع: يتم التحكم به باستخدام الفأرة أو أسهم لوحة المفاتيح (يسار/يمين)، ويعرض الفقاعة الحالية ومعاينة الفقاعة التالية.
- الفقاعات: على الأقل 5 ألوان (مثل الأحمر، الأزرق، الأخضر، الأصفر، البنفسجي) تلتصق عند الاصطدام إما بالشبكة أو بفقاعات أخرى.

2. الآليات الأساسية:
- الإطلاق: انقر على زر الفأرة الأيسر أو اضغط SPACE لإطلاق الفقاعة؛ تسير الفقاعة في خط مستقيم وتلتصق عند الاصطدام بفقاعة أخرى أو بالحافة العليا.
- المطابقة والانفجار: إذا اتصلت 3 فقاعات أو أكثر من نفس اللون، فإنها تنفجر وتُسجل النقاط. تؤدي سلسلة التفاعلات إلى سقوط الفقاعات غير المدعومة.
- شرط الخسارة: تنتهي اللعبة إذا وصلت الفقاعات إلى أسفل الشاشة.

3. الرسومات والواجهة:
- تصميم بسيط: تُعرض الفقاعات على شكل دوائر بتدرج لوني مع تأثير انكماش وشفافية عند الانفجار.
- واجهة المستخدم: تعرض النقاط، وزر 'إعادة التشغيل'، ورسائل الفوز أو الخسارة (مثل 'لقد فزت!' أو 'انتهت اللعبة').

4. المتطلبات التقنية:
- استخدم HTML5 Canvas لرسم عناصر اللعبة، وطبق فيزياء الاصطدام والتصاق الفقاعات، وحسّن من فحص المطابقات (مثلاً باستخدام الاستدعاء التكراري للعثور على الفقاعات المجاورة).

النتيجة: صفحة HTML تفاعلية متكاملة حيث يقوم اللاعب بإطلاق الفقاعات لتكوين مجموعات من 3 أو أكثر من نفس اللون لتفجيرها.

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

---

### **1. Основные элементы игры:**  
- **Игровое поле:**  

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

---

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

---

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


---

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




### **Результат:**  
Готовая HTML-страница с игрой «Bubble Shooter», где игрок стреляет пузырями, собирая группы из 3+ одинаковых цветов. Игра должна быть интерактивной, с базовой физикой и минималистичным дизайном.  


Q: Как должны реагировать пузыри после столкновения?
A: Пузыри прилипают к сетке или другим пузырям при попадании.

Q: Какую роль играют цепные реакции?
A: нет

Q: Какие индикаторы прогресса или уровня вы хотели бы включить?
A: нет