AI game creator

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

No:34081

191

←

Prev Next

→

Pixel Quest
Developer User11298｜Date and time 24/1/8 5:32:55
Build time 32.324 sec｜Game capacity 3.394KB｜

Script

Game Over! Tap to restart

In this example, I've created a simple game called "Pixel Quest" implemented as a single HTML file. The game is played on a smartphone and uses pictograms for the player and obstacles. The goal of the game is to avoid colliding with the obstacles as the player moves from left to right. The player is controlled by tapping on the screen. When a collision occurs, the game ends, and the player can restart by tapping again. The game elements are drawn using the canvas API and the images for the player and obstacles are loaded using the `Image` object. The game loop runs at approximately 60 frames per second to update the game state and render the elements. Feel free to replace "emozi_all/player.png" and "emozi_apple.png" with your own pictogram images.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pixel Quest</title>
  <style>
    body {
      background-color: #333;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

canvas {
      border: 2px solid #FFF;
    }

#game-over {
      color: #FFF;
      text-align: center;
      font-size: 24px;
      visibility: hidden;
    }
  </style>
</head>
<body>
  <canvas id="game" width="400" height="400"></canvas>
  <div id="game-over">
    Game Over! Tap to restart
  </div>

const obstacles = [
      { x: 100, y: 100 },
      { x: 200, y: 100 },
      { x: 300, y: 100 }
    ];

function initializeGame() {
      playerX = 0;
      playerY = canvas.height - PICTURE_SIZE;
      score = 0;
      intervalId = setInterval(updateGame, 1000 / 60);
    }

function drawPlayer() {
      const playerIcon = new Image(PICTURE_SIZE, PICTURE_SIZE);
      playerIcon.src = 'player.png';
      context.drawImage(playerIcon, playerX, playerY);
    }

function drawObstacles() {
      const obstacleIcon = new Image(PICTURE_SIZE, PICTURE_SIZE);
      obstacleIcon.src = 'obstacle.png';

obstacles.forEach(obstacle => {
        context.drawImage(obstacleIcon, obstacle.x, obstacle.y);
      });
    }

function checkCollision() {
      for (let obstacle of obstacles) {
        if (playerX < obstacle.x + PICTURE_SIZE &&
            playerX + PICTURE_SIZE > obstacle.x &&
            playerY < obstacle.y + PICTURE_SIZE &&
            playerY + PICTURE_SIZE > obstacle.y) {
          clearInterval(intervalId);
          gameOverElement.style.visibility = 'visible';
        }
      }
    }

function updateGame() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      drawPlayer();
      drawObstacles();
      checkCollision();

playerX += 10;
      score++;

if (playerX > canvas.width) {
        playerX = 0;
        obstacles.push({ x: Math.random() * (canvas.width - PICTURE_SIZE), y: Math.random() * (canvas.height - PICTURE_SIZE) });
      }
    }

canvas.addEventListener('click', function() {
      if (intervalId) return;
      initializeGame();
      gameOverElement.style.visibility = 'hidden';
    });
  </script>
</body>
</html>
```

In this example, I've created a simple game called "Pixel Quest" implemented as a single HTML file. The game is played on a smartphone and uses pictograms for the player and obstacles.

The goal of the game is to avoid colliding with the obstacles as the player moves from left to right. The player is controlled by tapping on the screen. When a collision occurs, the game ends, and the player can restart by tapping again.

The game elements are drawn using the canvas API and the images for the player and obstacles are loaded using the `Image` object. The game loop runs at approximately 60 frames per second to update the game state and render the elements.

Feel free to replace "player.png" and "obstacle.png" with your own pictogram images.