Endless runner Using pictograms's game

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

No:33046

←

Prev Next

→

Endless runner Using pictograms
Developer User15232｜Date and time 24/1/2 7:34:42
Build time 15.753 sec｜Game capacity 2.677KB｜

Script

Sure! Here's an example of an endless runner game implemented as a single HTML file using JavaScript and pictograms:

To run the game, place `emozi_all/game.png` and `emozi_apple.png` images in the same directory as the HTML file. The game will then start and the player can control the character using the left and right arrow keys to avoid obstacles. The score will increment each time an obstacle is successfully avoided. If the player collides with an obstacle, a game over message will be displayed, and the game can be restarted by refreshing the page.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's an example of an endless runner game implemented as a single HTML file using JavaScript and pictograms:

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

const obstacleImg = new Image();
    obstacleImg.src = 'obstacle.png';

// Game variables
    let canvas, context, playerX, playerY, obstacleX, obstacleY, score;

function initialize() {
      canvas = document.getElementById('gameCanvas');
      context = canvas.getContext('2d');
      playerX = 180;
      playerY = 360;
      obstacleX = Math.random() * 350;
      obstacleY = -20;
      score = 0;

document.addEventListener('keydown', movePlayer);

setInterval(gameLoop, 20);
    }

function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw player
      context.drawImage(playerImg, playerX, playerY, 40, 40);

// Draw obstacle
      context.drawImage(obstacleImg, obstacleX, obstacleY, 40, 40);

// Draw score
      context.font = '20px Arial';
      context.fillText('Score: ' + score, 10, 30);
    }

function movePlayer(event) {
      if (event.key === 'ArrowLeft' && playerX > 0) {
        playerX -= 10;
      }
      if (event.key === 'ArrowRight' && playerX < canvas.width - 40) {
        playerX += 10;
      }
    }

function update() {
      obstacleY += 5;
      if (obstacleY > canvas.height) {
        obstacleX = Math.random() * 350;
        obstacleY = -20;
        score++;
      }

if (collisionDetection()) {
        alert('Game Over! Your score: ' + score);
        window.location.reload(); // Restart the game
      }
    }

function collisionDetection() {
      return (
        playerX < obstacleX + 40 &&
        playerX + 40 > obstacleX &&
        playerY < obstacleY + 40 &&
        playerY + 40 > obstacleY
      );
    }

function gameLoop() {
      update();
      draw();
    }

initialize();
  </script>
</body>
</html>
```

To run the game, place `player.png` and `obstacle.png` images in the same directory as the HTML file. The game will then start and the player can control the character using the left and right arrow keys to avoid obstacles. The score will increment each time an obstacle is successfully avoided. If the player collides with an obstacle, a game over message will be displayed, and the game can be restarted by refreshing the page.