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

No:37221

A game where a boy runs and have to pass hurdels
Developer User17028｜Date and time 24/1/20 19:45:49
Build time 11.745 sec｜Game capacity 3.126KB｜

Script

Sure! Here's a simple game implementation using HTML, CSS, and JavaScript where a boy runs and has to pass hurdles:

Hurdle Game

Score: 0

To play the game, you can copy and paste this code into a text file with the extension `.html` (e.g., `game.html`). Then, you can open the file in a web browser, either on your smartphone or computer, to play the game. Press any key to make the boy jump over the hurdles. The objective is to score as high as possible by successfully passing the hurdles without colliding with them.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game implementation using HTML, CSS, and JavaScript where a boy runs and has to pass hurdles:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Hurdle Game</title>
  <style>
    #game-container {
      position: relative;
      width: 100%;
      height: 400px;
      background-color: #f8f8f8;
    }

#boy {
      position: absolute;
      bottom: 0;
      left: 10px;
      width: 30px;
      height: 60px;
      background-color: #ff0000;
    }

.hurdle {
      position: absolute;
      bottom: 0;
      width: 40px;
      height: 50px;
      background-color: #00ff00;
    }

#score {
      text-align: center;
      font-size: 24px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <h1>Hurdle Game</h1>
  <div id="game-container">
    <div id="boy"></div>
  </div>
  <div id="score">Score: 0</div>

// Function to move the boy up
    function jump() {
      if (!isJumping) {
        isJumping = true;
        boy.style.bottom = '100px';
        setTimeout(function() {
          boy.style.bottom = '0';
          isJumping = false;
        }, 500);
      }
    }

// Function to create hurdles
    function createHurdle() {
      var hurdle = document.createElement('div');
      hurdle.classList.add('hurdle');
      hurdle.style.left = Math.random() * 80 + 10 + '%';
      document.getElementById('game-container').appendChild(hurdle);

var hurdleMoveInterval = setInterval(function() {
        hurdle.style.bottom = parseInt(hurdle.style.bottom, 10) + 2 + 'px';
        
        if (parseInt(hurdle.style.bottom, 10) >= 400) {
          clearInterval(hurdleMoveInterval);
          hurdle.remove();
        }

// Collision detection
        var boyBottom = parseInt(boy.style.bottom, 10);
        var hurdleBottom = parseInt(hurdle.style.bottom, 10) + 50;
        var hurdleLeft = parseInt(hurdle.style.left, 10);
        var hurdleRight = hurdleLeft + 40;

if (boyBottom <= hurdleBottom && hurdleLeft <= 40 && hurdleRight >= 10) {
          clearInterval(gameInterval);
          alert('Game Over! Your score: ' + score);
        }
      }, 10);
    }

// Function to start the game
    function startGame() {
      score = 0;
      gameInterval = setInterval(function() {
        score++;
        scoreElement.innerText = 'Score: ' + score;
        createHurdle();
      }, 2000);
    }

// Event listener for jump on key press
    document.addEventListener('keypress', jump);

// Start the game
    startGame();
  </script>
</body>
</html>
```