I want to create a Chasing game's game

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

No:15185

111

←

Prev Next

→

I want to create a Chasing game
Developer User6556｜Date and time 23/9/7 3:05:34
Build time 53.632 sec｜Game capacity 3.318KB｜

Script

Sure! Here's a simple example of a chasing game implemented as a single HTML file using JavaScript. The game involves a character chasing after a target pictogram on a smartphone screen.

🏃‍♂️ 🎯

In this game, the character (represented by 🏃‍♂️) is chasing after a target (represented by 🎯). You can tap or click on the game container to move the character either left or right. If the character reaches the same position as the target, a "You caught the target!" message is displayed. Please note that this is a simple example, and you can expand upon it to add more features such as levels, score tracking, or animations as per your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple example of a chasing game implemented as a single HTML file using JavaScript. The game involves a character chasing after a target pictogram on a smartphone screen.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Chasing Game</title>
    <style>
      #game-container {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div id="game-container">
      🏃‍♂️ 🎯
    </div>

// Set initial positions of the character and target
      let characterPosition = 0; // 0 represents the leftmost position
      let targetPosition = getRandomPosition(); // Get a random position for the target

// Listen for touch events on the game container
      gameContainer.addEventListener("click", function (event) {
        const containerWidth = gameContainer.offsetWidth;
        const touchX = event.clientX;
        const middle = containerWidth / 2;

// Move the character towards the touched position
        if (touchX < middle) {
          characterPosition--;
        } else {
          characterPosition++;
        }

// If the character reaches the target, display the winning message
        if (characterPosition === targetPosition) {
          gameContainer.innerHTML = "You caught the target! 🎉";
        } else {
          updateGameView();
        }
      });

// Update the game view by displaying the character and target in their positions
      function updateGameView() {
        const characterSymbol = "🏃‍♂️";
        const targetSymbol = "🎯";
        let gameView = "";

// Add empty spaces for the character position
        for (let i = 0; i < characterPosition; i++) {
          gameView += "  ";
        }
        // Add the character symbol
        gameView += characterSymbol;

// Add empty spaces for the target position
        for (let i = characterPosition + 1; i < targetPosition; i++) {
          gameView += "  ";
        }
        // Add the target symbol
        gameView += targetSymbol;

// Add remaining empty spaces
        for (let i = targetPosition + 1; i < gameContainer.offsetWidth; i++) {
          gameView += "  ";
        }

gameContainer.innerHTML = gameView;
      }

// Get a random position within the game container width
      function getRandomPosition() {
        const containerWidth = gameContainer.offsetWidth;
        return Math.floor(Math.random() * containerWidth);
      }

// Initialize the game view
      updateGameView();
    </script>
  </body>
</html>
```

Please note that this is a simple example, and you can expand upon it to add more features such as levels, score tracking, or animations as per your requirements.