🚃を避けるゲーム's game

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

No:20611

←

Prev Next

→

🚃を避けるゲーム
Developer User3589｜Date and time 23/10/10 8:12:51
Build time 10.01 sec｜Game capacity 2.435KB｜

Script

🚗

🚃

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Avoid the Train Game</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      
      #player {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 36px;
        width: 36px;
        text-align: center;
      }
      
      #train {
        position: absolute;
        bottom: 100px;
        left: -60px;
        font-size: 36px;
        width: 36px;
        text-align: center;
        animation: moveTrain 3s linear infinite;
      }
      
      @keyframes moveTrain {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(calc(100vw + 60px));
        }
      }  
    </style>
  </head>
  <body>
    <div id="player">🚗</div>
    <div id="train">🚃</div>

document.addEventListener('keydown', movePlayer);

function movePlayer(e) {
        if (e.key === 'ArrowLeft') {
          moveLeft();
        } else if (e.key === 'ArrowRight') {
          moveRight();
        }
      }

function moveLeft() {
        const playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
        if (playerLeft > 0) {
          player.style.left = (playerLeft - 10) + 'px';
        }
      }

function moveRight() {
        const playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue('left'));
        if (playerLeft < window.innerWidth - player.offsetWidth) {
          player.style.left = (playerLeft + 10) + 'px';
        }
      }
      
      function checkCollision() {
        const playerRect = player.getBoundingClientRect();
        const trainRect = train.getBoundingClientRect();

if (playerRect.bottom < trainRect.top || 
            playerRect.top > trainRect.bottom || 
            playerRect.right < trainRect.left || 
            playerRect.left > trainRect.right) {
          score++;
        } else {
          gameover();
        }
      }
      
      function gameover() {
        alert('Game Over! Your score is: ' + score);
        score = 0;
        player.style.left = '50%';
      }

setInterval(checkCollision, 10);
    </script>
  </body>
</html>