AI game creator

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

No:42176

←

Prev Next

→

particle
Developer User18821｜Date and time 24/2/10 23:26:28
Build time 12.942 sec｜Game capacity 3.869KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using JavaScript and enclosed in script tags. This game is based on the concept of particles. To play, you have to tap on the particles to make them disappear within a time limit.

To play the game, open the HTML file on a smartphone or any browser. You'll see a canvas with red squares representing particles. Tap on the squares to make them disappear and earn points within the given time limit. Your score will be displayed at the top left, and the remaining time will be shown at the top right. When the time runs out, the game will end, and your final score will be displayed on the screen.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Particle Game</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    // Game variables
    var canvas, ctx, particles, score, timeLeft, particleSize, timer, gameOver;

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

particles = [];
      score = 0;
      timeLeft = 30;
      particleSize = 30;
      gameOver = false;

// Generate particles
      generateParticles();

// Start the game loop
      update();

// Handle user taps
      canvas.addEventListener("touchstart", handleTap);
    }

// Generate particles randomly on the canvas
    function generateParticles() {
      for (var i = 0; i < 10; i++) {
        var x = Math.random() * (canvas.width - particleSize);
        var y = Math.random() * (canvas.height - particleSize);
        particles.push({ x: x, y: y, size: particleSize, visible: true });
      }
    }

// Update the game state
    function update() {
      if (!gameOver) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw particles on the canvas
        for (var i = 0; i < particles.length; i++) {
          var particle = particles[i];

if (particle.visible) {
            drawParticle(particle);
          }
        }

// Update the timer
        timeLeft -= 1;

// Check if the game ended
        if (timeLeft <= 0) {
          gameOver = true;
          endGame();
        }

ctx.fillStyle = "#000";
        ctx.font = "24px Arial";
        ctx.fillText("Score: " + score, 10, 30);
        ctx.fillText("Time: " + timeLeft, 10, 60);

// Run the update function in the next frame
        requestAnimationFrame(update);
      }
    }

// Draw a particle on the canvas
    function drawParticle(particle) {
      ctx.fillStyle = "#FF0000";
      ctx.fillRect(particle.x, particle.y, particle.size, particle.size);
    }

// Handle user taps
    function handleTap(e) {
      if (gameOver) {
        return;
      }

var x = e.touches[0].clientX;
      var y = e.touches[0].clientY;

for (var i = 0; i < particles.length; i++) {
        var particle = particles[i];

if (
          x >= particle.x &&
          x <= particle.x + particle.size &&
          y >= particle.y &&
          y <= particle.y + particle.size
        ) {
          if (particle.visible) {
            particle.visible = false;
            score += 10;
          }
        }
      }
    }

// End the game
    function endGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "#000";
      ctx.font = "48px Arial";
      ctx.fillText("Game Over!", canvas.width / 2 - 120, canvas.height / 2);
      ctx.fillText("Your score: " + score, canvas.width / 2 - 140, canvas.height / 2 + 48);
    }

// Start the game when the page loads
    window.onload = function () {
      init();
    };
  </script>
</body>
</html>
```