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

No:16624

Make a obby with a time limit selected by user and..ALL
Developer User7388｜Date and time 23/9/19 20:09:20
Build time 57.548 sec｜Game capacity 5.957KB｜

Script

Sure! Here's an example of an obby game implemented as a single HTML file, using JavaScript and enclosed in script tags. The game allows the user to select the time limit, difficulty, and language.

Obby Game

Settings

Time Limit (in seconds):

Difficulty:

Language:

In this example, the game is displayed in a 400x400 game area, represented by blue squares. The objective of the game is to reach the green finish line at the bottom of the game area. The player can move using the arrow keys and must avoid colliding with red obstacles represented by circular red shapes. The game has settings to choose the time limit (between 10 and 60 seconds), difficulty (easy, medium, or hard), and language (English or Emoji). Note: The emoji pictograms have not been included in the code, but you can replace the text-based messages with appropriate emoji representations based on the language selection if desired.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of an obby game implemented as a single HTML file, using JavaScript and enclosed in script tags. The game allows the user to select the time limit, difficulty, and language.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Obby Game</title>
  <style>
    body {
      text-align: center;
      margin-top: 100px;
      font-family: Arial, sans-serif;
    }
    #game-area {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      margin: 0 auto;
      position: relative;
    }
    #player {
      width: 20px;
      height: 20px;
      background-color: blue;
      position: absolute;
      top: 0;
      left: 0;
    }
    .obstacle {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      border-radius: 50%;
    }
    .finish-line {
      width: 400px;
      height: 20px;
      background-color: green;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <h1>Obby Game</h1>
  <div id="game-area">
    <div id="player"></div>
    <div class="finish-line"></div>
  </div>
  
  <h2>Settings</h2>
  <label for="time-limit">Time Limit (in seconds):</label>
  <input type="number" id="time-limit" min="10" max="60" value="30">
  
  <br><br>
  
  <label for="difficulty">Difficulty:</label>
  <select id="difficulty">
    <option value="easy">Easy</option>
    <option value="medium">Medium</option>
    <option value="hard">Hard</option>
  </select>
  
  <br><br>
  
  <label for="language">Language:</label>
  <select id="language">
    <option value="english">English</option>
    <option value="emoji">Emoji</option>
  </select>
  
  <br><br>
  
  <button onclick="startGame()">Start Game</button>
  
  <script>
    // Game configuration
    const gameArea = document.getElementById('game-area');
    const player = document.getElementById('player');
    const finishLine = document.getElementsByClassName('finish-line')[0];
    
    // Game variables
    let timeLimit = Number(document.getElementById('time-limit').value);
    let difficulty = document.getElementById('difficulty').value;
    let language = document.getElementById('language').value;
    let gameStarted = false;
    let timer;
    
    function startGame() {
      if (!gameStarted) {
        gameStarted = true;
        player.style.top = '0';
        player.style.left = '0';
        movePlayer();
        setTimer();
      }
    }
    
    function movePlayer() {
      document.addEventListener('keydown', function(event) {
        const currentPosition = getCurrentPosition();
        const nextPosition = getNextPosition(event.keyCode);
        
        if (canMove(nextPosition)) {
          player.style.top = nextPosition.top + 'px';
          player.style.left = nextPosition.left + 'px';
        }
        
        if (hasReachedFinishLine(currentPosition)) {
          gameOver();
        }
      });
    }
    
    function getCurrentPosition() {
      const rect = player.getBoundingClientRect();
      const top = rect.top - gameArea.offsetTop;
      const left = rect.left - gameArea.offsetLeft;
      
      return { top, left };
    }
    
    function getNextPosition(keyCode) {
      const currentPosition = getCurrentPosition();
      let top = currentPosition.top;
      let left = currentPosition.left;
      
      if (keyCode === 37) { // Left arrow
        left -= 20;
      } else if (keyCode === 39) { // Right arrow
        left += 20;
      } else if (keyCode === 38) { // Up arrow
        top -= 20;
      } else if (keyCode === 40) { // Down arrow
        top += 20;
      }
      
      return { top, left };
    }
    
    function canMove(position) {
      const obstacles = document.getElementsByClassName('obstacle');
      const rect = player.getBoundingClientRect();
      
      for (let obstacle of obstacles) {
        const obstacleRect = obstacle.getBoundingClientRect();
        
        if (rect.top + position.top < obstacleRect.top + obstacleRect.height &&
            rect.top + rect.height + position.top > obstacleRect.top &&
            rect.left + position.left < obstacleRect.left + obstacleRect.width &&
            rect.left + rect.width + position.left > obstacleRect.left) {
          return false;
        }
      }
      
      return true;
    }
    
    function hasReachedFinishLine(position) {
      const playerRect = player.getBoundingClientRect();
      const finishLineRect = finishLine.getBoundingClientRect();
      
      return playerRect.top + position.top >= finishLineRect.top;
    }
    
    function setTimer() {
      const countDown = document.getElementById('countdown');
      
      if (countDown) {
        countDown.remove();
      }
      
      const timerArea = document.createElement('div');
      timerArea.id = 'countdown';
      document.body.appendChild(timerArea);
      
      let timeRemaining = timeLimit;
      timer = setInterval(function() {
        timerArea.textContent = `Time Remaining: ${timeRemaining}`;
        timeRemaining--;
        
        if (timeRemaining < 0) {
          clearInterval(timer);
          gameOver();
        }
      }, 1000);
    }
    
    function gameOver() {
      clearInterval(timer);
      gameStarted = false;
      alert('Game Over!');
    }
  </script>
</body>
</html>
```

In this example, the game is displayed in a 400x400 game area, represented by blue squares. The objective of the game is to reach the green finish line at the bottom of the game area. The player can move using the arrow keys and must avoid colliding with red obstacles represented by circular red shapes. The game has settings to choose the time limit (between 10 and 60 seconds), difficulty (easy, medium, or hard), and language (English or Emoji).

Note: The emoji pictograms have not been included in the code, but you can replace the text-based messages with appropriate emoji representations based on the language selection if desired.