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

No:21298

←

Prev Next

→

particle
Developer User9749｜Date and time 23/10/14 19:08:43
Build time 107.303 sec｜Game capacity 4.343KB｜

Script

Particle Catcher

Use the left and right arrow buttons to move the basket and catch the falling particles!

Save the above code as a `.html` file and open it in a web browser to play the game. The game will display a canvas where you can control the basket using the left and right arrow buttons on your smartphone. The objective is to catch falling particles using the basket, and the game will keep track of your score. Once a particle reaches the bottom of the screen, the game will be over, and your final score will be displayed.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Particle Catcher</title>
  <style>
    canvas {
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <h1>Particle Catcher</h1>
  <p>Use the left and right arrow buttons to move the basket and catch the falling particles!</p>
  <canvas id="gameCanvas" width="320" height="480"></canvas>

// Event listeners for arrow keys
    document.addEventListener('keydown', handleKeyDown);
    document.addEventListener('keyup', handleKeyUp);

// Functions to handle key events
    function handleKeyDown(event) {
      if (event.key === 'ArrowLeft') {
        basket.x -= basket.speed;
      }
      if (event.key === 'ArrowRight') {
        basket.x += basket.speed;
      }
    }

function handleKeyUp(event) {
      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
        basket.speed = 5;
      }
    }

// Function to draw the basket
    function drawBasket() {
      ctx.fillStyle = '#000';
      ctx.fillRect(basket.x, basket.y, basket.width, basket.height);
    }

// Function to generate particles
    function generateParticles() {
      var particle = {
        x: Math.random() * canvas.width,
        y: 0,
        radius: 10,
        speed: Math.random() * 2 + 1
      };
      particles.push(particle);
    }

// Function to update the game state
    function update() {
      if (!gameover) {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw basket
        drawBasket();

// Move basket within canvas bounds
        if (basket.x < 0) {
          basket.x = 0;
        }
        if (basket.x + basket.width > canvas.width) {
          basket.x = canvas.width - basket.width;
        }

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

// Move particles
          particle.y += particle.speed;

// Check collision with basket
          if (
            particle.y + particle.radius > basket.y &&
            particle.x + particle.radius > basket.x &&
            particle.x - particle.radius < basket.x + basket.width
          ) {
            particles.splice(i, 1);
            score++;
          }

// Draw particles
          ctx.beginPath();
          ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
          ctx.fillStyle = '#f00';
          ctx.fill();
          ctx.closePath();

// Game over condition
          if (particle.y + particle.radius > canvas.height) {
            gameover = true;
            break;
          }
        }

// Generate particles
        if (Math.random() < 0.02) {
          generateParticles();
        }

// Display score
        ctx.fillStyle = '#000';
        ctx.font = '20px Arial';
        ctx.fillText('Score: ' + score, 10, 30);

// Call update function recursively
        requestAnimationFrame(update);
      } else {
        // Game over screen
        ctx.fillStyle = '#000';
        ctx.font = '30px Arial';
        ctx.fillText('Game Over', canvas.width / 2 - 80, canvas.height / 2);
        ctx.font = '20px Arial';
        ctx.fillText('Your Score: ' + score, canvas.width / 2 - 65, canvas.height / 2 + 30);
      }
    }

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