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

No:9819

161

←

Prev Next

→

Cheese Maze 1.People will have to go through the m..ALL
Developer FirstNormalPerson｜Date and time 23/7/28 1:03:00
Build time 27.733 sec｜Game capacity 3.099KB｜

Script

Cheese Maze

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Cheese Maze</title>
  <style>
    #maze {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }
    
    .player {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      background-color: yellow;
      z-index: 1;
    }
    
    .cheese {
      position: absolute;
      top: 360px;
      left: 360px;
      width: 40px;
      height: 40px;
      background-color: orange;
    }
    
    .weapon {
      position: absolute;
      top: 200px;
      left: 200px;
      width: 40px;
      height: 40px;
      background-color: red;
    }
    
    .rat {
      position: absolute;
      top: 120px;
      left: 280px;
      width: 40px;
      height: 40px;
      background-color: gray;
      z-index: 1;
    }
  </style>
</head>
<body>
  <h1>Cheese Maze</h1>
  
  <div id="maze">
    <div class="player"></div>
    <div class="cheese"></div>
    <div class="weapon"></div>
    <div class="rat"></div>
  </div>
  
  <script>
    // Wait for the DOM to be fully loaded
    document.addEventListener("DOMContentLoaded", function(event) {
      const maze = document.getElementById("maze");
      const player = document.querySelector(".player");
      const cheese = document.querySelector(".cheese");
      const weapon = document.querySelector(".weapon");
      const rat = document.querySelector(".rat");
      
      // Set initial player position
      let playerX = 0;
      let playerY = 0;
      movePlayer(playerX, playerY);
      
      // Event listener for arrow key presses
      document.addEventListener("keydown", function(event) {
        switch (event.key) {
          case "ArrowUp":
            if (playerY > 0) playerY -= 40;
            break;
          case "ArrowDown":
            if (playerY < 360) playerY += 40;
            break;
          case "ArrowLeft":
            if (playerX > 0) playerX -= 40;
            break;
          case "ArrowRight":
            if (playerX < 360) playerX += 40;
            break;
        }
        
        movePlayer(playerX, playerY);
        
        // Check if player reached the cheese
        if (playerX === 360 && playerY === 360) {
          alert("Congratulations! You got the cheese!");
        }
        
        // Check if rat sees the player
        if (isRatSeeingPlayer(playerX, playerY)) {
          alert("Oh no! The rat saw you! You lost!");
        }
      });
      
      // Function to move the player
      function movePlayer(x, y) {
        player.style.transform = `translate(${x}px, ${y}px)`;
      }
      
      // Function to check if rat sees the player
      function isRatSeeingPlayer(x, y) {
        const ratX = parseInt(getComputedStyle(rat).left);
        const ratY = parseInt(getComputedStyle(rat).top);
        
        // If player is within 80px radius of the rat, it is considered seen
        if (Math.abs(x - ratX) <= 80 && Math.abs(y - ratY) <= 80) {
          return true;
        }
        
        return false;
      }
    });
  </script>
</body>
</html>