The scary maze game but with a hamster's game

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

No:37090

←

Prev Next

→

The scary maze game but with a hamster
Developer User13518｜Date and time 24/1/20 4:25:49
Build time 11.364 sec｜Game capacity 3.021KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Le jeu du labyrinthe effrayant avec un hamster</title>
<style>
    #maze {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 380px; 
        height: 380px;
        border: 1px solid black;
        background-color: #ccc;
    }

#hamster {
        position: absolute;
        top: 190px;
        left: 10px;
        width: 20px;
        height: 20px;
        background-color: brown;
        border-radius: 50%;
    }

#goal {
        position: absolute;
        top: 190px;
        left: 370px;
        width: 20px;
        height: 20px;
        background-color: green;
        border-radius: 50%;
    }

#message {
        position: absolute;
        top: 420px;
        left: 10px;
        font-family: Arial, sans-serif;
        font-size: 20px;
    }
</style>
</head>
<body>
    <div id="maze"></div>
    <div id="hamster"></div>
    <div id="goal"></div>
    <div id="message"></div>

maze.addEventListener("mouseleave", endGame);

// Fonction pour afficher le message du jeu
        function showMessage(text) {
            var message = document.getElementById("message");
            message.innerText = text;
        }

// Fonction pour vérifier si le hamster a atteint l'objectif
        function checkWin() {
            var hamster = document.getElementById("hamster");
            var goal = document.getElementById("goal");
        
            var hamsterRect = hamster.getBoundingClientRect();
            var goalRect = goal.getBoundingClientRect();

// Vérifier si les deux éléments chevauchent
            if (hamsterRect.left < goalRect.right && hamsterRect.right > goalRect.left && 
                hamsterRect.top < goalRect.bottom && hamsterRect.bottom > goalRect.top) {
                endGame(true);
            }
        }

// Fonction pour mettre fin au jeu
        function endGame(win = false) {
            showMessage(win ? "Félicitations ! Vous avez gagné !" : "Oh non ! Vous avez perdu !");
            maze.removeEventListener("mousemove", moveHamster);
        }

// Fonction pour déplacer le hamster
        function moveHamster(event) {
            var hamster = document.getElementById("hamster");
            var mazeRect = maze.getBoundingClientRect();

var mouseX = event.clientX - mazeRect.left;
            var mouseY = event.clientY - mazeRect.top;

hamster.style.left = (mouseX - 10) + "px";
            hamster.style.top = (mouseY - 10) + "px";

checkWin();
        }

// Lancer le jeu
        function startGame() {
            var maze = document.getElementById("maze");
            maze.addEventListener("mousemove", moveHamster);
            showMessage("Déplacez le hamster jusqu'à l'objectif sans toucher les bords !");
        }

startGame();
    </script>
</body>
</html>