AI game creator

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

No:42835

116

←

Prev Next

→

Billiards
Developer User18914｜Date and time 24/2/13 0:44:48
Build time 14.074 sec｜Game capacity 4.188KB｜

Script

Arraste o palito para acertar as bolas!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Bilhar</title>
    <style>
        body {
            background-color: green;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }
        #canvas {
            background-color: #454545;
            border: 1px solid black;
        }
        #status {
            color: white;
            text-align: center;
            font-size: 24px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="400"></canvas>
    <div id="status">Arraste o palito para acertar as bolas!</div>

// Inicialização do jogo
        function init() {
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");

cueBallPosition = { x: 100, y: 200 };
            targetBallPosition = { x: 700, y: 200 };
            stickPositionX = canvas.width / 2;
            isDragging = false;

canvas.addEventListener("mousedown", handleMouseDown);
            canvas.addEventListener("mousemove", handleMouseMove);
            canvas.addEventListener("mouseup", handleMouseUp);

draw();
        }

// Função para desenhar no canvas
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Desenhar as bolas
            drawBall(cueBallPosition.x, cueBallPosition.y, "white");
            drawBall(targetBallPosition.x, targetBallPosition.y, "red");

// Desenhar a haste
            drawStick();

// Verificar se as bolas colidiram
            if (checkCollision()) {
                document.getElementById("status").innerText = "Parabéns! Você acertou a bola alvo!";
            }

requestAnimationFrame(draw);
        }

// Função para desenhar uma bola
        function drawBall(x, y, color) {
            ctx.beginPath();
            ctx.arc(x, y, 15, 0, Math.PI * 2);
            ctx.fillStyle = color;
            ctx.fill();
            ctx.closePath();
        }

// Função para desenhar a haste
        function drawStick() {
            ctx.beginPath();
            ctx.moveTo(cueBallPosition.x, cueBallPosition.y);
            ctx.lineTo(stickPositionX, cueBallPosition.y);
            ctx.lineWidth = 4;
            ctx.strokeStyle = "white";
            ctx.stroke();
            ctx.closePath();
        }

// Função para verificar a colisão
        function checkCollision() {
            const distance = Math.sqrt(Math.pow(targetBallPosition.x - cueBallPosition.x, 2) + Math.pow(targetBallPosition.y - cueBallPosition.y, 2));
            return distance < 30; // Considera uma colisão se a distância entre as bolas for menor que 30 pixels
        }

// Função para lidar com o evento de pressionar o mouse
        function handleMouseDown(e) {
            const rect = canvas.getBoundingClientRect();
            const mouseX = e.clientX - rect.left;
            const mouseY = e.clientY - rect.top;

// Verificar se o clique foi feito na haste
            if (mouseY >= cueBallPosition.y - 10 && mouseY <= cueBallPosition.y + 10) {
                isDragging = true;
            }
        }

// Função para lidar com o evento de mover o mouse
        function handleMouseMove(e) {
            if (isDragging) {
                const rect = canvas.getBoundingClientRect();
                const mouseX = e.clientX - rect.left;

// Limitar a posição da haste dentro do canvas
                stickPositionX = Math.max(cueBallPosition.x, Math.min(targetBallPosition.x, mouseX));
            }
        }

// Função para lidar com o evento de soltar o mouse
        function handleMouseUp() {
            isDragging = false;
        }

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