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

No:30019

135

←

Prev Next

→

Bunny and Claude: The Great Carrot-Train Robbery
Developer User14673｜Date and time 23/12/20 5:45:04
Build time 13.988 sec｜Game capacity 4.246KB｜

Script

Bunny and Claude: The Great Carrot-Train Robbery

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Bunny and Claude: The Great Carrot-Train Robbery</title>
    <style>
      body {
        background-color: #f3f3f3;
        text-align: center;
      }
      #output {
        padding: 20px;
        border: 2px solid #333;
        margin: 50px auto;
        width: 400px;
        background-color: #fff;
        font-family: Arial, sans-serif;
      }
      #button-container {
        margin-top: 20px;
      }
      #start-button, #play-button, #restart-button {
        background-color: #17c;
        color: #fff;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }
      #start-button:hover, #play-button:hover, #restart-button:hover {
        background-color: #0d9;
      }
      #play-area {
        margin-top: 50px;
      }
      .pictogram {
        width: 100px;
        height: 100px;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }
      .bunny {
        background-image: url('https://example.com/bunny.png');
      }
      .carrot {
        background-image: url('https://example.com/carrot.png');
      }
      .train {
        background-image: url('https://example.com/train.png');
      }
    </style>
  </head>
  
  <body>
    <div id="output">
      <h1>Bunny and Claude: The Great Carrot-Train Robbery</h1>
      <div id="button-container">
        <button id="start-button">Iniciar Juego</button>
      </div>
      <div id="play-area" style="display: none;">
        <div id="train-track">
          <div id="train1" class="pictogram train"></div>
          <div id="train2" class="pictogram train"></div>
          <div id="train3" class="pictogram train"></div>
          <div id="train4" class="pictogram train"></div>
        </div>
        <div id="carrot-container">
          <div id="carrot" class="pictogram carrot"></div>
        </div>
        <div id="bunny-container">
          <div id="bunny" class="pictogram bunny"></div>
        </div>
        <div id="button-container">
          <button id="play-button">¡Jugar!</button>
        </div>
      </div>
    </div>
    
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        const startButton = document.getElementById('start-button');
        const playButton = document.getElementById('play-button');
        const playArea = document.getElementById('play-area');
        const bunny = document.getElementById('bunny');
        const carrot = document.getElementById('carrot');
        const trains = document.querySelectorAll('.train');
      
        let isActive = false;
        let isPlaying = false;
        let intervalId = null;
      
        function startGame() {
          isActive = true;
          isPlaying = true;
          playButton.disabled = true;
          bunny.style.left = '0';
          carrot.style.bottom = '0';
          
          intervalId = setInterval(moveTrains, 500);
        }
      
        function playGame() {
          if (!isPlaying) return;
      
          const bunnyPos = parseInt(bunny.style.left);
          const carrotPos = parseInt(carrot.style.bottom);
      
          if (carrotPos >= 400 && bunnyPos === 300) {
            clearInterval(intervalId);
            isActive = false;
            isPlaying = false;
            playButton.disabled = false;
            alert('¡Felicidades! ¡Has robado la zanahoria del tren!');
          }
        }
      
        function moveTrains() {
          const maxPos = 600;
      
          trains.forEach(train => {
            const currentPos = parseInt(train.style.left);
            const newPos = currentPos === -100 ? maxPos : currentPos - 100;
            train.style.left = newPos + 'px';
          });
      
          playGame();
        }
      
        startButton.addEventListener('click', function() {
          playArea.style.display = 'block';
          startButton.disabled = true;
          startGame();
        });
      
        playButton.addEventListener('click', function() {
          if (!isActive) return;
          playButton.disabled = true;
        });
      });
    </script>
  </body>
</html>