Files
2022-10-10 12:35:19 -07:00

2.4 KiB

id, title, challengeType, dashedName
id title challengeType dashedName
62a2509ba163e020bb9d84ea 步骤 15 0 step-15

--description--

现在可以开始编写 JavaScript。 首先创建一个 script 元素。 此元素用于将 JavaScript 加载到 HTML 文件中。 应该使用开始 <script> 和结束 </script> 标记。

--hints--

应该有一个 script 元素。

assert.isAtLeast(document.querySelectorAll('script').length, 2);

script 元素应该有一个开始标记。

assert.match(code, /<script\s*>/i);

script 元素应该有一个结束标记。

assert.match(code, /<\/script\s*>/i);

--seed--

--seed-contents--

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
--fcc-editable-region--

--fcc-editable-region--
</head>
<body>
    <div id="game">
        <div id="stats">
            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
        </div>
        <div id="controls">
            <button id="button1">Go to store</button>
            <button id="button2">Go to cave</button>
            <button id="button3">Fight dragon</button>
        </div>
        <div id="monsterStats">
            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
        </div>
        <div id="text">
            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
        </div>
    </div>
</body>
</html>
body {
    background-color: darkblue;
}

#text {
    background-color: black;
    color: white;
    padding: 10px;
}

#game {
    max-width: 500px;
    max-height: 400px;
    background-color: lightgray;
    color: white;
    margin: 0 auto;
    padding: 10px;
}

#controls, #stats {
    border: 1px solid black;
    padding: 5px;
    color: black;
}

#monsterStats {
    display: none;
    border: 1px solid black;
    padding: 5px;
    color: white;
    background-color: red;
}

.stat {
    padding-right: 10px;
}