HTML 闯关小游戏 - 在线体验迷宫挑战

<h1>HTML 闯关小游戏</h1>

<p>你现在在一个迷宫里，请找到出口！</p>

<div id='room1'>
    <p>你现在在房间1，往哪个方向走？</p>
    <button onclick='goRoom2()'>往右走</button>
    <button onclick='goRoom3()'>往下走</button>
</div>

<div id='room2'>
    <p>你现在在房间2，往哪个方向走？</p>
    <button onclick='goRoom1()'>往左走</button>
    <button onclick='goRoom4()'>往右走</button>
</div>

<div id='room3'>
    <p>你现在在房间3，往哪个方向走？</p>
    <button onclick='goRoom1()'>往上走</button>
    <button onclick='goRoom4()'>往右走</button>
</div>

<div id='room4'>
    <p>你现在在房间4，往哪个方向走？</p>
    <button onclick='goRoom2()'>往左走</button>
    <button onclick='goRoom3()'>往上走</button>
    <button onclick='win()'>找到出口！</button>
</div>

<script>
    var currentRoom = 'room1';

    function goRoom1() {
        document.getElementById(currentRoom).style.display = 'none';
        document.getElementById('room1').style.display = 'block';
        currentRoom = 'room1';
    }

    function goRoom2() {
        document.getElementById(currentRoom).style.display = 'none';
        document.getElementById('room2').style.display = 'block';
        currentRoom = 'room2';
    }

    function goRoom3() {
        document.getElementById(currentRoom).style.display = 'none';
        document.getElementById('room3').style.display = 'block';
        currentRoom = 'room3';
    }

    function goRoom4() {
        document.getElementById(currentRoom).style.display = 'none';
        document.getElementById('room4').style.display = 'block';
        currentRoom = 'room4';
    }

    function win() {
        alert('恭喜你找到出口！');
    }
</script>