Buatkan game boom stick's game

Click here for free DL of the app version that can save data.

No:33884

←

Prev Next

→

Buatkan game boom stick
Developer User15940｜Date and time 24/1/6 23:08:44
Build time 54.703 sec｜Game capacity 5.823KB｜

Script

Baik, berikut adalah implementasi game "Boom Stick" dalam satu file HTML:

Kode di atas adalah implementasi sederhana game "Boom Stick" yang dapat dimainkan pada smartphone. Game ini menggunakan karakter "Boom Stick" yang bisa pemain kendalikan menggunakan tombol kiri dan kanan. Pemain harus menghindari Fuel Bômb (bom bahan bakar) yang terus jatuh dari atas layar. Jika karakter "Boom Stick" dan Fuel Bômb bertabrakan, maka permainan berakhir. Perhatikan bahwa dalam implementasi ini tidak menggunakan pictogram khusus karena kita hanya menggambar kotak sebagai representasi karakter "Boom Stick" dan bulat sebagai representasi Fuel Bômb. Anda dapat menyesuaikan dan mengatur ulang desain tampilan game ini sesuai keinginan Anda.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

Baik, berikut adalah implementasi game "Boom Stick" dalam satu file HTML:

```html
<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boom Stick</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
    </style>
</head>

// Konfigurasi karakter pemain (Boom Stick)
            const boomstick = {
                x: canvas.width / 2,
                y: canvas.height - 100,
                size: 50,
                color: "#000000",
                speed: 5
            };

// Menggambar karakter pemain (Boom Stick)
            function drawBoomStick() {
                ctx.beginPath();
                ctx.rect(boomstick.x - boomstick.size / 2, boomstick.y - boomstick.size / 2, boomstick.size, boomstick.size);
                ctx.fillStyle = boomstick.color;
                ctx.fill();
                ctx.closePath();
            }

// Mengendalikan gerakan karakter pemain (Boom Stick)
            function moveBoomStick(key) {
                if (key === "ArrowLeft" && boomstick.x - boomstick.size / 2 > 0) {
                    boomstick.x -= boomstick.speed;
                } else if (key === "ArrowRight" && boomstick.x + boomstick.size / 2 < canvas.width) {
                    boomstick.x += boomstick.speed;
                }
            }

// Fuel Bômb
            class Bomb {
                constructor(x, speed) {
                    this.x = x;
                    this.y = -10;
                    this.size = 20;
                    this.speed = speed;
                    this.color = "#ff0000"; // merah
                }

update() {
                    this.y += this.speed;
                    this.draw();
                }

draw() {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fillStyle = this.color;
                    ctx.fill();
                    ctx.closePath();
                }
            }

const bombs = []; // Array untuk menyimpan Fuel Bômb yang muncul
            let score = 0; // Skor pemain
            let isGameOver = false; // Status game

// Menambahkan Fuel Bômb baru ke dalam array bombs secara acak
            function addBomb() {
                const x = Math.random() * canvas.width;
                const speed = Math.random() * 3 + 1;
                bombs.push(new Bomb(x, speed));
            }

// Menggambar skor pemain di pojok kanan atas
            function drawScore() {
                ctx.font = "16px Arial";
                ctx.fillStyle = "#000000";
                ctx.fillText("Skor: " + score, canvas.width - 80, 20);
            }

// Mendeteksi tabrakan antara Boom Stick dengan Fuel Bômb
            function checkCollision() {
                for (let i = 0; i < bombs.length; i++) {
                    if (
                        boomstick.x - boomstick.size / 2 < bombs[i].x + bombs[i].size &&
                        boomstick.x + boomstick.size / 2 > bombs[i].x - bombs[i].size &&
                        boomstick.y - boomstick.size / 2 < bombs[i].y + bombs[i].size &&
                        boomstick.y + boomstick.size / 2 > bombs[i].y - bombs[i].size
                    ) {
                        isGameOver = true;
                        break;
                    }
                }
            }

// Animasi permainan dan pemrosesan input
            function gameLoop() {
                if (isGameOver) {
                    ctx.font = "bold 30px Arial";
                    ctx.fillStyle = "#000000";
                    ctx.fillText("Game Over", canvas.width / 2 - 80, canvas.height / 2);
                    return;
                }

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBoomStick();
                drawScore();

if (Math.random() < 0.03) {
                    addBomb();
                }

for (let i = 0; i < bombs.length; i++) {
                    bombs[i].update();
                }

checkCollision();
                score++;

requestAnimationFrame(gameLoop);
            }

document.addEventListener("keydown", function (event) {
                moveBoomStick(event.key);
            });

gameLoop();
        });
    </script>
</body>

</html>
```

Perhatikan bahwa dalam implementasi ini tidak menggunakan pictogram khusus karena kita hanya menggambar kotak sebagai representasi karakter "Boom Stick" dan bulat sebagai representasi Fuel Bômb. Anda dapat menyesuaikan dan mengatur ulang desain tampilan game ini sesuai keinginan Anda.