Scary maze game but with a hamster's game | AI game creator

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

No:37086

96

Scary maze game but with a hamster
Developer User13518｜Date and time 24/1/20 4:20:53
Build time 14.137 sec｜Game capacity 3.449KB｜

→ 　

0　

0　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Jeux du labyrinthe effrayant avec un hamster</title>
  <style>
    body {
      background-color: #000000;
      margin: 0;
      overflow: hidden;
    }
    
    #maze {
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 800px;
      height: 600px;
      background-image: url("maze.jpg");
      background-size: cover;
      z-index: 1;
    }
    
    #hamster {
      position: absolute;
      left: 50px;
      top: 50px;
      width: 50px;
      height: 50px;
      background-image: url("hamster.png");
      background-size: cover;
      z-index: 2;
    }
  </style>
</head>
<body>
  <div id="maze"></div>
  <div id="hamster"></div>

<script>
    var maze = document.getElementById("maze");
    var hamster = document.getElementById("hamster");

var mazeWidth = 800; // Largeur du labyrinthe
    var mazeHeight = 600; // Hauteur du labyrinthe
    var hamsterWidth = 50; // Largeur du hamster
    var hamsterHeight = 50; // Hauteur du hamster
    
    var startX = 50; // Position de départ en X
    var startY = 50; // Position de départ en Y
    
    hamster.style.left = startX + "px";
    hamster.style.top = startY + "px";
    
    var isGameOver = false;
    
    function moveHamster(event) {
      if (!isGameOver) {
        var x = event.touches[0].pageX - maze.offsetLeft - hamsterWidth / 2;
        var y = event.touches[0].pageY - maze.offsetTop - hamsterHeight / 2;
        
        if (x >= 0 && x <= mazeWidth - hamsterWidth && y >= 0 && y <= mazeHeight - hamsterHeight) {
          hamster.style.left = x + "px";
          hamster.style.top = y + "px";
          
          checkCollision();
        }
      }
    }
    
    function checkCollision() {
      var hamsterRect = hamster.getBoundingClientRect();
      
      // Obstacle 1
      var obstacle1Rect = document.getElementById("obstacle1").getBoundingClientRect();
      if (hamsterRect.left < obstacle1Rect.right &&
          hamsterRect.right > obstacle1Rect.left &&
          hamsterRect.top < obstacle1Rect.bottom &&
          hamsterRect.bottom > obstacle1Rect.top) {
        gameOver();
      }
      
      // Obstacle 2
      var obstacle2Rect = document.getElementById("obstacle2").getBoundingClientRect();
      if (hamsterRect.left < obstacle2Rect.right &&
          hamsterRect.right > obstacle2Rect.left &&
          hamsterRect.top < obstacle2Rect.bottom &&
          hamsterRect.bottom > obstacle2Rect.top) {
        gameOver();
      }
      
      // Destination
      var destinationRect = document.getElementById("destination").getBoundingClientRect();
      if (hamsterRect.left < destinationRect.right &&
          hamsterRect.right > destinationRect.left &&
          hamsterRect.top < destinationRect.bottom &&
          hamsterRect.bottom > destinationRect.top) {
        gameWon();
      }
    }
    
    function gameOver() {
      isGameOver = true;
      alert("Perdu ! Le hamster a été attrapé !");
      resetGame();
    }
    
    function gameWon() {
      isGameOver = true;
      alert("Félicitations ! Vous avez guidé le hamster jusqu'à la sortie !");
      resetGame();
    }
    
    function resetGame() {
      hamster.style.left = startX + "px";
      hamster.style.top = startY + "px";
      isGameOver = false;
    }
    
    maze.addEventListener('touchmove', moveHamster);
  </script>
</body>
</html>