Solar system 3d in center of page's game

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

No:15585

119

←

Prev Next

→

Solar system 3d in center of page
Developer User6688｜Date and time 23/9/10 2:12:52
Build time 29.802 sec｜Game capacity 3.632KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

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

// Create an array of solar system objects
        const solarSystem = [
            {
                name: "Solar",
                radius: 50,
                color: "yellow",
                posX: canvas.width / 2,
                posY: canvas.height / 2,
                orbitRadius: 0,
                orbitSpeed: 0,
            },
            {
                name: "Mercury",
                radius: 10,
                color: "gray",
                orbitRadius: 100,
                orbitSpeed: 0.02,
            },
            {
                name: "Venus",
                radius: 15,
                color: "orange",
                orbitRadius: 150,
                orbitSpeed: 0.015,
            },
            {
                name: "Earth",
                radius: 20,
                color: "blue",
                orbitRadius: 200,
                orbitSpeed: 0.01,
            },
            {
                name: "Mars",
                radius: 18,
                color: "red",
                orbitRadius: 250,
                orbitSpeed: 0.008,
            },
            {
                name: "Jupiter",
                radius: 40,
                color: "tan",
                orbitRadius: 350,
                orbitSpeed: 0.005,
            },
            {
                name: "Saturn",
                radius: 35,
                color: "brown",
                orbitRadius: 420,
                orbitSpeed: 0.004,
            },
            {
                name: "Uranus",
                radius: 25,
                color: "lightblue",
                orbitRadius: 480,
                orbitSpeed: 0.003,
            },
            {
                name: "Neptune",
                radius: 23,
                color: "darkblue",
                orbitRadius: 550,
                orbitSpeed: 0.002,
            },
        ];

// Game loop
        function gameLoop() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the solar system
            for (let i = 0; i < solarSystem.length; i++) {
                const planet = solarSystem[i];

// Calculate current position
                const posX = planet.posX + Math.cos(planet.orbitSpeed) * planet.orbitRadius;
                const posY = planet.posY + Math.sin(planet.orbitSpeed) * planet.orbitRadius;

// Update position
                planet.posX = posX;
                planet.posY = posY;

// Draw planet
                ctx.beginPath();
                ctx.arc(posX, posY, planet.radius, 0, 2 * Math.PI);
                ctx.fillStyle = planet.color;
                ctx.fill();
                ctx.closePath();
            }

// Update game objects
            update();

// Request the next frame
            requestAnimationFrame(gameLoop);
        }

// Function to update game logic
        function update() {
            // Add game logic here
        }

// Start the game loop
        gameLoop();
    </script>
</body>
</html>