Bouncing ball in a box but it gets more corrupted's game

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

No:37605

←

Prev Next

→

Bouncing ball in a box but it gets more corrupted
Developer User17064｜Date and time 24/1/21 6:30:59
Build time 8.585 sec｜Game capacity 2.542KB｜

Script

Sure! Here's an example of a simple game where a bouncing ball gets increasingly corrupted. The game can be played on a smartphone and uses pictograms for visual elements. The game is implemented as a single HTML file enclosed in script tags.

In this game, a ball will bounce within a box. Every 1 second, the ball may become corrupted, changing its color momentarily. The corruption effect adds a red background to the ball. The ball's movement is controlled by updating its position using CSS `left` and `top` properties. The `animate` function is called recursively using `requestAnimationFrame` to create smooth animation. You can copy the above code into an HTML file and run it on a web browser to play the finished game. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Corrupted Ball Game</title>
  <style>
    #box {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid black;
      margin: 0 auto;
    }

#ball {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: blue;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

.corrupted {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="ball"></div>
  </div>

// Ball movement variables
    let x = 200; // initial x position
    let y = 200; // initial y position
    let dx = 2; // x-axis velocity
    let dy = 2; // y-axis velocity

// Animation loop
    function animate() {
      // Move the ball
      x += dx;
      y += dy;

// Check for collision with the box boundaries
      if (x + 25 > 400 || x - 25 < 0) {
        dx *= -1; // reverse the x-axis velocity
      }
      if (y + 25 > 400 || y - 25 < 0) {
        dy *= -1; // reverse the y-axis velocity
      }

// Check for corruption every 1 second
      if (Math.floor(Date.now() / 1000) % 1 === 0) {
        isCorrupted = !isCorrupted;

if (isCorrupted) {
          // Apply corruption effect to the ball
          ball.classList.add("corrupted");
        } else {
          // Restore the original ball appearance
          ball.classList.remove("corrupted");
        }
      }

// Update ball position
      ball.style.left = x + "px";
      ball.style.top = y + "px";

requestAnimationFrame(animate);
    }

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

You can copy the above code into an HTML file and run it on a web browser to play the finished game. Enjoy!