Crie um bubble shooter's game

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

No:7946

485

←

Prev Next

→

Crie um bubble shooter
Developer User4094｜Date and time 23/7/11 7:08:02
Build time 13.887 sec｜Game capacity 4.637KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Bubble Shooter</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="500"></canvas>

// Definir o tamanho e a cor das bolhas
        var bubbleRadius = 20;
        var bubbleColor = "blue";

// Iniciar posição do canhão
        var cannonX = canvas.width / 2;
        var cannonY = canvas.height;

// Definir propriedades do projétil
        var projectileRadius = 5;
        var projectileColor = "red";
        var projectileSpeed = 5;

// Definir variáveis para armazenar as bolhas atiradas
        var bubbles = [];

// Definir variáveis para armazenar as projeções disparadas
        var projectiles = [];

// Função para desenhar uma bolha
        function drawBubble(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, bubbleRadius, 0, Math.PI * 2);
            ctx.fillStyle = bubbleColor;
            ctx.fill();
            ctx.closePath();
        }

// Função para desenhar o canhão
        function drawCannon() {
            ctx.beginPath();
            ctx.moveTo(cannonX - bubbleRadius, cannonY);
            ctx.lineTo(cannonX + bubbleRadius, cannonY);
            ctx.lineTo(cannonX, cannonY - bubbleRadius);
            ctx.fillStyle = "gray";
            ctx.fill();
            ctx.closePath();
        }

// Função para desenhar o projétil
        function drawProjectile(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, projectileRadius, 0, Math.PI * 2);
            ctx.fillStyle = projectileColor;
            ctx.fill();
            ctx.closePath();
        }

// Função para desenhar todos os elementos na tela
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            for (var i = 0; i < bubbles.length; i++) {
                drawBubble(bubbles[i].x, bubbles[i].y);
            }

for (var j = 0; j < projectiles.length; j++) {
                drawProjectile(projectiles[j].x, projectiles[j].y);
            }

drawCannon();
        }

// Função para mover o projétil
        function moveProjectile() {
            for (var i = 0; i < projectiles.length; i++) {
                projectiles[i].y -= projectileSpeed;
                
                if (projectiles[i].y < 0) {
                    projectiles.splice(i, 1);
                    i--;
                }
            }
        }

// Função para detectar colisões entre projéteis e bolhas
        function detectCollisions() {
            for (var i = 0; i < projectiles.length; i++) {
                for (var j = 0; j < bubbles.length; j++) {
                    var dx = projectiles[i].x - bubbles[j].x;
                    var dy = projectiles[i].y - bubbles[j].y;
                    var distance = Math.sqrt(dx * dx + dy * dy);
                    
                    if (distance < bubbleRadius + projectileRadius) {
                        projectiles.splice(i, 1);
                        i--;
                        bubbles.splice(j, 1);
                        j--;
                    }
                }
            }
        }

// Função para atualizar o jogo
        function updateGame() {
            moveProjectile();
            detectCollisions();
            draw();
            
            requestAnimationFrame(updateGame);
        }

// Função para lidar com eventos de clique
        function handleClick(event) {
            var rect = canvas.getBoundingClientRect();
            var clickX = event.clientX - rect.left;
            var clickY = event.clientY - rect.top;

var dx = clickX - cannonX;
            var dy = clickY - cannonY;
            var angle = Math.atan2(dy, dx);

var projectileX = cannonX + Math.cos(angle) * bubbleRadius;
            var projectileY = cannonY + Math.sin(angle) * bubbleRadius;

projectiles.push({ x: projectileX, y: projectileY });
        }

// Evento de clique para disparar os projéteis
        canvas.addEventListener("click", handleClick);

// Iniciar o jogo
        updateGame();
    </script>
</body>
</html>