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

No:32955

58

A game were your a police officee
Developer User15566｜Date and time 24/1/1 23:49:30
Build time 31.016 sec｜Game capacity 4.721KB｜

Sure! Here's an example of a simple game where you play as a police officer catching thieves. The game will be implemented as a single HTML file and will use JavaScript for its functionality. To keep it smartphone-friendly, we'll use pictograms for visuals. Note that this is a basic implementation and can be expanded upon as per your requirements.

Police Officer Game

Explanation: - The game container holds the player and thief elements. - Player movement is controlled using arrow keys. - The `keydown` event listener captures arrow key presses and updates the player's position accordingly. - The `isColliding` function checks if the player collides with the thief. - The `generateThief` function generates a new thief and places it randomly within the game container. - The initial thief is generated when the game loads. You can save the above code as an HTML file and open it in a web browser (preferably on a smartphone) to play the game. The player/avatar is represented by a police badge icon, and the thief is represented by a thief icon. When the player catches the thief by colliding with it, an alert will be shown congratulating the player. Remember to replace the URLs `'emozi_all/police.png'` and `'emozi_chicken.png'` with the actual URLs of your desired pictogram images. You can adjust the step size, pictogram size, and game container size as per your preference.

→ 　

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 game where you play as a police officer catching thieves. The game will be implemented as a single HTML file and will use JavaScript for its functionality. To keep it smartphone-friendly, we'll use pictograms for visuals. Note that this is a basic implementation and can be expanded upon as per your requirements.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Police Officer Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    #game-container {
      padding: 20px;
    }
    #player {
      width: 100px;
      height: 100px;
      background-image: url('police-badge.png');
      background-size: cover;
      position: relative;
    }
    .thief {
      width: 100px;
      height: 100px;
      background-image: url('thief.png');
      background-size: cover;
      position: absolute;
    }
  </style>
</head>
<body>
  <h1>Police Officer Game</h1>
  <div id="game-container">
    <div id="player"></div>
  </div>

<script>
    // Get references to the game container and player
    const gameContainer = document.getElementById('game-container');
    const player = document.getElementById('player');

// Store the player's current position
    let playerPosX = 0;
    let playerPosY = 0;

// Define the movement step for the player
    const step = 20;

// Move player on arrow key press
    document.addEventListener('keydown', (event) => {
      const key = event.keyCode;
      const keyMap = {
        37: 'left',
        38: 'up',
        39: 'right',
        40: 'down'
      };

const direction = keyMap[key];

if (direction) {
        event.preventDefault(); // Prevent scrolling on arrow key press

// Update player position based on direction
        switch (direction) {
          case 'left':
            playerPosX -= step;
            break;
          case 'up':
            playerPosY -= step;
            break;
          case 'right':
            playerPosX += step;
            break;
          case 'down':
            playerPosY += step;
            break;
        }

// Update player's style to reflect new position
        player.style.left = playerPosX + 'px';
        player.style.top = playerPosY + 'px';

// Check for collision with the thief
        const thief = document.querySelector('.thief');

if (thief) {
          const thiefBoundingBox = thief.getBoundingClientRect();
          const playerBoundingBox = player.getBoundingClientRect();

if (isColliding(thiefBoundingBox, playerBoundingBox)) {
            // You caught the thief!
            alert('Congratulations! You caught the thief!');
          }
        }
      }
    });

// Function to check if two elements are colliding
    function isColliding(elem1, elem2) {
      return !(
        elem1.right < elem2.left ||
        elem1.left > elem2.right ||
        elem1.bottom < elem2.top ||
        elem1.top > elem2.bottom
      );
    }

// Generating random position for the thief
    function generateThief() {
      const thief = document.createElement('div');
      thief.classList.add('thief');

// Place the thief randomly within the game container
      const maxX = gameContainer.clientWidth - thief.offsetWidth;
      const maxY = gameContainer.clientHeight - thief.offsetHeight;
      const randomX = Math.floor(Math.random() * maxX);
      const randomY = Math.floor(Math.random() * maxY);

thief.style.left = randomX + 'px';
      thief.style.top = randomY + 'px';

gameContainer.appendChild(thief);
    }

// Generate initial thief
    generateThief();
  </script>
</body>
</html>
```

Explanation:
- The game container holds the player and thief elements.
- Player movement is controlled using arrow keys.
- The `keydown` event listener captures arrow key presses and updates the player's position accordingly.
- The `isColliding` function checks if the player collides with the thief.
- The `generateThief` function generates a new thief and places it randomly within the game container.
- The initial thief is generated when the game loads.

You can save the above code as an HTML file and open it in a web browser (preferably on a smartphone) to play the game. The player/avatar is represented by a police badge icon, and the thief is represented by a thief icon. When the player catches the thief by colliding with it, an alert will be shown congratulating the player.

Remember to replace the URLs `'police-badge.png'` and `'thief.png'` with the actual URLs of your desired pictogram images. You can adjust the step size, pictogram size, and game container size as per your preference.