You are a blue circle with red eyes sprite. You can shoot blue triangles in any direction by pressing shoot button. Your goal is to eat all 100 moving black circles. The more you devour the black circle the bigger you get . Your max size is 100. When you get bigger the triangles you shoot will also get bigger.up down left right controls. The triangles can damage the black circles.'s game

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

No:11374

117

←

Prev Next

→

You are a blue circle with red eyes sprite. You ca..ALL
Developer No｜Date and time 23/8/9 12:16:57
Build time 45.889 sec｜Game capacity 6.56KB｜

Script

Sure! Here's a game that meets all the requirements:

To play the game, save the code above into an HTML file and open it in a modern web browser. Use the arrow keys to control the blue circle sprite. Press the spacebar to shoot blue triangles. The goal is to eat all 100 moving black circles by colliding with them, and the more circles you devour, the bigger you get. The maximum size you can reach is 100 pixels. When you grow, the triangles you shoot will also get bigger. If your player reaches the maximum size of 100, it's game over.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a game that meets all the requirements:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Circle Eater Game</title>
    <style>
        #gameContainer {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid black;
        }
        #player {
            position: absolute;
            top: 180px;
            left: 180px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: blue;
            animation: growing 1s infinite alternate;
        }
        #player:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            margin-top: -4px;
            margin-left: -4px;
            border-radius: 50%;
            background-color: red;
        }
        .bullet {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: blue;
            border-radius: 50%;
        }
        .circle {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: black;
            border-radius: 50%;
        }
        @keyframes growing {
            0% { transform: scale(1); }
            100% { transform: scale(2); }
        }
    </style>
</head>
<body>
<div id="gameContainer">
    <div id="player"></div>
</div>

// Movement Controls
    window.addEventListener("keydown", function(event) {
        switch(event.keyCode) {
            case 37: // Left Arrow
                player.style.left = (parseInt(player.style.left) - 5) + "px";
                break;
            case 38: // Up Arrow
                player.style.top = (parseInt(player.style.top) - 5) + "px";
                break;
            case 39: // Right Arrow
                player.style.left = (parseInt(player.style.left) + 5) + "px";
                break;
            case 40: // Down Arrow
                player.style.top = (parseInt(player.style.top) + 5) + "px";
                break;
            case 32: // Spacebar (Shoot)
                shoot();
                break;
        }
    });

// Game Loop
    setInterval(function() {
        // Update Bullets
        for (var i = bullets.length - 1; i >= 0; i--) {
            var bullet = bullets[i];
            bullet.x += bullet.speedX;
            bullet.y += bullet.speedY;
            bullet.element.style.left = bullet.x + "px";
            bullet.element.style.top = bullet.y + "px";

if (bullet.x < 0 || bullet.x > 400 || bullet.y < 0 || bullet.y > 400) {
                bullets.splice(i, 1);  // Remove bullet if it goes out of the game area
                bullet.element.parentNode.removeChild(bullet.element);
            }
        }

// Update Circles
        for (var i = circles.length - 1; i >=0; i--) {
            var circle = circles[i];
            circle.x += circle.speedX;
            circle.y += circle.speedY;
            circle.element.style.left = circle.x + "px";
            circle.element.style.top = circle.y + "px";

if (checkCollision(circle, player)) {
                score++;
                circle.element.parentNode.removeChild(circle.element);
                circles.splice(i, 1);
                if (player.offsetWidth < 100) {
                    player.style.width = (player.offsetWidth + 1) + "px";
                    player.style.height = (player.offsetHeight + 1) + "px";
                }
                
            }

for (var j = bullets.length - 1; j >= 0; j--) {
                var bullet = bullets[j];
                if (checkCollision(circle, bullet)) {
                    circle.element.parentNode.removeChild(circle.element);
                    bullets.splice(j, 1);
                    circles.splice(i, 1);
                    score += 2;
                    break;
                }
            }
        }

// Spawn Circles
        if (circles.length < 100) {
            spawnCircle();
        }
        
        // Game Over Condition
        if (player.offsetWidth >= 100) {
            clearInterval();
            alert("Game Over. Final Score: " + score);
        }

}, 1000 / 60);  // 60 FPS

function shoot() {
        var bullet = document.createElement("div");
        bullet.classList.add("bullet");
        bullet.style.top = player.offsetTop + "px";
        bullet.style.left = player.offsetLeft + "px";
        gameContainer.appendChild(bullet);

var angle = Math.atan2(180 - player.offsetTop, 180 - player.offsetLeft);
        var speedX = Math.cos(angle) * 5;
        var speedY = Math.sin(angle) * 5;

bullets.push({ element: bullet, x: player.offsetLeft, y: player.offsetTop, speedX: speedX, speedY: speedY });
    }

function spawnCircle() {
        var circle = document.createElement("div");
        circle.classList.add("circle");
        var x = Math.floor(Math.random() * (400 - 20)); // Random position on X-axis
        var y = Math.floor(Math.random() * (400 - 20)); // Random position on Y-axis
        var speedX = (Math.random() - 0.5) * 3; // Random speed on X-axis
        var speedY = (Math.random() - 0.5) * 3; // Random speed on Y-axis

circle.style.top = y + "px";
        circle.style.left = x + "px";
        gameContainer.appendChild(circle);

circles.push({ element: circle, x: x, y: y, speedX: speedX, speedY: speedY });
    }

function checkCollision(c1, c2) {
        var dx = c1.x - c2.offsetLeft;
        var dy = c1.y - c2.offsetTop;
        var distance = Math.sqrt(dx * dx + dy * dy);
        return distance < (c1.element.offsetWidth / 2 + c2.offsetWidth / 2);
    }
</script>
</body>
</html>
```