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

No:37091

The scary maze game but with a
Developer User13518｜Date and time 24/1/20 4:27:18
Build time 15.714 sec｜Game capacity 4.784KB｜

Script

Sure, here's an implementation of the Scary Maze Game using JavaScript, enclosed in HTML script tags as a single HTML file:

Scary Maze Game

Ce fichier HTML implémente le jeu Scary Maze Game. Pour jouer au jeu, il faut utiliser les flèches du clavier pour déplacer le joueur (représenté par le carré rouge) à travers le labyrinthe. L'objectif est de rejoindre la case de fin (représentée par le carré noir à droite du labyrinthe) sans toucher les murs du labyrinthe. Si le joueur touche un mur, le jeu se termine et le joueur perd. Si le joueur atteint la case de fin, une alerte s'affiche pour indiquer que le joueur a gagné.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure, here's an implementation of the Scary Maze Game using JavaScript, enclosed in HTML script tags as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Scary Maze Game</title>
    <style>
        #maze-container {
            position: relative;
            width: 400px;
            height: 300px;
            margin: 0 auto;
        }
        
        .maze-block {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #000;
        }
        
        .start {
            top: 120px;
            left: 20px;
        }
        
        .end {
            top: 120px;
            left: 340px;
        }
        
        .player {
            top: 120px;
            left: 20px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <h1>Scary Maze Game</h1>
    <div id="maze-container">
        <div class="maze-block start"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block"></div>
        <div class="maze-block end"></div>
        <div class="maze-block player"></div>
    </div>

let gameStarted = false;

function handleGameOver() {
            gameStarted = false;
            alert("Game Over! You lost.");
            player.setAttribute('style', 'top: 120px; left: 20px;');
        }

mazeContainer.addEventListener('mouseover', () => {
            if (gameStarted) {
                handleGameOver();
            }
        });

startBlock.addEventListener('mouseover', () => {
            if (!gameStarted) {
                gameStarted = true;
            }
        });

endBlock.addEventListener('mouseover', () => {
            if (gameStarted) {
                alert("Congratulations! You won the game.");
                player.setAttribute('style', 'top: 120px; left: 20px;');
                gameStarted = false;
            }
        });

window.addEventListener('keydown', (e) => {
            if (gameStarted) {
                const currentPosition = {
                    top: player.offsetTop,
                    left: player.offsetLeft
                };

switch (e.key) {
                    case 'ArrowUp':
                        if (currentPosition.top > 0) {
                            player.style.top = currentPosition.top - 40 + 'px';
                        }
                        break;
                    case 'ArrowDown':
                        if (currentPosition.top < 240) {
                            player.style.top = currentPosition.top + 40 + 'px';
                        }
                        break;
                    case 'ArrowLeft':
                        if (currentPosition.left > 0) {
                            player.style.left = currentPosition.left - 40 + 'px';
                        }
                        break;
                    case 'ArrowRight':
                        if (currentPosition.left < 360) {
                            player.style.left = currentPosition.left + 40 + 'px';
                        }
                        break;
                }
            }
        });
    </script>
</body>
</html>
```