A boy running on a railway track getting the coins and train is coming from the front Like subway surfees's game

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

No:40448

←

Prev Next

→

A boy running on a railway track getting the coins..ALL
Developer User18120｜Date and time 24/2/2 21:56:17
Build time 14.1 sec｜Game capacity 3.518KB｜

Script

Here's a simple game implementation similar to Subway Surfers using JavaScript and HTML:

This code sets up a game where a boy is running on a railway track, collecting coins while avoiding oncoming trains. The player can make the boy jump by clicking on the game area. The score increases as coins are collected. If the boy collides with a train, the game is over, and an alert is displayed.

←

Prev　Next

→ 　

Back　

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

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

Here's a simple game implementation similar to Subway Surfers using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Train Runner</title>
    <style>
      #game-area {
        width: 400px;
        height: 300px;
        border: 1px solid black;
        position: relative;
      }

#player {
        width: 50px;
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: red;
      }

.coin {
        width: 20px;
        height: 20px;
        position: absolute;
        background-color: yellow;
      }

.train {
        width: 100px;
        height: 50px;
        position: absolute;
        background-color: gray;
        bottom: 0;
        right: -100px;
      }
    </style>
  </head>
  <body>
    <div id="game-area">
      <div id="player"></div>
      <div class="train"></div>
    </div>
    <script>
      let gameArea, player, trains, coins;
      let playerPosition = { x: 0, y: 0 };
      let trainSpeed = 5;
      let score = 0;

function initializeGame() {
        gameArea = document.getElementById('game-area');
        player = document.getElementById('player');
        trains = document.getElementsByClassName('train');
        coins = [];

gameArea.addEventListener('click', jumpPlayer);
        
        setInterval(updateGameArea, 20);
        setInterval(createCoin, 2000);
        setInterval(moveTrains, 20);
      }

function updateGameArea() {
        checkCollision();
        updateScore();
      }

function jumpPlayer() {
        if (playerPosition.y === 0) {
          playerPosition.y = 100;
          player.style.bottom = playerPosition.y + 'px';
        }
      }

function moveTrains() {
        for (let i = 0; i < trains.length; i++) {
          const train = trains[i];

if (train.offsetLeft <= -100) {
            train.style.right = '-100px';
          } else {
            train.style.right = parseInt(train.style.right) + trainSpeed + 'px';
          }
        }
      }

function createCoin() {
        const coin = document.createElement('div');
        coin.classList.add('coin');
        coin.style.bottom = Math.floor(Math.random() * 200) + 'px';
        coin.style.left = '400px';

coin.addEventListener('click', collectCoin);

gameArea.appendChild(coin);
        coins.push(coin);
      }

function collectCoin() {
        score++;
        updateScore();
        this.remove();
      }

function checkCollision() {
        const playerRect = player.getBoundingClientRect();

for (let i = 0; i < trains.length; i++) {
          const trainRect = trains[i].getBoundingClientRect();

if (
            playerRect.left < trainRect.right &&
            playerRect.right > trainRect.left &&
            playerRect.bottom > trainRect.top
          ) {
            endGame();
          }
        }
      }

function updateScore() {
        document.getElementById('score').innerText = 'Score: ' + score;
      }

function endGame() {
        alert('Game Over');
        window.location.reload();
      }

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