AI game creator

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

No:16310

105

←

Prev Next

→

particle
Developer User7226｜Date and time 23/9/17 5:41:40
Build time 30.124 sec｜Game capacity 4.093KB｜

Script

To create a game using JavaScript within a single HTML file and targeting smartphone operation, we can use particle-themed graphics and make it an interactive game where the user tries to avoid colliding with particles on the screen. Here's an example implementation:

This HTML file contains a canvas element where the game is rendered using the `
` tag. Pictograms are not used, but you can modify and style the canvas drawing methods to represent particles and the player as pictograms if desired. When the game is run, particles will move randomly around the screen. The player's goal is to avoid colliding with these particles. The player can control the character's horizontal position by dragging their finger on the screen. If a collision occurs, an alert is shown saying "Game Over!" and the page is reloaded to start a new game. Note: To test this game, save the code in a text editor with an .html extension, and open it in a web browser on your smartphone.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Particle Escape Game</title>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    // Enclosing the JavaScript code within script tags
    (function() {
      // Get the game canvas element
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');

const particleSize = 20; // Size of the particles
      const playerSize = 40; // Size of the player

// Initialize player position
      let playerX = canvas.width / 2;
      let playerY = canvas.height - playerSize;
      
      // Initialize particles position and velocity
      let particles = [];
      for (let i = 0; i < 10; i++) {
        particles.push({
          x: Math.random() * (canvas.width - particleSize),
          y: Math.random() * (canvas.height - particleSize),
          vx: Math.random() * 2 - 1, // Random x velocity between -1 and 1
          vy: Math.random() * 2 - 1, // Random y velocity between -1 and 1
        });
      }

function update() {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update particles position
        particles.forEach((particle) => {
          particle.x += particle.vx;
          particle.y += particle.vy;

// Wrap particles around the canvas edges
          if (particle.x < 0) particle.x = canvas.width;
          if (particle.x > canvas.width) particle.x = 0;
          if (particle.y < 0) particle.y = canvas.height;
          if (particle.y > canvas.height) particle.y = 0;

// Draw particles
          ctx.fillRect(particle.x, particle.y, particleSize, particleSize);

// Check collision with player
          if (
            particle.x < playerX + playerSize &&
            particle.x + particleSize > playerX &&
            particle.y < playerY + playerSize &&
            particle.y + particleSize > playerY
          ) {
            // Collision detected, end game
            alert("Game Over!");
            location.reload();
          }
        });

// Draw player
        ctx.fillRect(playerX, playerY, playerSize, playerSize);

// Recursive call to update the game
        requestAnimationFrame(update);
      }

// Handle touch input for player movement
      document.addEventListener('touchstart', (event) => {
        const touchX = event.touches[0].clientX;
        playerX = touchX - playerSize / 2; // Set player position based on touch position
      });

document.addEventListener('touchmove', (event) => {
        event.preventDefault(); // Prevent page scrolling on touchmove
        const touchX = event.touches[0].clientX;
        playerX = touchX - playerSize / 2; // Set player position based on touch position
      });

// Start the game
      update();
    })();
  </script>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

#gameCanvas {
      background-color: #000;
      width: 100%;
      height: 100vh;
      touch-action: none;
    }
  </style>
</body>
</html>
```

This HTML file contains a canvas element where the game is rendered using the `<script>` tag. Pictograms are not used, but you can modify and style the canvas drawing methods to represent particles and the player as pictograms if desired.

When the game is run, particles will move randomly around the screen. The player's goal is to avoid colliding with these particles. The player can control the character's horizontal position by dragging their finger on the screen. If a collision occurs, an alert is shown saying "Game Over!" and the page is reloaded to start a new game.

Note: To test this game, save the code in a text editor with an .html extension, and open it in a web browser on your smartphone.