Make a jumping game where the character is a police chasing a criminal jumping up a building's game | AI game creator

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

No:21426

54

Make a jumping game where the character is a polic..ALL
Developer User9817｜Date and time 23/10/15 13:13:15
Build time 110.805 sec｜Game capacity 4.068KB｜

Sure! Here's an example of a simple jumping game where the character is a police officer chasing a criminal by jumping up a building. The game is implemented as a single HTML file, enclosed in script tags, and written in JavaScript. It can be played on a smartphone.

To play the game, you need to open the HTML file on your smartphone's browser. The game will start, and you can tap on the screen to make the police jump. The goal is to catch the criminal by jumping on top of him. The game will display a "Game Over" message if you catch the criminal or if the jump takes too long.

→ 　

0　

0　

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

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

(C)2023 HisashiApp

Sure! Here's an example of a simple jumping game where the character is a police officer chasing a criminal by jumping up a building. The game is implemented as a single HTML file, enclosed in script tags, and written in JavaScript. It can be played on a smartphone.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Police Jumping Game</title>
  <style>
    #game {
      position: relative;
      width: 320px;
      height: 480px;
      border: 1px solid #000;
    }

#police {
      position: absolute;
      left: 140px;
      bottom: 10px;
      width: 40px;
      height: 60px;
      background-color: blue;
    }

#criminal {
      position: absolute;
      left: 140px;
      bottom: 100px;
      width: 40px;
      height: 60px;
      background-color: red;
    }

.building {
      position: absolute;
      bottom: 0;
      width: 100px;
      height: 200px;
      background-color: gray;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="police"></div>
    <div id="criminal"></div>
    <div class="building" style="left: 40px;"></div>
    <div class="building" style="left: 180px;"></div>
  </div>

<script>
    const game = document.getElementById('game');
    const police = document.getElementById('police');
    const criminal = document.getElementById('criminal');
    let isJumping = false;
  
    // Detect touch/click event
    game.addEventListener('click', () => {
      if (!isJumping) {
        isJumping = true;
        jump();
      }
    });
  
    // Make the police jump
    function jump() {
      let count = 0;
      const jumpInterval = setInterval(() => {
        count++;
        const bottomPosition = parseInt(window.getComputedStyle(police).getPropertyValue('bottom'));
  
        if (bottomPosition < 200) {
          police.style.bottom = (bottomPosition + 10) + 'px';
        } else {
          clearInterval(jumpInterval);
          isJumping = false;
  
          // Check collision with criminal
          const collision = checkCollision();
          if (collision) {
            alert('Game Over - You caught the criminal!');
            location.reload(); // Restart the game
          }
        }
  
        // Keep the police on top of the building
        adjustPolicePosition();
  
        // End the jump if it takes too long
        if (count > 30) {
          clearInterval(jumpInterval);
          isJumping = false;
        }
  
      }, 20);
    }
  
    // Adjust the position of the police to be on top of the building
    function adjustPolicePosition() {
      const buildings = document.getElementsByClassName('building');
      for (let i = 0; i < buildings.length; i++) {
        const building = buildings[i];
        const buildingLeft = parseInt(building.style.left);
        const buildingRight = buildingLeft + 100;
  
        const policeLeft = parseInt(police.style.left);
        const policeRight = policeLeft + 40;
  
        if (policeLeft >= buildingLeft && policeRight <= buildingRight) {
          const buildingBottom = parseInt(window.getComputedStyle(building).getPropertyValue('bottom'));
          police.style.bottom = (buildingBottom + 60) + 'px';
        }
      }
    }
  
    // Check collision between police and criminal
    function checkCollision() {
      const policeLeft = parseInt(police.style.left);
      const policeBottom = parseInt(window.getComputedStyle(police).getPropertyValue('bottom'));
  
      const criminalLeft = parseInt(criminal.style.left);
      const criminalBottom = parseInt(window.getComputedStyle(criminal).getPropertyValue('bottom'));
  
      if (policeLeft === criminalLeft && policeBottom === criminalBottom) {
        return true;
      }
  
      return false;
    }
  </script>
</body>
</html>
```

To play the game, you need to open the HTML file on your smartphone's browser. The game will start, and you can tap on the screen to make the police jump. The goal is to catch the criminal by jumping on top of him. The game will display a "Game Over" message if you catch the criminal or if the jump takes too long.