闯关小游戏
<h1>闯关小游戏</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>

原文地址: https://www.cveoy.top/t/topic/hfFe 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录