Gravity ball, with a gravity changer, 100 to 0 gravity, drag the ball, fun, slow gravity, box, floor's game

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

No:37579

←

Prev Next

→

Gravity ball, with a gravity changer, 100 to 0 gra..ALL
Developer User17064｜Date and time 24/1/21 6:04:19
Build time 10.246 sec｜Game capacity 3.663KB｜

Script

Sure! Here's an example of a game called "Gravity Ball" that you can play on your smartphone. It uses JavaScript and HTML in a single file, enclosed in script tags. The game allows you to control a ball with gravity by dragging it around and changing the gravity to make the ball move. You can copy the code below and save it as an HTML file to play the game:

This game adds a red ball on a gray box (floor) on the screen. You can drag the ball around by clicking and dragging on it. The ball is affected by gravity, and when it collides with the box (floor), it bounces back up. You can also change the gravity by tapping on the screen. Initially, the gravity is set to 1 (normal gravity), and by tapping, you can switch it to 0 (very low gravity). This allows for some fun, slow-motion movements of the ball. Feel free to modify and enhance the code to suit your preferences or add additional features to the game. Enjoy playing "Gravity Ball"!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

You can copy the code below and save it as an HTML file to play the game:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #container {
            width: 100%;
            height: 100%;
            position: fixed;
        }

#ball {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: red;
            border-radius: 50%;
        }

#box {
            width: 300px;
            height: 100px;
            background-color: gray;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="ball"></div>
        <div id="box"></div>
    </div>

var gravity = 1; // initial gravity setting
        var acceleration = 0.2;
        var velocity = 0;
        var posX = 0;
        var posY = 0;
        var dragging = false;

function moveBall() {
            if (dragging) {
                // Update the ball's position while dragging
                ball.style.left = posX + 'px';
                ball.style.top = posY + 'px';
            } else {
                // Update the ball's position based on gravity
                velocity += gravity * acceleration;
                posY += velocity;
                ball.style.top = posY + 'px";

// Detect collision with the box (floor)
                var boxTop = box.offsetTop;
                var boxBottom = boxTop + box.offsetHeight;
                var ballBottom = posY + ball.offsetHeight;

if (ballBottom > boxTop && ballBottom <= boxBottom) {
                    velocity = 0;
                    posY = boxTop - ball.offsetHeight;
                    ball.style.top = posY + 'px';
                }
            }

requestAnimationFrame(moveBall);
        }

ball.addEventListener('mousedown', function (e) {
            dragging = true;
        });

document.addEventListener('mousemove', function (e) {
            if (dragging) {
                posX = e.clientX;
                posY = e.clientY;
            }
        });

document.addEventListener('mouseup', function (e) {
            dragging = false;
        });

// Function to change gravity
        function changeGravity() {
            if (gravity === 1) {
                gravity = 0;
            } else {
                gravity = 1;
            }
        }

// Applying the gravity change on touch
        document.addEventListener('touchstart', function (e) {
            changeGravity();
        });

// Start the game
        moveBall();
    </script>
</body>
</html>
```

You can also change the gravity by tapping on the screen. Initially, the gravity is set to 1 (normal gravity), and by tapping, you can switch it to 0 (very low gravity). This allows for some fun, slow-motion movements of the ball.

Feel free to modify and enhance the code to suit your preferences or add additional features to the game. Enjoy playing "Gravity Ball"!