Crea un juego similar a Granny's game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
Crea un juego similar a Granny's game | AI game creator

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

No:18423

←

Prev Next

→

Crea un juego similar a Granny
Developer User8158｜Date and time 23/9/29 9:17:52
Build time 31.387 sec｜Game capacity 3.415KB｜

Script

¡Bienvenido a la pesadilla de la abuelita!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Granny's Nightmare</title>
  <style>
    body {
      background-color: black;
      text-align: center;
      color: white;
      font-family: Arial, sans-serif;
    }
    
    #gameboard {
      width: 350px;
      height: 350px;
      margin: 0 auto;
      background-color: gray;
      position: relative;
    }
    
    #granny {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 150px;
      left: 150px;
      background-image: url('granny.png');
      background-size: cover;
    }
    
    #key {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 250px;
      left: 250px;
      background-image: url('key.png');
      background-size: cover;
    }
    
    #message {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="gameboard">
    <div id="granny"></div>
    <div id="key"></div>
  </div>
  <h2 id="message">¡Bienvenido a la pesadilla de la abuelita!</h2>
  
  <script>
    window.onload = function() {
      const granny = document.getElementById('granny');
      const key = document.getElementById('key');
      const message = document.getElementById('message');
      
      // Randomly position the key in the gameboard
      const gameboardWidth = document.getElementById('gameboard').offsetWidth;
      const gameboardHeight = document.getElementById('gameboard').offsetHeight;
      const keyX = Math.floor(Math.random() * (gameboardWidth - 50));
      const keyY = Math.floor(Math.random() * (gameboardHeight - 50));
      key.style.left = keyX + 'px';
      key.style.top = keyY + 'px';
      
      // Check if the key is clicked
      key.addEventListener('click', function() {
        message.textContent = '¡Encontraste la llave! Escapa de la abuelita.';
        document.body.style.backgroundColor = 'green';
        granny.style.backgroundColor = 'black';
      });
      
      // Move Granny when the gameboard is clicked
      document.getElementById('gameboard').addEventListener('click', function(event) {
        const clickX = event.clientX;
        const clickY = event.clientY;
        const grannyX = granny.offsetLeft;
        const grannyY = granny.offsetTop;
        
        // Calculate the distance between Granny and the clicked position
        const distance = Math.sqrt(Math.pow((clickX - grannyX), 2) + Math.pow((clickY - grannyY), 2));
        
        // Only move Granny if distance is greater than 50px
        if (distance > 50) {
          // Update Granny's position
          granny.style.left = clickX - 25 + 'px';
          granny.style.top = clickY - 25 + 'px';
          
          // Check if Granny caught the player
          const grannyRect = granny.getBoundingClientRect();
          const keyRect = key.getBoundingClientRect();
          
          if (isColliding(grannyRect, keyRect)) {
            message.textContent = '¡La abuelita te atrapó! Inténtalo de nuevo.';
            document.body.style.backgroundColor = 'red';
            granny.style.backgroundColor = 'black';
          }
        }
      });
      
      // Function to check if two rectangles are colliding
      function isColliding(rect1, rect2) {
        return rect1.left < rect2.right &&
               rect1.right > rect2.left &&
               rect1.top < rect2.bottom &&
               rect1.bottom > rect2.top;
      }
    };
  </script>
</body>
</html>