Make a two balls that walk around and cant leave the border that automatcly deflects a ball to eachother but the ball speeds up everytime it gets deflected, make the game colorfull and use animations like squish.'s game

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

No:19843

←

Prev Next

→

Make a two balls that walk around and cant leave t..ALL
Developer Angelico｜Date and time 23/10/7 5:28:41
Build time 15.669 sec｜Game capacity 2.85KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Ball Bounce Game</title>
    <style>
        #container {
            position: relative;
            width: 300px;
            height: 400px;
            border: 2px solid black;
            overflow: hidden;
        }
        
        .ball {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: red;
            animation: squish 0.5s infinite alternate;
        }

@keyframes squish {
            0% { transform: scale(1);}
            100% { transform: scale(0.8);}
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="ball1" class="ball"></div>
        <div id="ball2" class="ball"></div>
    </div>

var speed = 2;
        var directionX = 1;
        var directionY = 1;

var timer = setInterval(moveBalls, 10);

function moveBalls() {
            var ball1X = parseInt(ball1.style.left) || 0;
            var ball1Y = parseInt(ball1.style.top) || 0;
            var ball2X = parseInt(ball2.style.left) || 0;
            var ball2Y = parseInt(ball2.style.top) || 0;

ball1.style.left = ball1X + speed * directionX + "px";
            ball1.style.top = ball1Y + speed * directionY + "px";
            ball2.style.left = ball2X - speed * directionX + "px";
            ball2.style.top = ball2Y - speed * directionY + "px";

// Check if balls hit the borders
            if(ball1X >= container.offsetWidth - ball1.offsetWidth || ball1X <= 0) {
                directionX *= -1;
            }
            if(ball1Y >= container.offsetHeight - ball1.offsetHeight || ball1Y <= 0) {
                directionY *= -1;
            }
            if(ball2X >= container.offsetWidth - ball2.offsetWidth || ball2X <= 0) {
                directionX *= -1;
            }
            if(ball2Y >= container.offsetHeight - ball2.offsetHeight || ball2Y <= 0) {
                directionY *= -1;
            }

// Check if balls collide with each other
            if(isColliding(ball1, ball2)) {
                var temp = directionX;
                directionX = directionY;
                directionY = temp;
                speed++;
            }
        }

function isColliding(element1, element2) {
            var rect1 = element1.getBoundingClientRect();
            var rect2 = element2.getBoundingClientRect();

return !(rect1.right < rect2.left ||
                rect1.left > rect2.right ||
                rect1.bottom < rect2.top ||
                rect1.top > rect2.bottom);
        }
    </script>
</body>
</html>