AI game creator

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

No:33045

←

Prev Next

→

Endless runner
Developer User15232｜Date and time 24/1/2 7:34:02
Build time 17.08 sec｜Game capacity 2.901KB｜

Script

Sure! Below is an example of an endless runner game implemented as a single HTML file using JavaScript and enclosed in `` tags. The game is optimized for smartphone operation and uses pictograms. <br><br> <br> <style> canvas { border: 1px solid black; } </style> <canvas id="gameCanvas" width="400" height="200"></canvas>

In this game, the player (represented by a black square) can control its vertical movement by touching and dragging on the canvas. The objective is to avoid the moving obstacle (represented by a red square) by navigating the player through the gaps. The score increases every time the obstacle crosses the left side of the screen. If the player collides with the obstacle, the game ends, and the player's score is displayed. After that, the game can be reset for another round.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure! Below is an example of an endless runner game implemented as a single HTML file using JavaScript and enclosed in `<script>` tags. The game is optimized for smartphone operation and uses pictograms.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Endless Runner Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="200"></canvas>

// Game loop
    function gameLoop() {
      clearCanvas();
      updatePlayer();
      updateObstacle();
      detectCollision();
      drawScore();

requestAnimationFrame(gameLoop);
    }

// Clear the canvas
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

// Update player position
    function updatePlayer() {
      ctx.fillStyle = 'black';
      ctx.fillRect(playerX, playerY, 30, 30);
    }

// Update obstacle position
    function updateObstacle() {
      obstacleX -= 5;
      if (obstacleX < -30) {
        obstacleX = 400;
        score++;
      }
      ctx.fillStyle = 'red';
      ctx.fillRect(obstacleX, obstacleY, 30, 30);
    }

// Detect collision between player and obstacle
    function detectCollision() {
      if (
        playerX < obstacleX + 30 &&
        playerX + 30 > obstacleX &&
        playerY < obstacleY + 30 &&
        playerY + 30 > obstacleY
      ) {
        gameOver();
      }
    }

// Game over logic
    function gameOver() {
      alert('Game Over! Your score: ' + score);
      resetGame();
    }

// Reset when game over
    function resetGame() {
      playerX = 50;
      obstacleX = 400;
      score = 0;
    }

// Display score
    function drawScore() {
      ctx.font = '20px Arial';
      ctx.fillStyle = 'black';
      ctx.fillText('Score: ' + score, 10, 30);
    }

// Handle player movement
    function handleTouch(e) {
      playerY = e.touches[0].clientY - 15;
    }

// Add event listener for touch events
    canvas.addEventListener('touchstart', handleTouch);
    canvas.addEventListener('touchmove', handleTouch);

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

In this game, the player (represented by a black square) can control its vertical movement by touching and dragging on the canvas. The objective is to avoid the moving obstacle (represented by a red square) by navigating the player through the gaps. The score increases every time the obstacle crosses the left side of the screen. If the player collides with the obstacle, the game ends, and the player's score is displayed. After that, the game can be reset for another round.