Make a game to reach the flag in 30 secs up down right left are the controls the flag also appears randomly in the box's game

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

No:11092

←

Prev Next

→

Make a game to reach the flag in 30 secs up down r..ALL
Developer unknown｜Date and time 23/8/7 21:19:22
Build time 30.826 sec｜Game capacity 4.008KB｜

Script

Sure! Here's an example of a simple game implemented in a single HTML file using JavaScript, enclosed in script tags. The game objective is to reach the flag within 30 seconds by using the arrow keys to move up, down, left, or right. The flag will appear randomly in the game box on each play.

To play the game, simply copy the code into an HTML file and open it in a web browser (preferably on a smartphone for easier control with touch). Use the arrow keys to move the blue square (player) up, down, left, or right and try to reach the red square (flag) within 30 seconds.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Flag Game</title>
    <style>
      #game-box {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        position: relative;
      }
      #player {
        width: 20px;
        height: 20px;
        background-color: blue;
        position: absolute;
        top: 0;
        left: 0;
      }
      #flag {
        width: 20px;
        height: 20px;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="game-box">
      <div id="player"></div>
      <div id="flag"></div>
    </div>

let gameOver = true;

// Function to randomly position the flag within the game box
      function randomizeFlagPosition() {
        const boxWidth = gameBox.offsetWidth - flag.offsetWidth;
        const boxHeight = gameBox.offsetHeight - flag.offsetHeight;
        
        flag.style.top = Math.floor(Math.random() * boxHeight) + 'px';
        flag.style.left = Math.floor(Math.random() * boxWidth) + 'px';

flag.style.display = 'block';
      }

// Function to handle player movements
      function movePlayer(e) {
        const key = e.key;

if (gameOver) {
          return;
        }

let x = player.offsetLeft;
        let y = player.offsetTop;
        const step = 20;

switch (key) {
          case 'ArrowUp':
            if (y - step >= 0) {
              y -= step;
            }
            break;
          case 'ArrowDown':
            if (y + step + player.offsetHeight <= gameBox.offsetHeight) {
              y += step;
            }
            break;
          case 'ArrowLeft':
            if (x - step >= 0) {
              x -= step;
            }
            break;
          case 'ArrowRight':
            if (x + step + player.offsetWidth <= gameBox.offsetWidth) {
              x += step;
            }
            break;
        }

player.style.top = y + 'px';
        player.style.left = x + 'px';

checkCollision();
      }

// Function to check if player reached the flag
      function checkCollision() {
        const playerRect = player.getBoundingClientRect();
        const flagRect = flag.getBoundingClientRect();

if (
          playerRect.left < flagRect.right &&
          playerRect.right > flagRect.left &&
          playerRect.top < flagRect.bottom &&
          playerRect.bottom > flagRect.top
        ) {
          gameOver = true;
          alert('Congratulations! You reached the flag!');
          resetGame();
        }
      }

// Function to start the game
      function startGame() {
        gameOver = false;
        player.style.top = '0';
        player.style.left = '0';
        randomizeFlagPosition();
        setTimeout(resetGame, 30000); // 30 seconds
      }

// Function to reset the game
      function resetGame() {
        gameOver = true;
        flag.style.display = 'none';
      }

// Event listener for keyboard arrow keys
      window.addEventListener('keydown', movePlayer);

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