AI game creator

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

No:14306

←

Prev Next

→

A runner
Developer User6131｜Date and time 23/8/31 21:09:38
Build time 30.112 sec｜Game capacity 4.195KB｜

Script

I've created a simple endless runner game using HTML, JavaScript, and pictograms. This game can be played on a smartphone. Below is the code for the single HTML file, which should be enclosed within the `script` tags.

To play the game, simply save the code as an `.html` file and open it in a web browser on your smartphone. The game should start automatically, and you can control the player's movement using the left and right arrow keys. Avoid the obstacles to keep accumulating points. If you hit an obstacle, the game will end, and your score will be displayed. Reload the page to start a new game.

←

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">
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      canvas {
        background: #5c94fc;
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
  
    <script>
      // Game variables
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      const playerSize = 50;
      const obstacleWidth = 50;
      const obstacleHeight = 50;
      const gameSpeed = 3;
      let playerX = canvas.width / 2 - playerSize / 2;
      let playerY = canvas.height - playerSize - 10;
      let obstacles = [];
      let score = 0;
      let gameOver = false;
    
      // Load pictograms
      const playerImg = new Image();
      playerImg.src = "https://example.com/player.png";
      const obstacleImg = new Image();
      obstacleImg.src = "https://example.com/obstacle.png";
    
      // Event listeners
      document.addEventListener("keydown", movePlayer);
    
      // Game loop
      function gameLoop() {
        if (gameOver) {
          return;
        }
        
        clearCanvas();
        moveObstacles();
        drawPlayer();
        drawObstacles();
        collisionDetection();
        updateScore();
        requestAnimationFrame(gameLoop);
      }
    
      // Move player based on key press
      function movePlayer(event) {
        if (event.keyCode === 37 && playerX > 0) {
          playerX -= playerSize;
        } else if (event.keyCode === 39 && playerX < canvas.width - playerSize) {
          playerX += playerSize;
        }
      }
    
      // Clear canvas
      function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
    
      // Move obstacles downwards
      function moveObstacles() {
        for (let i = 0; i < obstacles.length; i++) {
          obstacles[i].y += gameSpeed;
          if (obstacles[i].y > canvas.height) {
            obstacles.splice(i, 1);
          }
        }
    
        if (Math.random() < 0.01) {
          createObstacle();
        }
      }
    
      // Create new obstacle
      function createObstacle() {
        const x = Math.random() * (canvas.width - obstacleWidth);
        const y = -obstacleHeight;
        obstacles.push({ x, y });
      }
    
      // Draw player
      function drawPlayer() {
        ctx.drawImage(playerImg, playerX, playerY, playerSize, playerSize);
      }
    
      // Draw obstacles
      function drawObstacles() {
        for (let i = 0; i < obstacles.length; i++) {
          ctx.drawImage(
            obstacleImg,
            obstacles[i].x,
            obstacles[i].y,
            obstacleWidth,
            obstacleHeight
          );
        }
      }
    
      // Collision detection
      function collisionDetection() {
        for (let i = 0; i < obstacles.length; i++) {
          if (
            playerX < obstacles[i].x + obstacleWidth &&
            playerX + playerSize > obstacles[i].x &&
            playerY < obstacles[i].y + obstacleHeight &&
            playerY + playerSize > obstacles[i].y
          ) {
            gameOver = true;
            alert(`Game Over! Score: ${score}`);
            window.location.reload();
          }
        }
      }
    
      // Update score
      function updateScore() {
        ctx.font = "20px Arial";
        ctx.fillStyle = "#ffffff";
        ctx.fillText(`Score: ${score}`, 20, 40);
        score++;
      }
    
      // Start the game
      gameLoop();
    </script>
  </body>
</html>
```