Crazy randomness, rainbows, bouncing balls, flashing background, rainbow text saying "SO COOL", MIND BLOWING!'s game

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

No:37528

←

Prev Next

→

Crazy randomness, rainbows, bouncing balls, flashi..ALL
Developer User17064｜Date and time 24/1/21 5:00:32
Build time 14.886 sec｜Game capacity 4.08KB｜

Script

Sure! Here's a single HTML file that contains JavaScript and implements a simple game with crazy randomness, bouncing balls, a flashing background, rainbow text saying "SO COOL", and mind-blowing effects. You can play it assuming smartphone operation. Please note that without an HTML environment, you won't be able to see the visual effects, but you can still see the code structure.

SO COOL

This HTML file creates a canvas element on which it draws bouncing balls with random colors and sizes. Additionally, it periodically changes the background color and applies a mind-blowing effect to the text saying "SO COOL". You can see a visual representation by copying this code into an HTML file and opening it in a web browser.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }

#gameCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

#coolText {
      font-size: 60px;
      font-weight: bold;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      animation: rainbowText 2s infinite;
    }

@keyframes rainbowText {
      0% { color: red; }
      14% { color: orange; }
      28% { color: yellow; }
      42% { color: green; }
      57% { color: blue; }
      71% { color: indigo; }
      85% { color: violet; }
      100% { color: red; }
    }
  </style>
</head>
<body>
  <div id="gameCanvas"></div>
  <div id="coolText">SO COOL</div>

// Add canvas to the document
    document.getElementById("gameCanvas").appendChild(canvas);

// Ball class
    class Ball {
      constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.dx = Math.random() * 6 - 3; // Random horizontal speed
        this.dy = Math.random() * 6 - 3; // Random vertical speed
        this.radius = radius;
        this.color = color;
      }

draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
      }

update() {
        this.x += this.dx;
        this.y += this.dy;

if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
          this.dx = -this.dx; // Reverse horizontal speed if ball hits the sides
        }

if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
          this.dy = -this.dy; // Reverse vertical speed if ball hits the top/bottom
        }
      }
    }

const balls = [];

// Create initial balls
    for (let i = 0; i < 15; i++) {
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      const radius = Math.random() * 30 + 15;
      const color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;

balls.push(new Ball(x, y, radius, color));
    }

// Update and draw balls
    function animate() {
      requestAnimationFrame(animate);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      balls.forEach(ball => {
        ball.update();
        ball.draw();
      });
    }

// Start the animation
    animate();
    
    // Mind-blowing background effect
    setInterval(() => {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
    }, 500);

// Mind-blowing text effect
    setInterval(() => {
      const coolText = document.getElementById("coolText");
      if (coolText.style.textShadow === "") {
        coolText.style.textShadow = "0 0 10px rgba(255, 255, 255, 0.8)";
      } else {
        coolText.style.textShadow = "";
      }
    }, 300);
  </script>
</body>
</html>
```