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

No:28662

←

Prev Next

→

particle
Developer User14206｜Date and time 23/12/13 23:07:18
Build time 66.496 sec｜Game capacity 4.408KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript:

Particle Game

Score: 0

Game Over

This game is a simple particle simulation where particles bounce off the walls of a canvas. The objective is to move your cursor over the particles to "capture" them and increase your score. When a particle is captured, it resets to a random position with a new trajectory. The game loop continuously updates and draws the particles on the canvas, while also checking for collisions and updating the score. The game ends when the player decides to stop. Please note that due to the limitations of text-based communication, it's not possible to provide a visual representation of the game using pictograms.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Particle Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    canvas {
      border: 1px solid #000;
      margin: 20px auto;
    }
    #score {
      font-size: 18px;
      margin-bottom: 10px;
    }
    #game-over {
      font-size: 24px;
      color: red;
      display: none;
    }
  </style>
</head>
<body>
  <h1>Particle Game</h1>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <div id="score">Score: 0</div>
  <div id="game-over">Game Over</div>

// Create particle object
    function Particle(x, y, speedX, speedY, size, color) {
      this.x = x;
      this.y = y;
      this.speedX = speedX;
      this.speedY = speedY;
      this.size = size;
      this.color = color;

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

this.update = function() {
        if (!gameover) {
          this.x += this.speedX;
          this.y += this.speedY;

// Check particle boundaries
          if (this.x + this.size > canvas.width || this.x - this.size < 0) {
            this.speedX = -this.speedX;
          }
          if (this.y + this.size > canvas.height || this.y - this.size < 0) {
            this.speedY = -this.speedY;
          }

// Check collision with mouse
          if (
            this.x < mouseX + 10 &&
            this.x > mouseX - 10 &&
            this.y < mouseY + 10 &&
            this.y > mouseY - 10
          ) {
            score++;
            scoreElement.innerHTML = "Score: " + score;
            this.reset();
          }
        }
      };

this.reset = function() {
        this.x = Math.random() * (canvas.width - this.size * 2) + this.size;
        this.y = Math.random() * (canvas.height - this.size * 2) + this.size;
        this.speedX = (Math.random() - 0.5) * 8;
        this.speedY = (Math.random() - 0.5) * 8;
      };
    }

// Initialize particles
    var particles = [];
    for (var i = 0; i < 25; i++) {
      var size = Math.random() * 20 + 10;
      var x = Math.random() * (canvas.width - size * 2) + size;
      var y = Math.random() * (canvas.height - size * 2) + size;
      var speedX = (Math.random() - 0.5) * 8;
      var speedY = (Math.random() - 0.5) * 8;
      var color = "rgb(" + Math.random() * 255 + "," + Math.random() * 255 + "," + Math.random() * 255 + ")";
      particles.push(new Particle(x, y, speedX, speedY, size, color));
    }

// Mouse movement event listener
    var mouseX = 0;
    var mouseY = 0;
    canvas.addEventListener("mousemove", function(event) {
      mouseX = event.clientX - canvas.getBoundingClientRect().left;
      mouseY = event.clientY - canvas.getBoundingClientRect().top;
    });

// Game Loop
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw and update particles
      for (var i = 0; i < particles.length; i++) {
        particles[i].draw();
        particles[i].update();
      }

// Check game over condition
      if (!gameover) {
        requestAnimationFrame(gameLoop);
      } else {
        gameOverElement.style.display = "block";
      }
    }

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

The game loop continuously updates and draws the particles on the canvas, while also checking for collisions and updating the score. The game ends when the player decides to stop.

Please note that due to the limitations of text-based communication, it's not possible to provide a visual representation of the game using pictograms.