---
id: 62a3a0a3c0a4b32915d26a6e
title: 步骤 19
challengeType: 0
dashedName: step-19
---

# --description--

删除 `console.log("Hello World");` ，然后开始写你自己的项目代码。

在 JavaScript 中，使用<dfn>变量</dfn>来保存一个值。 若要使用变量，你必须先<dfn>声明</dfn>。 例如，要声明一个名为 `camperbot` 的变量，你应该写：

```js
var camperbot;
```

`var` 关键字告诉 JavaScript 你正在声明一个变量。 声明一个名为 `xp` 的变量。

# --hints--

你的代码中不应该有 `console.log("Hello World");`。

```js
assert.notMatch(code, /console\.log\("Hello World"\);/);
```

你应该使用 `var` 关键字声明变量。

```js
assert.match(code, /var/);
```

你应该声明一个名为 `xp` 的变量。

```js
assert.match(code, /xp/);
```

你不应将一个值分配给你的变量。

```js
assert.notMatch(code, /var xp =/);
```

别忘了代码末尾的分号。

```js
assert.match(code, /var xp;/);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
    <script src="./script.js"></script>
</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>
```

```css
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;
}
```

```js
--fcc-editable-region--
console.log("Hello World");
--fcc-editable-region--
```
