A square walking in a box and moves by itself, gets teleported to left when off screen but it gets creepier every 5 seconds, every 5 seconds turns the background 5% darker's game

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

No:37619

←

Prev Next

→

A square walking in a box and moves by itself, get..ALL
Developer User17064｜Date and time 24/1/21 6:40:07
Build time 9.152 sec｜Game capacity 2.453KB｜

Script

Sure, here's an example of a game where a square moves within a box and gets creepier over time, with the background getting darker every 5 seconds. It is implemented as a single HTML file and uses JavaScript:

In this game, a red square moves horizontally within a box. When the square reaches the right edge of the box, it gets teleported to the left edge. Every time the square's x-coordinate is a multiple of 50 and a multiple of 10, it gets creepier. The background slowly becomes darker, and the color of the square changes to black. Please copy the code above and save it as an HTML file to play the game. Open the saved file on your smartphone, and you should see the square moving, getting creepier, and the background gradually getting darker every 5 seconds.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Creepy Square Game</title>
    <style>
        #box {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 30px auto;
            overflow: hidden;
        }

#square {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            transition: all 0.5s ease-in-out;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="square"></div>
    </div>

function moveSquare() {
            var x = parseInt(square.style.left) || 0;
            var y = parseInt(square.style.top) || 0;

if (x > box.clientWidth - 50) {
                x = -50;
            } else {
                x += 10;
            }

square.style.left = x + "px";
            square.style.top = y + "px";

if ((x % 50 === 0) && ((x / 50) % 10 === 0)) {
                makeCreepy();
            }

setTimeout(moveSquare, 500);
        }

function makeCreepy() {
            isCreepy = true;

if (darknessLevel < 20) {
                darknessLevel += 5;
                var darkness = darknessLevel / 100;
                document.body.style.backgroundColor = "rgba(0, 0, 0, " + darkness + ")";
            }

square.style.backgroundColor = "black";
        }

moveSquare();
    </script>
</body>
</html>
```

Please copy the code above and save it as an HTML file to play the game. Open the saved file on your smartphone, and you should see the square moving, getting creepier, and the background gradually getting darker every 5 seconds.