Game about making planet's game

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

No:42133

←

Prev Next

→

Game about making planet
Developer User18785｜Date and time 24/2/10 19:47:18
Build time 9.239 sec｜Game capacity 3.444KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Planet Maker Game</title>
    <style>
        body {
            text-align: center;
            background-color: #b7d9e0;
            overflow: hidden;
        }
        
        #canvas {
            border: 2px solid #57768c;
            margin: 50px auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        // Create the canvas and get the context
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        // Set up initial variables
        const planetSize = 150;
        const maxResources = 5;
        const resources = [];
        let score = 0;
        
        // Create the planet
        const planet = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: planetSize / 2,
            color: "#fffcfc",
            draw: function () {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        };
        
        // Create the resource objects
        function createResources() {
            for (let i = 0; i < maxResources; i++) {
                const resource = {
                    x: Math.random() * (canvas.width - planetSize) + (planetSize / 2),
                    y: Math.random() * (canvas.height - planetSize) + (planetSize / 2),
                    collected: false,
                    draw: function () {
                        if (!this.collected) {
                            ctx.beginPath();
                            ctx.arc(this.x, this.y, 20, 0, Math.PI * 2);
                            ctx.fillStyle = "#fac72d";
                            ctx.fill();
                        }
                    }
                };
                resources.push(resource);
            }
        }
        
        // Check if resources are collected
        function checkCollected() {
            for (let i = 0; i < resources.length; i++) {
                if (!resources[i].collected) {
                    const dx = resources[i].x - planet.x;
                    const dy = resources[i].y - planet.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    
                    if (distance < (planet.radius + 20)) {
                        resources[i].collected = true;
                        score++;
                        
                        if (score === maxResources) {
                            alert('Congratulations! You collected all resources and created a planet!');
                            location.reload();
                        }
                    }
                }
            }
        }
        
        // Update the game
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            planet.draw();
            
            for (let i = 0; i < resources.length; i++) {
                resources[i].draw();
            }
            
            checkCollected();
            
            requestAnimationFrame(update);
        }
        
        // Run the game
        function runGame() {
            createResources();
            update();
        }
        
        runGame();
    </script>
</body>
</html>