A circle with physics that you can drag around and change the physics. Like earth gravity and moon gravity.'s game

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

No:6908

107

←

Prev Next

→

A circle with physics that you can drag around and..ALL
Developer User3943｜Date and time 23/7/4 7:21:53
Build time 32.608 sec｜Game capacity 4.009KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript. It allows you to drag a circle around and change the physics between Earth gravity and Moon gravity. Copy the code below and save it as a `.html` file. You can open the file in a web browser to play the game.

In this game, you can click and drag the circle using your smartphone touch screen. The circle will be subject to either Earth gravity or Moon gravity, depending on the state of the flag `moonGravity`. Initially, Earth gravity is active. You can toggle between Earth and Moon gravity by changing the `moonGravity` variable to `true` or `false` in the code. Please note that this is a basic example and does not include advanced physics simulation. The circle will simply bounce off the walls of the canvas without any friction or realistic physics behavior.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript. It allows you to drag a circle around and change the physics between Earth gravity and Moon gravity.

Copy the code below and save it as a `.html` file. You can open the file in a web browser to play the game.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Gravity Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Flag to determine whether Earth or Moon gravity is active
        var moonGravity = false;
        var gravity = moonGravity ? 1.6 : circle.gravity;

// Canvas setup
        var canvas = document.getElementById('gameCanvas');
        var context = canvas.getContext('2d');

// Event listeners to handle drag and drop functionality
        var isDragging = false;
        var dragOffsetX, dragOffsetY;

canvas.addEventListener('mousedown', function(e) {
            var mouseX = e.clientX - canvas.offsetLeft;
            var mouseY = e.clientY - canvas.offsetTop;

if (distance(circle.x, circle.y, mouseX, mouseY) <= circle.radius) {
                isDragging = true;
                dragOffsetX = circle.x - mouseX;
                dragOffsetY = circle.y - mouseY;
            }
        });

canvas.addEventListener('mousemove', function(e) {
            if (isDragging) {
                circle.x = e.clientX - canvas.offsetLeft + dragOffsetX;
                circle.y = e.clientY - canvas.offsetTop + dragOffsetY;
            }
        });

canvas.addEventListener('mouseup', function() {
            isDragging = false;
        });

// Update function
        function update() {
            if (moonGravity) {
                gravity = 1.6; // Moon gravity in m/s^2
            } else {
                gravity = circle.gravity;
            }

// Apply gravity
            circle.velocityY += gravity;

// Update circle position
            circle.x += circle.velocityX;
            circle.y += circle.velocityY;

// Bounce off walls
            if (circle.x + circle.radius > canvas.width || circle.x - circle.radius < 0) {
                circle.velocityX *= -1;
            }

if (circle.y + circle.radius > canvas.height || circle.y - circle.radius < 0) {
                circle.velocityY *= -1;
            }

// Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw circle
            context.beginPath();
            context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
            context.fillStyle = circle.color;
            context.fill();
            context.closePath();

// Request next frame
            requestAnimationFrame(update);
        }

// Start game loop
        update();

// Utility function to calculate distance between two points
        function distance(x1, y1, x2, y2) {
            var dx = x2 - x1;
            var dy = y2 - y1;
            return Math.sqrt(dx * dx + dy * dy);
        }
    </script>
</body>
</html>
```

Please note that this is a basic example and does not include advanced physics simulation. The circle will simply bounce off the walls of the canvas without any friction or realistic physics behavior.