Adiciona uma bola cinza e roxa, a bola cinza se clicar, move pra um lado aleatório, no roxo aparece um botão de duplicar por 15 segundos, botões: encher de bola, encher de pedra, resetar e mover bola's game | AI game creator

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

No:29788

68

Adiciona uma bola cinza e roxa, a bola cinza se cl..ALL
Developer User14630｜Date and time 23/12/19 2:33:54
Build time 44.113 sec｜Game capacity 6.491KB｜

→ 　

0　

0　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<body>
    
<canvas id="gameCanvas" width="480" height="320" style="border:1px solid #000000;"></canvas>

<script>
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");
    
    var greyBall = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 20,
        dx: 0,
        dy: 0,
        move: false,
        moveTime: 10000,
        moveTimer: 0
    };
    
    var purpleBall = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 30,
        showButton: true,
        buttonTime: 15000,
        buttonTimer: 0,
        numberOfBalls: 1
    };
    
    var buttons = {
        fillBallButton: {
            x: 10,
            y: 10,
            width: 100,
            height: 30
        },
        fillStoneButton: {
            x: 120,
            y: 10,
            width: 100,
            height: 30
        },
        resetButton: {
            x: 230,
            y: 10,
            width: 100,
            height: 30
        },
        moveBallButton: {
            x: 340,
            y: 10,
            width: 100,
            height: 30
        }
    };
    
    var stones = [];
    
    function drawGreyBall() {
        ctx.beginPath();
        ctx.arc(greyBall.x, greyBall.y, greyBall.radius, 0, Math.PI*2);
        ctx.fillStyle = "#808080";
        ctx.fill();
        ctx.closePath();
    }
    
    function drawPurpleBall() {
        ctx.beginPath();
        ctx.arc(purpleBall.x, purpleBall.y, purpleBall.radius, 0, Math.PI*2);
        ctx.fillStyle = "#800080";
        ctx.fill();
        ctx.closePath();
        
        if (purpleBall.showButton) {
            ctx.beginPath();
            ctx.rect(purpleBall.x - 15, purpleBall.y + 40, 30, 30);
            ctx.fillStyle = "#FFFFFF";
            ctx.fill();
            ctx.closePath();
            
            ctx.font = "20px Arial";
            ctx.fillStyle = "#000000";
            ctx.fillText("2x", purpleBall.x - 5, purpleBall.y + 60);
        }
    }
    
    function drawButtons() {
        for (var button in buttons) {
            ctx.beginPath();
            ctx.rect(buttons[button].x, buttons[button].y, buttons[button].width, buttons[button].height);
            ctx.fillStyle = "#808080";
            ctx.fill();
            ctx.closePath();
            
            ctx.font = "16px Arial";
            ctx.fillStyle = "#FFFFFF";
            ctx.fillText(button, buttons[button].x + 10, buttons[button].y + 20);
        }
    }
    
    function drawStones() {
        for (var i = 0; i < stones.length; i++) {
            ctx.beginPath();
            ctx.arc(stones[i].x, stones[i].y, stones[i].radius, 0, Math.PI*2);
            ctx.fillStyle = "#A9A9A9";
            ctx.fill();
            ctx.closePath();
        }
    }
    
    function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawGreyBall();
        drawPurpleBall();
        drawButtons();
        drawStones();
        
        if (greyBall.move) {
            greyBall.x += greyBall.dx;
            greyBall.y += greyBall.dy;
            
            if (greyBall.x + greyBall.radius > canvas.width || greyBall.x - greyBall.radius < 0) {
                greyBall.dx = -greyBall.dx;
            }
            
            if (greyBall.y + greyBall.radius > canvas.height || greyBall.y - greyBall.radius < 0) {
                greyBall.dy = -greyBall.dy;
            }
        }
        
        if (purpleBall.showButton) {
            purpleBall.buttonTimer += 1000;
            
            if (purpleBall.buttonTimer >= purpleBall.buttonTime) {
                purpleBall.showButton = false;
                purpleBall.buttonTimer = 0;
            }
        }
        
        if (greyBall.moveTimer > 0) {
            greyBall.moveTimer -= 1000;
            
            if (greyBall.moveTimer <= 0) {
                greyBall.move = false;
            }
        }
        
        requestAnimationFrame(update);
    }
    
    update();
    
    canvas.addEventListener("click", function(event) {
        var rect = canvas.getBoundingClientRect();
        var clickX = event.clientX - rect.left;
        var clickY = event.clientY - rect.top;
        
        if (clickX >= purpleBall.x - 15 && clickX <= purpleBall.x + 15 && clickY >= purpleBall.y + 40 && clickY <= purpleBall.y + 70) {
            purpleBall.numberOfBalls *= 2;
            purpleBall.showButton = false;
            purpleBall.buttonTimer = 0;
        }
        
        if (clickX >= buttons.fillBallButton.x && clickX <= buttons.fillBallButton.x + buttons.fillBallButton.width && clickY >= buttons.fillBallButton.y && clickY <= buttons.fillBallButton.y + buttons.fillBallButton.height) {
            for (var i = 0; i < purpleBall.numberOfBalls; i++) {
                var stone = {
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    radius: 10
                };
                
                stones.push(stone);
            }
        }
        
        if (clickX >= buttons.fillStoneButton.x && clickX <= buttons.fillStoneButton.x + buttons.fillStoneButton.width && clickY >= buttons.fillStoneButton.y && clickY <= buttons.fillStoneButton.y + buttons.fillStoneButton.height) {
            stones = [];
        }
        
        if (clickX >= buttons.resetButton.x && clickX <= buttons.resetButton.x + buttons.resetButton.width && clickY >= buttons.resetButton.y && clickY <= buttons.resetButton.y + buttons.resetButton.height) {
            greyBall.x = canvas.width / 2;
            greyBall.y = canvas.height / 2;
            greyBall.dx = 0;
            greyBall.dy = 0;
            greyBall.move = false;
            purpleBall.x = canvas.width / 2;
            purpleBall.y = canvas.height / 2;
            purpleBall.numberOfBalls = 1;
            purpleBall.showButton = true;
            purpleBall.buttonTimer = 0;
            stones = [];
        }
        
        if (clickX >= buttons.moveBallButton.x && clickX <= buttons.moveBallButton.x + buttons.moveBallButton.width && clickY >= buttons.moveBallButton.y && clickY <= buttons.moveBallButton.y + buttons.moveBallButton.height) {
            greyBall.dx = Math.random() * 4 - 2;
            greyBall.dy = Math.random() * 4 - 2;
            greyBall.move = true;
            greyBall.moveTimer = greyBall.moveTime;
        }
    });
</script>

</body>
</html>