AI game creator

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

No:37942

←

Prev Next

→

particle
Developer User17159｜Date and time 24/1/21 22:18:50
Build time 13.449 sec｜Game capacity 3.309KB｜

Script

Sure! Here's a simple game implemented as a single HTML file, using JavaScript and enclosed in script tags. The game is called "Particle Catcher" and you can play it on a smartphone. Pictograms are used to represent the particles.

To play the game, simply save the above code as an HTML file (e.g., `particle_catcher.html`) and open it in any web browser on your smartphone. In the game, particles will fall from the top of the screen, and you need to tap on them to catch them. Each caught particle will increase your score by 1, while missing a particle will decrease your score by 1. The score will be displayed at the top left corner of the screen. Enjoy playing Particle Catcher!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Particle Catcher</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f5f5f5;
    }

#gameCanvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Particle class
    function Particle(x, y, color) {
      this.x = x;
      this.y = y;
      this.color = color;
      this.size = 20;

this.draw = function() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.size, this.size);
      }

this.update = function() {
        this.y += 5;
        this.draw();
      }
    }

// Game loop
    function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

spawnParticles();
      updateParticles();

// Display score
      ctx.font = "24px Arial";
      ctx.fillStyle = "black";
      ctx.fillText("Score: " + score, 10, 30);

requestAnimationFrame(gameLoop);
    }

// Spawn particles randomly
    function spawnParticles() {
      if (Math.random() < 0.05) {
        var x = Math.random() * (canvas.width - 20);
        var y = -20;
        var color = randomColor();
        var particle = new Particle(x, y, color);
        particles.push(particle);
      }
    }

// Update particles' positions and check collision
    function updateParticles() {
      for (var i = 0; i < particles.length; i++) {
        particles[i].update();

if (particles[i].y > canvas.height) {
          particles.splice(i, 1);
          score--;
        }
      }
    }

// Handle touch event
    canvas.addEventListener("touchstart", function(event) {
      var touchX = event.touches[0].clientX;
      var touchY = event.touches[0].clientY;

for (var i = 0; i < particles.length; i++) {
        if (touchX > particles[i].x && touchX < particles[i].x + particles[i].size &&
            touchY > particles[i].y && touchY < particles[i].y + particles[i].size) {
          particles.splice(i, 1);
          score++;
          break;
        }
      }
    });

// Generate random hex color
    function randomColor() {
      var letters = "0123456789ABCDEF";
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

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