In this game you have to shoot random circles falling down by touching them to make them disappear and also there is a score's game

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

No:46576

←

Prev Next

→

In this game you have to shoot random circles fall..ALL
Developer User15380｜Date and time 24/2/25 5:31:40
Build time 5.34 sec｜Game capacity 1.958KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Falling Circles Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

let score = 0;

canvas.addEventListener('click', (event) => {
            const mouseX = event.clientX - canvas.offsetLeft;
            const mouseY = event.clientY - canvas.offsetTop;

circles.forEach((circle, index) => {
                if (mouseX >= circle.x && mouseX <= circle.x + circle.size &&
                    mouseY >= circle.y && mouseY <= circle.y + circle.size) {
                    circles.splice(index, 1);
                    score++;
                }
            });
        });

const circles = [];

function createCircle() {
            const circle = {
                x: Math.random() * canvas.width,
                y: 0,
                speed: Math.random() * 2 + 1,
                size: Math.random() * 50 + 10
            };
            circles.push(circle);
        }

function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

circles.forEach((circle, index) => {
                circle.y += circle.speed;
                
                if (circle.y > canvas.height) {
                    circles.splice(index, 1);
                }
                
                ctx.beginPath();
                ctx.arc(circle.x, circle.y, circle.size, 0, 2 * Math.PI);
                ctx.fillStyle = 'blue';
                ctx.fill();
            });

ctx.font = "30px Arial";
            ctx.fillStyle = 'black';
            ctx.fillText("Score: " + score, 10, 50);
        }

function gameLoop() {
            createCircle();
            update();

requestAnimationFrame(gameLoop);
        }

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