Pac-Man style game where instead of ghosts, you are chased by clowns's game

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

No:42408

149

←

Prev Next

→

Pac-Man style game where instead of ghosts, you ar..ALL
Developer User18873｜Date and time 24/2/11 17:30:54
Build time 15.201 sec｜Game capacity 4.414KB｜

Script

Sure, here's an example of a Pac-Man style game where you are chased by clowns, implemented as a single HTML file:

This code sets up a game board where you control the yellow player icon using touch events on a smartphone. The red clown icons will randomly move around the board, and if the player collides with any of the clowns, the game ends and the score is displayed. To play the game, you can simply copy and paste the code into a single HTML file and open it on a web browser on your smartphone. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure, here's an example of a Pac-Man style game where you are chased by clowns, implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Clown Chase Game</title>
    <style>
      #game-board {
        position: relative;
        width: 400px;
        height: 400px;
        border: 2px solid black;
      }
      .player {
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        background-color: yellow;
        border-radius: 50%;
      }
      .clown {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div id="game-board">
      <div id="player" class="player"></div>
      <div id="clown1" class="clown"></div>
      <div id="clown2" class="clown"></div>
      <div id="clown3" class="clown"></div>
      <div id="clown4" class="clown"></div>
    </div>

// Function to move the player icon
      function movePlayer(event) {
        var x = event.touches[0].pageX - gameBoard.offsetLeft;
        var y = event.touches[0].pageY - gameBoard.offsetTop;
        player.style.left = x + 'px';
        player.style.top = y + 'px';
      }

// Function to check if player is caught by a clown
      function checkCollision() {
        if (
          isColliding(player, clown1) ||
          isColliding(player, clown2) ||
          isColliding(player, clown3) ||
          isColliding(player, clown4)
        ) {
          endGame();
        }
      }

// Function to check collision between two elements
      function isColliding(element1, element2) {
        var rect1 = element1.getBoundingClientRect();
        var rect2 = element2.getBoundingClientRect();
        return !(
          rect1.top > rect2.bottom ||
          rect1.right < rect2.left ||
          rect1.bottom < rect2.top ||
          rect1.left > rect2.right
        );
      }

// Function to start the game
      function startGame() {
        gameInterval = setInterval(function () {
          score += 10;
          document.getElementById('score').innerText = 'Score: ' + score;
          var boardRect = gameBoard.getBoundingClientRect();
          clown1.style.left =
            Math.random() * (boardRect.right - boardRect.left) + 'px';
          clown1.style.top =
            Math.random() * (boardRect.bottom - boardRect.top) + 'px';
          clown2.style.left =
            Math.random() * (boardRect.right - boardRect.left) + 'px';
          clown2.style.top =
            Math.random() * (boardRect.bottom - boardRect.top) + 'px';
          clown3.style.left =
            Math.random() * (boardRect.right - boardRect.left) + 'px';
          clown3.style.top =
            Math.random() * (boardRect.bottom - boardRect.top) + 'px';
          clown4.style.left =
            Math.random() * (boardRect.right - boardRect.left) + 'px';
          clown4.style.top =
            Math.random() * (boardRect.bottom - boardRect.top) + 'px';
          checkCollision();
        }, 1000);
      }

// Function to end the game
      function endGame() {
        clearInterval(gameInterval);
        alert('Game Over! Your score: ' + score);
        score = 0;
        document.getElementById('score').innerText = 'Score: ' + score;
        player.style.left = '0';
        player.style.top = '0';
      }

// Event listener for player movement
      gameBoard.addEventListener('touchmove', movePlayer);

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