Add ball and functions: duplicate ball and Change color, When you click on the ball it does remove ball's game

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

No:29098

←

Prev Next

→

Add ball and functions: duplicate ball and Change ..ALL
Developer User14399｜Date and time 23/12/16 1:24:07
Build time 36.206 sec｜Game capacity 3.98KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Game</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas{
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Define as dimensões do canvas
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Define as cores das bolas
        var colors = ["red", "blue", "green", "yellow", "purple"];

// Array para armazenar as bolas presentes no jogo
        var balls = [];

// Classe para representar uma bola
        class Ball {
            constructor(x, y, radius, color) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
            }

// Método para desenhar a bola no canvas
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            }

// Método para verificar se o ponto (x, y) está dentro da bola
            contains(x, y) {
                var dx = this.x - x;
                var dy = this.y - y;
                return Math.sqrt(dx * dx + dy * dy) <= this.radius;
            }
        }

// Função para adicionar uma nova bola na posição do toque/click do usuário
        function addBall(event) {
            var rect = canvas.getBoundingClientRect();
            var x = event.clientX - rect.left;
            var y = event.clientY - rect.top;

var radius = Math.floor(Math.random() * (100 - 20 + 1)) + 20;
            var color = colors[Math.floor(Math.random() * colors.length)];
            var ball = new Ball(x, y, radius, color);

balls.push(ball);
        }

// Função para duplicar a bola selecionada
        function duplicateBall(event) {
            var rect = canvas.getBoundingClientRect();
            var x = event.clientX - rect.left;
            var y = event.clientY - rect.top;

for (var i = balls.length - 1; i >= 0; i--) {
                if (balls[i].contains(x, y)) {
                    var newBall = new Ball(x, y, balls[i].radius, balls[i].color);
                    balls.push(newBall);
                }
            }
        }

// Função para remover a bola selecionada
        function removeBall(event) {
            var rect = canvas.getBoundingClientRect();
            var x = event.clientX - rect.left;
            var y = event.clientY - rect.top;

for (var i = balls.length - 1; i >= 0; i--) {
                if (balls[i].contains(x, y)) {
                    balls.splice(i, 1);
                }
            }
        }

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

for (var i = 0; i < balls.length; i++) {
                balls[i].draw();
            }
        }

// Função para atualizar o jogo e desenhar as bolas
        function update() {
            drawBalls();
            requestAnimationFrame(update);
        }

// Event listeners para adicionar/duplicar/remover bolas
        canvas.addEventListener("click", function(event) {
            addBall(event);
        });

canvas.addEventListener("dblclick", function(event) {
            duplicateBall(event);
        });

canvas.addEventListener("contextmenu", function(event) {
            event.preventDefault();
            removeBall(event);
        });

// Inicia o jogo
        update();

</script>
</body>
</html>