The scary maze game but with a hamster's game

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

No:37092

←

Prev Next

→

The scary maze game but with a hamster
Developer User13518｜Date and time 24/1/20 4:28:34
Build time 21.388 sec｜Game capacity 6.719KB｜

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 Effrayant du Labyrinthe avec un Hamster</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        #maze {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        img {
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="maze"></div>
    
    <script>
        // L'objet représentant notre hamster
        const hamster = {
            x: 0,   // position horizontale
            y: 0,   // position verticale
            speed: 20,  // vitesse de déplacement
            direction: ""   // direction de déplacement
        };
        
        const mazeDiv = document.getElementById("maze");
        const displayWidth = mazeDiv.offsetWidth;
        const displayHeight = mazeDiv.offsetHeight;
        
        // Fonction pour détecter les collisions avec les murs
        function checkCollisions() {
            const walls = document.getElementsByClassName("wall");
            for (let i = 0; i < walls.length; i++) {
                const wall = walls[i];
                const rect1 = hamster.elem.getBoundingClientRect();
                const rect2 = wall.getBoundingClientRect();
                if (rect1.left < rect2.right && rect1.right > rect2.left && 
                    rect1.top < rect2.bottom && rect1.bottom > rect2.top) {
                    alert("Oh non! Vous avez touché un mur! Essayez encore.");
                    resetGame();
                }
            }
        }
        
        // Fonction pour détecter si le joueur a atteint la sortie
        function checkWin() {
            const exit = document.getElementById("exit");
            const rect1 = hamster.elem.getBoundingClientRect();
            const rect2 = exit.getBoundingClientRect();
            if (rect1.left < rect2.right && rect1.right > rect2.left && 
                rect1.top < rect2.bottom && rect1.bottom > rect2.top) {
                alert("Félicitations, vous avez terminé le labyrinthe!\nVous êtes un expert du hamster!");
                resetGame();
            }
        }
        
        // Fonction pour réinitialiser le jeu
        function resetGame() {
            hamster.x = 0;
            hamster.y = 0;
            hamster.elem.style.left = hamster.x + "px";
            hamster.elem.style.top = hamster.y + "px";
        }
        
        // Fonction pour gérer les mouvements du hamster
        function handleMovement(event) {
            switch (event.key) {
                case "ArrowUp":
                    hamster.direction = "up";
                    break;
                case "ArrowDown":
                    hamster.direction = "down";
                    break;
                case "ArrowLeft":
                    hamster.direction = "left";
                    break;
                case "ArrowRight":
                    hamster.direction = "right";
                    break;
            }
        }
        
        // Fonction pour mettre à jour la position du hamster en fonction de la direction
        function updatePosition() {
            switch (hamster.direction) {
                case "up":
                    if (hamster.y > 0) {
                        hamster.y -= hamster.speed;
                    }
                    break;
                case "down":
                    if (hamster.y < displayHeight - hamster.speed) {
                        hamster.y += hamster.speed;
                    }
                    break;
                case "left":
                    if (hamster.x > 0) {
                        hamster.x -= hamster.speed;
                    }
                    break;
                case "right":
                    if (hamster.x < displayWidth - hamster.speed) {
                        hamster.x += hamster.speed;
                    }
                    break;
            }
            
            hamster.elem.style.left = hamster.x + "px";
            hamster.elem.style.top = hamster.y + "px";
        }
        
        // Fonction d'initialisation du jeu
        function initializeGame() {
            hamster.elem = document.createElement("img");
            hamster.elem.src = "hamster.png";  // Pictogramme de hamster
            hamster.elem.style.position = "absolute";
            hamster.elem.style.left = hamster.x + "px";
            hamster.elem.style.top = hamster.y + "px";
            hamster.elem.style.width = "50px";
            hamster.elem.style.height = "50px";
            hamster.elem.style.zIndex = "1";
            mazeDiv.appendChild(hamster.elem);
            
            // Création du labyrinthe
            const walls = [
              { x: 300, y: 0, width: 50, height: displayHeight },  // Mur de gauche
              { x: 600, y: 0, width: 50, height: displayHeight },  // Mur de droite
              { x: 0, y: 300, width: displayWidth, height: 50 },  // Mur du haut
              { x: 0, y: 600, width: displayWidth, height: 50 },  // Mur du bas
              { x: 350, y: 100, width: 50, height: 200 },
              { x: 500, y: 450, width: 50, height: 150 },
              { x: 200, y: 500, width: 50, height: 150 }
            ];
            
            walls.forEach(wall => {
                const wallElem = document.createElement("div");
                wallElem.className = "wall";
                wallElem.style.position = "absolute";
                wallElem.style.left = wall.x + "px";
                wallElem.style.top = wall.y + "px";
                wallElem.style.width = wall.width + "px";
                wallElem.style.height = wall.height + "px";
                wallElem.style.backgroundColor = "brown";
                mazeDiv.appendChild(wallElem);
            });
            
            // Création de la sortie
            const exit = document.createElement("div");
            exit.id = "exit";
            exit.style.position = "absolute";
            exit.style.left = displayWidth - 50 + "px";
            exit.style.top = displayHeight - 50 + "px";
            exit.style.width = "50px";
            exit.style.height = "50px";
            exit.style.backgroundColor = "green";
            mazeDiv.appendChild(exit);
            
            // Ajout des gestionnaires d'événements
            document.addEventListener("keydown", handleMovement);
            setInterval(() => {
                updatePosition();
                checkCollisions();
                checkWin();
            }, 100);
        }
        
        initializeGame();
    </script>
</body>
</html>