Bubble Shooter Game

details

author: nftcoolbunny.u.pro

url: https://nftcoolbunny.u.pro/games/bubble-shooter/3

language: Russian

open project remake this project

summary

An interactive HTML5 Canvas game where players shoot colored bubbles.

prompt

Create a classic 2D "Bubble Shooter" game as an interactive HTML page using HTML5 Canvas and JavaScript. The game should be fully functional with basic mechanics and a minimalist design.

---

1. Game Elements:
- Game Field:
  - Canvas size: 800x600 pixels.
  - Top screen: grid of bubbles in a staggered order.
  - Bottom screen: a cannon for shooting bubbles.
- Cannon:
  - Controlled by mouse or keyboard arrows (left/right) for aiming.
  - Displays the current bubble in the cannon and the next bubble (preview).
- Bubbles:
  - At least 5 colors (e.g., red, blue, green, yellow, purple).
  - Bubbles stick to the grid or other bubbles upon hitting.

---

2. Main Mechanics:
- Shooting:
  - Left mouse button or SPACE to shoot a bubble.
  - Bubble flies in a straight line towards cannon aim.
  - Sticks upon hitting another bubble or the top boundary.
- Matching and Popping:
  - If 3+ same-colored bubbles are connected, they pop, and player scores.
  - Chain reactions: unsupported bubbles fall and are destroyed.
- Game Over Condition:
  - Game ends if bubbles reach the bottom boundary of the screen.

---

3. Visuals and Interface:
- Style:
  - Minimalist design: bubbles are circles with gradient fill.
  - Bubble popping animation (e.g., size reduction with transparency effect).
- UI:
  - Score display in the top corner of the screen.
  - "Restart" button to restart the game.
  - Win/Lose message (e.g., "You won!" or "Game over.").
- Sounds:
  - Sound for shooting, popping bubbles, background music (optional).

---

4. Technical Requirements:
- Use HTML5 Canvas for rendering game elements.
- Implement bubble collision physics and adhesion.
- Optimize matching check (e.g., using recursion for neighbor check).
- Save score in localStorage to display best result.

---

Code Structure Example:

HTML:
<!DOCTYPE html>
<html lang="en">
<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');

// Main Variables
let bubbles = [];
let currentBubble, nextBubble;
let score = 0;

// Initialize Game
function init() {
  createBubbleGrid();
  spawnBubble();
  gameLoop();
}

// Create Bubble Grid
function createBubbleGrid() {
  // Logic to create initial grid
}

// Spawn New Bubble
function spawnBubble() {
  currentBubble = { x: 400, y: 550, color: getRandomColor() };
  nextBubble = { color: getRandomColor() };
}

// Main Game Loop
function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBubbles();
  drawCannon();
  requestAnimationFrame(gameLoop);
}

// Draw Bubbles
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();
  });
}

// Handle Collisions
function checkCollisions() {
  // Logic for collision and match checking
}

// Start Game
init();

original prompt


"Разработай классическую 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: да

generation cost summary

model name: claude-3-7-sonnet-latest

response time: 115.63 sec.

result tokens: 9,124

cost: $0.14211000