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

No:25251

←

Prev Next

→

particle
Developer User12333｜Date and time 23/11/19 23:45:10
Build time 158.391 sec｜Game capacity 2.896KB｜

Script

Sure! Here's an example of a simple game written as a single HTML file, enclosed within script tags, and implemented using JavaScript for smartphone operation. The game uses pictograms to enhance the user experience:

Particle Game

In this game, you control a red square (the player) using touch gestures on your smartphone. Your goal is to catch the blue particles that are falling from the top of the screen. When a collision occurs, your score increases by one, and the particle position resets. Note that this is just a simple example, and you can add more complexity, features, and game mechanics as desired.

←

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>
    body {
      text-align: center;
      margin-top: 100px;
      font-family: Arial, sans-serif;
    }

#canvas {
      border: 1px solid black;
      width: 300px;
      height: 400px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <h1>Particle Game</h1>
  <canvas id="canvas"></canvas>

// Set the initial player position
    let playerX = canvas.width / 2;
    let playerY = canvas.height - 30;
    const playerSize = 20;

// Set the initial particle position and size
    let particleX = Math.random() * (canvas.width - playerSize);
    let particleY = 0;
    const particleSize = 10;

// Draw the player and particle on the canvas
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Draw the player
      ctx.fillStyle = 'red';
      ctx.fillRect(playerX, playerY, playerSize, playerSize);
      
      // Draw the particle
      ctx.fillStyle = 'blue';
      ctx.fillRect(particleX, particleY, particleSize, particleSize);

requestAnimationFrame(draw);
    }

// Update the game state
    function update() {
      // Move the particle downwards
      particleY += 2;
      
      // Check for collision with player
      if (
        particleY + particleSize >= playerY &&
        particleX + particleSize >= playerX &&
        particleX <= playerX + playerSize
      ) {
        // Collision detected! Increase the score and reset particle position
        score++;
        particleX = Math.random() * (canvas.width - playerSize);
        particleY = 0;
      }

requestAnimationFrame(update);
    }

// Handle touch events to move the player left/right
    canvas.addEventListener('touchmove', function(event) {
      const touchX = event.touches[0].clientX;
      const canvasRect = canvas.getBoundingClientRect();
      const canvasX = touchX - canvasRect.left;

playerX = Math.max(0, Math.min(canvas.width - playerSize, canvasX - playerSize / 2));
    });

// Start the game
    let score = 0;
    draw();
    update();
  </script>
</body>
</html>
```

Note that this is just a simple example, and you can add more complexity, features, and game mechanics as desired.