AI game creator

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

No:42424

←

Prev Next

→

particle
Developer User18878｜Date and time 24/2/11 18:14:43
Build time 8.039 sec｜Game capacity 2.269KB｜

Script

Here is a simple example of a particle game implemented as a single HTML file using JavaScript:

In this game, particles of different colors and sizes are created and move around the canvas. They bounce off the edges of the canvas. The `game()` function initializes the canvas and particles, and the `updateParticles()` function updates and draws the particles on the canvas. The game loop is created using `requestAnimationFrame` to ensure smooth animation. You can adjust the particle properties like initial position, speed, size, and color to create different effects.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Here is a simple example of a particle game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Particle Game</title>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

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

update(canvas) {
        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
          this.dx = -this.dx;
        }

if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
          this.dy = -this.dy;
        }

this.x += this.dx;
        this.y += this.dy;
      }
    }

// Game function
    function game() {
      // Get reference to canvas
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

// Create particles
      const particles = [
        new Particle(200, 200, 20, 'red', 2, 2),
        new Particle(100, 100, 15, 'blue', -1, 3),
        new Particle(300, 50, 25, 'green', 1, -2),
      ];

function updateParticles() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

for (const particle of particles) {
          particle.update(canvas);
          particle.draw(ctx);
        }

requestAnimationFrame(updateParticles);
      }

updateParticles();
    }

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