Game Penembak Gelembung

rincian

penulis: nftcoolbunny.u.pro

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

bahasa: Russian

buka proyek buat ulang proyek ini

ringkasan

Game interaktif HTML5 Canvas di mana pemain menembak gelembung berwarna.

tag

game html5 canvas javascript

prompt

Buatlah permainan klasik 2D "Bubble Shooter" sebagai halaman HTML interaktif menggunakan HTML5 Canvas dan JavaScript. Permainan harus berfungsi penuh dengan mekanik dasar dan desain minimalis.

---

1. Elemen Permainan:
- Area Permainan:
  - Ukuran canvas: 800x600 piksel.
  - Bagian atas: grid gelembung dalam susunan bertingkat.
  - Bagian bawah: sebuah meriam untuk menembakkan gelembung.
- Meriam:
  - Dikendalikan dengan mouse atau panah keyboard (kiri/kanan) untuk mengarahkan.
  - Menampilkan gelembung saat ini di meriam dan gelembung berikutnya (pratinjau).
- Gelembung:
  - Minimal 5 warna (misalnya, merah, biru, hijau, kuning, ungu).
  - Gelembung akan menempel pada grid atau gelembung lainnya saat bertabrakan.

---

2. Mekanik Utama:
- Menembak:
  - Tombol kiri mouse atau SPACE untuk menembak gelembung.
  - Gelembung bergerak lurus menuju arah bidikan meriam.
  - Menempel saat mengenai gelembung lain atau batas atas.
- Pencocokan dan Pecah:
  - Jika 3 atau lebih gelembung dengan warna yang sama terhubung, mereka pecah dan pemain mendapatkan poin.
  - Reaksi berantai: gelembung yang tidak tersangga jatuh dan dihapus.
- Kondisi Game Over:
  - Permainan berakhir jika gelembung mencapai batas bawah layar.

---

3. Visual dan Antarmuka:
- Gaya:
  - Desain minimalis: gelembung berbentuk lingkaran dengan gradasi warna.
  - Animasi pecah gelembung (misalnya, penyusutan ukuran dengan efek transparansi).
- UI:
  - Tampilan skor di pojok atas layar.
  - Tombol "Restart" untuk memulai ulang permainan.
  - Pesan menang/kalah (misalnya, "Kamu menang!" atau "Game over.").
- Suara:
  - Efek suara saat menembak, saat gelembung pecah, dan musik latar (opsional).

---

4. Persyaratan Teknis:
- Gunakan HTML5 Canvas untuk merender elemen permainan.
- Implementasikan fisika tumbukan dan efek menempel gelembung.
- Optimalkan pengecekan pencocokan (misalnya, dengan rekursi untuk memeriksa gelembung yang berdekatan).
- Simpan skor di localStorage untuk menampilkan skor tertinggi.

---

Contoh Struktur Kode:

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

// Variabel utama
let bubbles = [];
let currentBubble, nextBubble;
let score = 0;

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

// Buat grid gelembung
function createBubbleGrid() {
  // Logika untuk membuat grid awal
}

// Hasilkan gelembung baru
function spawnBubble() {
  currentBubble = { x: 400, y: 550, color: getRandomColor() };
  nextBubble = { color: getRandomColor() };
}

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

// Gambar gelembung
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();
  });
}

// Periksa tumbukan
function checkCollisions() {
  // Logika untuk mengecek tumbukan dan pencocokan
}

// Mulai game
init();

prompt asli


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

ringkasan biaya pembuatan

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

waktu respons: 115.63 sec.

token hasil: 9,124

biaya: $0.14211000