使用 JavaScript 建立“誰想成為百萬富翁”

根據熱門問答節目「誰想成為百萬富翁」創建遊戲是練習 JavaScript 技能同時構建有趣且互動的內容的絕佳方法。這篇部落格文章將引導您了解如何建立這款遊戲，包括計時器、生命線和評分系統。

遊戲的主要特點
多項選擇題：玩家可以從四個選項中選擇答案。
計時器：玩家有 30 秒的時間回答每個問題。
生命線：玩家可以使用生命線，例如 50:50、詢問觀眾、打電話給朋友。
評分系統：玩家根據正確回答問題的數量獲得積分。
音效：遊戲具有正確和錯誤答案的音效以及背景音樂。

html




    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Your Name">
    <title>Who Wants To Be A Millionaire</title>
    <link rel="stylesheet" href="style.css">


    <main class="container">
        <!-- Start Page -->
        <section class="start-box custom">
            <div class="game-使用 JavaScript 建立“誰想成為百萬富翁”">
                <img src="img/%E4%BD%BF%E7%94%A8%20JavaScript%20%E5%BB%BA%E7%AB%8B%E2%80%9C%E8%AA%B0%E6%83%B3%E6%88%90%E7%82%BA%E7%99%BE%E8%90%AC%E5%AF%8C%E7%BF%81%E2%80%9D.png" alt="使用 JavaScript 建立“誰想成為百萬富翁”">
            </div>
            <div class="instruction">
                <h3>Instructions</h3>
                <ul class="instruction-list">
                    <li>30 seconds to answer each question</li>
                    <li>Game over conditions include:
                        <ul>
                            <li>Time elapses</li>
                            <li>Answer is wrong</li>
                            <li>All questions have been answered</li>
                        </ul>
                    </li>
                    <li>Guarantee prizes at questions 1, 10, 15</li>
                    <li>Wrong answer results in winning the last guaranteed prize</li>
                    <li>Lifelines available:
                        <ul>
                            <li>50:50 => Removes two wrong answers</li>
                            <li>Ask the Audience</li>
                            <li>Call a Friend</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="user-info">
                <div class="start-game-btn btn">Start game</div>
            </div>
        </section>
        <!-- Main Game Page -->
        <section class="game-box custom">
            <div class="game">
                <div class="timer">30</div>
                <div class="current-question-amount"></div>
                <div class="life-line-display-box">
                    <div class="call">
                        <img src="img/call.png" alt="call">
                        <div class="call-answer"></div>
                    </div>
                    <div class="au-cover">
                        <h4 class="alpha">ABCD</h4>
                        <div class="au-container">
                            <div class="au-box" id="0">
<span></span><div class="bx"></div>
</div>
                            <div class="au-box" id="1">
<span></span><div class="bx"></div>
</div>
                            <div class="au-box" id="2">
<span></span><div class="bx"></div>
</div>
                            <div class="au-box" id="3">
<span></span><div class="bx"></div>
</div>
                        </div>
                    </div>
                </div>
                <div class="question">
                    <div class="question-text"></div>
                    <div class="options">
                        <div class="option" id="0">Option 1</div>
                        <div class="option" id="1">Option 2</div>
                        <div class="option" id="2">Option 3</div>
                        <div class="option" id="3">Option 4</div>
                    </div>
                </div>
                <div class="next-question-btn btn">Next Question</div>
                <div class="playAgain-btn btn">Play Again</div>
                <div class="amount-won"></div>
            </div>
        </section>
    </main>
    <script src="script.js"></script>

在此下載完整原始碼：[https://producators.com/Build-Who-Wants-to-Be-a-Millionaire-Using-JavaScript-Complete-Source-Code-]

以上是使用 JavaScript 建立“誰想成為百萬富翁”的詳細內容。更多資訊請關注PHP中文網其他相關文章！