A square walking in a box and moves by itself but it gets creepier every 5 seconds, every 5 seconds turns the background 5% darker, don't move fast, gets more corrupted, and the cube gets slower's game

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

No:37624

←

Prev Next

→

A square walking in a box and moves by itself but ..ALL
Developer User17064｜Date and time 24/1/21 6:45:27
Build time 7.663 sec｜Game capacity 2.641KB｜

Script

Sure! Here's an example of how you can implement the game of a square walking in a box and getting creepier every 5 seconds. The background will darken gradually, the movement speed of the square will decrease, and the visuals will become more corrupted:

In this game, the square starts moving from the left side of the box towards the right side. The background gradually darkens by 5% every 5 seconds, and the movement speed of the square decreases over time. The `filter` property in the CSS animation adds a creepy effect by reducing the brightness of the square at certain keyframe intervals.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Creepy Walking Square Game</title>
    <style>
        body {
            background-color: #000;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

#box {
            width: 200px;
            height: 200px;
            background-color: #fff;
            position: relative;
            animation: creepiness 5s infinite linear;
        }
        
        @keyframes creepiness {
            0% {
                filter: brightness(100%);
                transform: translateX(0);
            }
            50% {
                filter: brightness(100%);
            }
            90%, 100% {
                filter: brightness(95%);
                transform: translateX(50%);
            }
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        // Set initial variables
        let darkness = 10000;
        let speed = 50;
        let interval;

// Function to darken the background every 5 seconds
        function darkenBackground() {
            darkness -= 5;
            document.body.style.backgroundColor = `hsl(0, 0%, ${darkness}%)`;
        }

// Function to move the box at a decreasing speed
        function moveBox() {
            speed *= 0.95; // Slow down the speed gradually
            const box = document.getElementById('box');
            const currentPos = parseInt(box.style.left) || 0;
            const newPos = currentPos + speed;
            box.style.left = `${newPos}px`;

if (newPos <= window.innerWidth - 200) {
                // Continue moving until reaching the edge of the box
                interval = setTimeout(moveBox, 16);
            }
        }

// Start the game
        interval = setInterval(() => {
            darkenBackground();
            moveBox();
        }, 5000);
    </script>
</body>
</html>
```