mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-02-25 05:03:48 -05:00
chore: remove erroneous files (#43959)
This commit is contained in:
Nicholas Carrigan (he/him)
committed by
GitHub
GitHub
parent
7dbc2835d3
commit
6b0f9be393
@@ -1,113 +0,0 @@
|
||||
---
|
||||
id: 5d5a813321b9e3db6c106a46
|
||||
title: Part 1
|
||||
challengeType: 0
|
||||
dashedName: part-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To keep track of the player's experience points, we've declared a variable called `xp` and assigned it the starting value of 0.
|
||||
|
||||
Create another variable to keep track of health and start it at 100.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(health === 100);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
var xp = 0;
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
var xp = 0;
|
||||
var health = 100;
|
||||
</script>
|
||||
```
|
||||
@@ -1,113 +0,0 @@
|
||||
---
|
||||
id: 5d5a8dd907f328a948d398ce
|
||||
title: Part 2
|
||||
challengeType: 0
|
||||
dashedName: part-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a variable called `gold` and set it to the value 50.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(gold === 50);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
var xp = 0;
|
||||
var health = 100;
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
var xp = 0;
|
||||
var health = 100;
|
||||
var gold = 50;
|
||||
</script>
|
||||
```
|
||||
@@ -1,117 +0,0 @@
|
||||
---
|
||||
id: 5d5a8f1c07f328a948d398cf
|
||||
title: Part 3
|
||||
challengeType: 0
|
||||
dashedName: part-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a variable called `currentWeapon` and set it to 0. When a name has two words, the convention is to use so-called "lowerCamelCase". The first word is all lowercase, and then the first letter of every preceding word is uppercased.
|
||||
|
||||
When a name has two words, the convention is to use so-called "lowerCamelCase". The variable name should look like this: currentWeapon.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(currentWeapon === 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
var xp = 0;
|
||||
var health = 100;
|
||||
var gold = 50;
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
var xp = 0;
|
||||
var health = 100;
|
||||
var gold = 50;
|
||||
var currentWeapon = 0;
|
||||
</script>
|
||||
```
|
||||
@@ -1,123 +0,0 @@
|
||||
---
|
||||
id: 5d5a903507f328a948d398d0
|
||||
title: Part 4
|
||||
challengeType: 0
|
||||
dashedName: part-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
We've been declaring variables with the `var` keyword. However, in modern JavaScript, it's better to use `let` instead of `var` because it fixes a number of unusual behaviors with `var` that make it difficult to reason about.
|
||||
|
||||
Change every `var` to `let`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/let\s+xp\s*\=\s*0\;?/.test(code) &&
|
||||
/let\s+health\s*\=\s*100\;?/.test(code) &&
|
||||
/let\s+gold\s*\=\s*50\;?/.test(code) &&
|
||||
/let\s+currentWeapon\s*\=\s*0\;?/.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
var xp = 0;
|
||||
var health = 100;
|
||||
var gold = 50;
|
||||
var currentWeapon = 0;
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
</script>
|
||||
```
|
||||
@@ -1,119 +0,0 @@
|
||||
---
|
||||
id: 5d5aaa5807f328a948d398d1
|
||||
title: Part 5
|
||||
challengeType: 0
|
||||
dashedName: part-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you will declare a variable without initializing it.
|
||||
|
||||
Using the `let` keyword, declare a variable called `fighting` but don't set it equal to anything. Just end the line with a semicolon right after the variable name.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(/let\s+fighting\s*;?/.test(code) && fighting === undefined);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
</script>
|
||||
```
|
||||
@@ -1,120 +0,0 @@
|
||||
---
|
||||
id: 5d5aab5d07f328a948d398d2
|
||||
title: Part 6
|
||||
challengeType: 0
|
||||
dashedName: part-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Declare variables named `monsterHealth` and `inventory` without initializing them.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(monsterHealth === undefined && inventory === undefined);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory;
|
||||
</script>
|
||||
```
|
||||
@@ -1,124 +0,0 @@
|
||||
---
|
||||
id: 5d5aac9c07f328a948d398d3
|
||||
title: Part 7
|
||||
challengeType: 0
|
||||
dashedName: part-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now set the inventory to equal the string "stick".
|
||||
|
||||
Strings must be surrounded with double quotes `"`, single quotes `'`, or backticks `` ` ``.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(inventory === 'stick');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory;
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = "stick";
|
||||
</script>
|
||||
```
|
||||
@@ -1,132 +0,0 @@
|
||||
---
|
||||
id: 5d5aad2307f328a948d398d4
|
||||
title: Part 8
|
||||
challengeType: 0
|
||||
dashedName: part-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Since the inventory can store multiple items, change the value of `inventory` to an array with the items stick, dagger, and sword.
|
||||
|
||||
Here is an example of a variable sandwich that equals a three-item array:
|
||||
|
||||
```js
|
||||
let sandwich = ["peanut butter", "jelly", "bread"];
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
inventory.includes('stick') &&
|
||||
inventory.includes('dagger') &&
|
||||
inventory.includes('sword')
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = "stick";
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick", "dagger", "sword"];
|
||||
</script>
|
||||
```
|
||||
@@ -1,122 +0,0 @@
|
||||
---
|
||||
id: 5d5aae1207f328a948d398d5
|
||||
title: Part 9
|
||||
challengeType: 0
|
||||
dashedName: part-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For now, let's start the player with just the stick. Delete the dagger and sword items in the array. More items will be added to the array during game play.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(inventory[0] === 'stick' && inventory.length === 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick", "dagger", "sword"];
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
</script>
|
||||
```
|
||||
@@ -1,131 +0,0 @@
|
||||
---
|
||||
id: 5d5ab57f07f328a948d398d6
|
||||
title: Part 10
|
||||
challengeType: 0
|
||||
dashedName: part-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In order to update HTML elements on the page, you need to get references to them in your JavaScript code. The code `let el = document.querySelector("#el");` gets a reference to an HTML element with an `id` of `el` and assigns it to the variable `el`.
|
||||
|
||||
Get a reference to the HTML element with the `id` of `button1` and assign it to a variable with the name `button1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/let\s+button1\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button1\s*[\'\"\`]\s*\);?/.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
let button1 = document.querySelector('#button1');
|
||||
</script>
|
||||
```
|
||||
@@ -1,126 +0,0 @@
|
||||
---
|
||||
id: 5d5b66ce07f328a948d398d7
|
||||
title: Part 11
|
||||
challengeType: 0
|
||||
dashedName: part-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can also declare variables with the `const` key word. Since `button1` is a constant that will never change, switch the `let` keyword that declares the variable to `const`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(/const\s+button1\s*/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
let button1 = document.querySelector('#button1');
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
</script>
|
||||
```
|
||||
@@ -1,165 +0,0 @@
|
||||
---
|
||||
id: 5d64cf8f853b56a21cd16319
|
||||
title: Part 12
|
||||
challengeType: 0
|
||||
dashedName: part-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Here are the ids of the other HTML elements that we want a reference to in the JavaScript code: `button2`, `button3`, `text`, `xpText`, `healthText`, `goldText`, `monsterStats`, `monsterNameText`, `monsterHealthText`.
|
||||
|
||||
Just like you did with `storeButton`, create variables and set them equal to the element references.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/const\s+button2\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button2\s*[\'\"\`]\s*\);?/.test(
|
||||
code
|
||||
) &&
|
||||
/const\s+button3\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button3\s*[\'\"\`]\s*\);?/.test(
|
||||
code
|
||||
) &&
|
||||
/const\s+text\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#text\s*[\'\"\`]\s*\);?/.test(
|
||||
code
|
||||
) &&
|
||||
/const\s+xpText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#xpText\s*[\'\"\`]\s*\);?/.test(
|
||||
code
|
||||
) &&
|
||||
/const\s+healthText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#healthText\s*[\'\"\`]\s*\);?/.test(
|
||||
code
|
||||
) &&
|
||||
/const\s+goldText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#goldText\s*[\'\"\`]\s*\);?/.test(
|
||||
code
|
||||
) &&
|
||||
/const\s+monsterStats\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterStats\s*[\'\"\`]\s*\);?/.test(
|
||||
code
|
||||
) &&
|
||||
/const\s+monsterNameText|monsterName\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterName\s*[\'\"\`]\s*\);?/.test(
|
||||
code
|
||||
) &&
|
||||
/const\s+monsterHealthText|monsterHealth\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterHealth\s*[\'\"\`]\s*\);?/.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
</script>
|
||||
```
|
||||
@@ -1,148 +0,0 @@
|
||||
---
|
||||
id: 5d651ee1ee291f75bbd738ee
|
||||
title: Part 13
|
||||
challengeType: 0
|
||||
dashedName: part-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Make a comment to describe what the next few lines of code will do. Comments can be written with either two forward-slashes `//` or with a multi-line sequence `/* */`. For example, here is a single line comment that says "hello world": `// hello world`.
|
||||
|
||||
Write a single line comment that says "initialize buttons".
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(/\/\/\s*[iI]nitialize buttons/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
</script>
|
||||
```
|
||||
@@ -1,150 +0,0 @@
|
||||
---
|
||||
id: 5d652e5a6e6bf7a6a27aa80a
|
||||
title: Part 14
|
||||
challengeType: 0
|
||||
dashedName: part-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Designate what the first button in the HTML does by setting the `onclick` property of `button1` to the function name `goStore`. You will create the `goStore` function later. For example, in `button.onclick = openProgram;`, the `onclick` property of `button` is set to `openProgram`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(/button1\.onclick\s*\=\s*goStore\;?/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
</script>
|
||||
```
|
||||
@@ -1,155 +0,0 @@
|
||||
---
|
||||
id: 5d653b2d6e6bf7a6a27aa80b
|
||||
title: Part 15
|
||||
challengeType: 0
|
||||
dashedName: part-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now set the `onclick` property of `button2` and `button3`. The second button should be set to `goCave` and the third button should be set to `fightDragon`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/button2\.onclick\s*\=\s*goCave\;?/.test(code) &&
|
||||
/button3\.onclick\s*\=\s*fightDragon\;?/.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
</script>
|
||||
```
|
||||
@@ -1,162 +0,0 @@
|
||||
---
|
||||
id: 5d653c4d6e6bf7a6a27aa80c
|
||||
title: Part 16
|
||||
challengeType: 0
|
||||
dashedName: part-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create the `goStore` function to hold the code that runs whenever the player goes to the store. Here is an example of an empty function called `functionName` (Note the opening curly brace at the end of the first line and the closing curly brace on the second line):
|
||||
|
||||
```js
|
||||
function functionName() {
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(typeof goStore === 'function');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,171 +0,0 @@
|
||||
---
|
||||
id: 5d6542826e6bf7a6a27aa80d
|
||||
title: Part 17
|
||||
challengeType: 0
|
||||
dashedName: part-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For now, make the `goStore` function output the message "Going to store." to the web console. For example, here is a function that outputs the message "Hello World" to the web console (Note that code inside a function should be indented):
|
||||
|
||||
```js
|
||||
function functionName() {
|
||||
console.log("Hello World");
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
goStore
|
||||
.toString()
|
||||
.match(/console\.log\(\s*[\"\'\`]Going to store\.?[\"\'\`]\s*\)/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
console.log("Going to store.");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,170 +0,0 @@
|
||||
---
|
||||
id: 5d65f2c62012114c7d7c57eb
|
||||
title: Part 18
|
||||
challengeType: 0
|
||||
dashedName: part-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Similar to the `goStore` function, create a `goCave` function that prints "Going to cave." to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
goCave
|
||||
.toString()
|
||||
.match(/console\.log\(\s*[\"\'\`]Going to cave\.?[\"\'\`]\s*\)/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
console.log("Going to store.")
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
console.log("Going to store.")
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,180 +0,0 @@
|
||||
---
|
||||
id: 5d65f4cd2012114c7d7c57ec
|
||||
title: Part 19
|
||||
challengeType: 0
|
||||
dashedName: part-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Also, create a `fightDragon` function that prints "Fighting dragon." to the console.
|
||||
|
||||
When you are finished, you can test out your program in the browser.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
fightDragon
|
||||
.toString()
|
||||
.match(/console\.log\(\s*[\"\'\`]Fighting dragon\.?[\"\'\`]\s*\)/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
console.log("Going to store.")
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
console.log("Going to store.")
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,185 +0,0 @@
|
||||
---
|
||||
id: 5d65f6392012114c7d7c57ed
|
||||
title: Part 20
|
||||
challengeType: 0
|
||||
dashedName: part-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When a player clicks the 'Go to store' button, the buttons and text in the game should change. Remove the code inside the `goStore` function. Add a new line of code inside the function that updates the text of `button1` so that it says "Buy 10 health (10 gold)".
|
||||
|
||||
For example, this code updates the text of `button` to say "Click Me": `button.innerText = "Click Me";`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
goStore();
|
||||
return button1.innerText === 'Buy 10 health (10 gold)';
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
console.log("Going to store.");
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,189 +0,0 @@
|
||||
---
|
||||
id: 5d6606634bab337fbb433884
|
||||
title: Part 21
|
||||
challengeType: 0
|
||||
dashedName: part-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After the line that updates `button1`, update the text of `button2` to say "Buy weapon (30 gold)" and update the text of `button3` to say "Go to town square".
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
goStore();
|
||||
return (
|
||||
button1.innerText === 'Buy 10 health (10 gold)' &&
|
||||
button2.innerText === 'Buy weapon (30 gold)' &&
|
||||
button3.innerText === 'Go to town square'
|
||||
);
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,189 +0,0 @@
|
||||
---
|
||||
id: 5d66093c4bab337fbb433885
|
||||
title: Part 22
|
||||
challengeType: 0
|
||||
dashedName: part-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that the text on the buttons have changed, the `onclick` properties on the buttons should change. Inside the goStore function, update the `onclick` property of all three buttons. The new functions should be `buyHealth`, `buyWeapon`, and `goTown`. If you have trouble, look at how the buttons were initialized.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
goStore.toString().match(/button1\.onclick\s*\=\s*buyHealth\;?/) &&
|
||||
goStore.toString().match(/button2\.onclick\s*\=\s*buyWeapon\;?/) &&
|
||||
goStore.toString().match(/button3\.onclick\s*\=\s*goTown\;?/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,193 +0,0 @@
|
||||
---
|
||||
id: 5d660a32e0696bdec46938d5
|
||||
title: Part 23
|
||||
challengeType: 0
|
||||
dashedName: part-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Right after the `onclick` properties are updated, change the `innerText` property of `text` to "You enter the store."
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
goStore
|
||||
.toString()
|
||||
.match(/text\.innerText\s*\=\s*[\'\"\`]You enter the store\.?[\'\"\`]/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,203 +0,0 @@
|
||||
---
|
||||
id: 5d6616d8e0696bdec46938d6
|
||||
title: Part 24
|
||||
challengeType: 0
|
||||
dashedName: part-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
At the end of the current code, add three new empty functions called `buyHealth`, `buyWeapon`, and `goTown`. After this step, you can test out the game by clicking the "Go to store" button.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof buyHealth === 'function' &&
|
||||
typeof buyWeapon === 'function' &&
|
||||
typeof goTown === 'function'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,228 +0,0 @@
|
||||
---
|
||||
id: 5d661814e0696bdec46938d7
|
||||
title: Part 25
|
||||
challengeType: 0
|
||||
dashedName: part-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move the `goTown` function to above the `goStore` function. Then, copy and paste the contents of the `goStore` function into the `goTown` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
goTown();
|
||||
return (
|
||||
button1.innerText === 'Buy 10 health (10 gold)' &&
|
||||
button2.innerText === 'Buy weapon (30 gold)' &&
|
||||
button3.innerText === 'Go to town square' &&
|
||||
text.innerText === 'You enter the store.' &&
|
||||
goTown.toString().match(/button1\.onclick\s*\=\s*buyHealth\;?/) &&
|
||||
goTown.toString().match(/button2\.onclick\s*\=\s*buyWeapon\;?/) &&
|
||||
goTown.toString().match(/button3\.onclick\s*\=\s*goTown\;?/)
|
||||
);
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,230 +0,0 @@
|
||||
---
|
||||
id: 5d66198de0696bdec46938d8
|
||||
title: Part 26
|
||||
challengeType: 0
|
||||
dashedName: part-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add double quote marks around the word "Store" in the line "You see a sign that says Store." Before each quotation mark add a `\` to signal that the following quote is not the end of the string, but should instead appear inside the string. This is called escaping.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
goTown();
|
||||
return (
|
||||
text.innerText ===
|
||||
'You are in the town square. You see a sign that says "Store".'
|
||||
);
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says Store.";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,235 +0,0 @@
|
||||
---
|
||||
id: 5d661bc6e0696bdec46938d9
|
||||
title: Part 27
|
||||
challengeType: 0
|
||||
dashedName: part-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
There is repetition in the `goTown` and `goStore` functions. When you have repetition in code, it is a sign that you need a new function.
|
||||
|
||||
Above the `goTown` function, create an empty function called `update`. This time the function should take a parameter named `location` so data can be passed into the function when it is called.
|
||||
|
||||
Here is an example of a function named `testFun` that accepts a parameter named `param`:
|
||||
|
||||
```js
|
||||
function testFun(param) {
|
||||
console.log(param);
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(update.toString().match(/function update\(\s*location\)\s*\{\s*\}/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,230 +0,0 @@
|
||||
---
|
||||
id: 5d6653d5e0696bdec46938da
|
||||
title: Part 28
|
||||
challengeType: 0
|
||||
dashedName: part-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the list of `const` variables, create a new `const` variable called `locations`. Set it to equal an empty array. This will be used to store all the data for the locations in the game.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(Array.isArray(locations) && locations.length === 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,236 +0,0 @@
|
||||
---
|
||||
id: 5d665983e0696bdec46938dc
|
||||
title: Part 29
|
||||
challengeType: 0
|
||||
dashedName: part-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Arrays can store any data type, including objects. Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through what are called properties.
|
||||
|
||||
Inside the `locations` array add an empty object using curly braces.
|
||||
|
||||
Here is an example of an array named `arr` with an empty object inside: `const arr = [{}];`
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(JSON.stringify(locations), `[{}]`);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [{}];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,246 +0,0 @@
|
||||
---
|
||||
id: 5d674fd9e0696bdec46938dd
|
||||
title: Part 30
|
||||
challengeType: 0
|
||||
dashedName: part-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the object you just added, create a property called `name` with the value of "town square".
|
||||
|
||||
For example, here is an example of an array with an object inside that has a property called `name` with a value of "Quincy Larson" (new lines are used only for the purpose of making the code more readable):
|
||||
|
||||
```js
|
||||
const arr = [
|
||||
{
|
||||
name: "Quincy Larson"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(locations[0].name === 'town square');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [{}];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square"
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,252 +0,0 @@
|
||||
---
|
||||
id: 5d6752e3e0696bdec46938de
|
||||
title: Part 31
|
||||
challengeType: 0
|
||||
dashedName: part-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After the `name` property put a comma. On the next line add a property named `"button text"` that has a value of an empty array. Since the property name has more than one word, there must be quotes around it.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```js
|
||||
const arr = [
|
||||
{
|
||||
name: "Quincy Larson",
|
||||
"favorite colors": []
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(locations[0]['button text'], []);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square"
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": []
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,248 +0,0 @@
|
||||
---
|
||||
id: 5d6755fce0696bdec46938df
|
||||
title: Part 32
|
||||
challengeType: 0
|
||||
dashedName: part-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `"button text"` array, add three string elements. Use the three stings assigned to the buttons inside the `goTown` function.
|
||||
|
||||
Here is an example array with three strings: `const arr = ["one", "two", "three"];`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(locations[0]['button text'], [
|
||||
'Go to store',
|
||||
'Go to cave',
|
||||
'Fight dragon'
|
||||
]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": []
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"]
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,247 +0,0 @@
|
||||
---
|
||||
id: 5d675726e0696bdec46938e0
|
||||
title: Part 33
|
||||
challengeType: 0
|
||||
dashedName: part-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add another property in the object with the name `"button functions"`. The value should be an array containing the three `onclick` functions from the `goTown` function. It should look like this: `[goStore, goCave, fightDragon]`
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(locations[0]['button functions'], [
|
||||
goStore,
|
||||
goCave,
|
||||
fightDragon
|
||||
]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"]
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon]
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,248 +0,0 @@
|
||||
---
|
||||
id: 5d678366e0696bdec46938e1
|
||||
title: Part 34
|
||||
challengeType: 0
|
||||
dashedName: part-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add one final property to the object named `text`. The value should be the final text from the `goTown` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
locations[0].text ===
|
||||
'You are in the town square. You see a sign that says "Store."'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon]
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,261 +0,0 @@
|
||||
---
|
||||
id: 5d67845ee0696bdec46938e2
|
||||
title: Part 35
|
||||
challengeType: 0
|
||||
dashedName: part-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `locations` array currently has one element which is an object. Within the array, and after the object's final curly brace, add a comma. On the next line within the array, add another object with all the same properties as the first object. Keep the property names the same on the second object, but change all the property values to the information from the `goStore` function. Also, set the `name` property to `store`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(locations[1], {
|
||||
name: 'store',
|
||||
'button text': [
|
||||
'Buy 10 health (10 gold)',
|
||||
'Buy weapon (30 gold)',
|
||||
'Go to town square'
|
||||
],
|
||||
'button functions': [buyHealth, buyWeapon, goTown],
|
||||
text: 'You enter the store.'
|
||||
});
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,267 +0,0 @@
|
||||
---
|
||||
id: 5d67880ee0696bdec46938e3
|
||||
title: Part 36
|
||||
challengeType: 0
|
||||
dashedName: part-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now we are can consolidate the code inside the `goTown` and `goStore` functions. Copy the code inside the `goTown` function and paste it in the `update` function. Then delete all the code inside the `goTown` and `goStore` functions.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
update();
|
||||
return (
|
||||
goTown.toString() === 'function goTown() {}' &&
|
||||
goStore.toString() === 'function goStore() {}' &&
|
||||
button1.innerText === 'Go to store' &&
|
||||
button2.innerText === 'Go to cave' &&
|
||||
button3.innerText === 'Fight dragon' &&
|
||||
text.innerText ===
|
||||
'You are in the town square. You see a sign that says "Store".' &&
|
||||
update.toString().match(/button1\.onclick\s*\=\s*goStore\;?/) &&
|
||||
update.toString().match(/button2\.onclick\s*\=\s*goCave\;?/) &&
|
||||
update.toString().match(/button3\.onclick\s*\=\s*fightDragon\;?/)
|
||||
);
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,247 +0,0 @@
|
||||
---
|
||||
id: 5d67ad3de0696bdec46938e4
|
||||
title: Part 37
|
||||
challengeType: 0
|
||||
dashedName: part-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Instead of assigning the `innerText` and `onClick` properties to specific strings and functions like it does now, the `update` function will use data from the `location` that is passed into it. First, data needs to be passed into the `update` function. Inside the `goTown` function, call the `update` function.
|
||||
|
||||
Here is how you would call a function named `exampleFunction`: `exampleFunction();`
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(goTown.toString().match(/update\(\)/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update();
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,248 +0,0 @@
|
||||
---
|
||||
id: 5d67ae95e0696bdec46938e5
|
||||
title: Part 38
|
||||
challengeType: 0
|
||||
dashedName: part-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now change the code you just wrote to call the `update` function so the `locations` array is passed in as an argument.
|
||||
|
||||
Here is how you would call a function named `exampleFunction` with an argument called `arg`: `exampleFunction(arg);`
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(goTown.toString().match(/update\(locations\)/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update();
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,246 +0,0 @@
|
||||
---
|
||||
id: 5d67b284e0696bdec46938e6
|
||||
title: Part 39
|
||||
challengeType: 0
|
||||
dashedName: part-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `locations` array contains two locations: the town square and store. Currently the entire array with both locations is being passed in to the update function. Pass in only the first element of the locations array by adding `[0]` at the end of the name of the array. For example, `exampleFunction(arg[0]);`
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(goTown.toString().match(/update\(locations\[0\]\)/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,252 +0,0 @@
|
||||
---
|
||||
id: 5d67b945e0696bdec46938e7
|
||||
title: Part 40
|
||||
challengeType: 0
|
||||
dashedName: part-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that the `goTown` function calls the `update` function with the first element of the `locations` array, it is time to use that location information to update the `innerText` and `onclick` properties.
|
||||
|
||||
Inside the `update` function, change `button1.innerText` to equal `location["button text"]`. That line gets the `"button text"` property of the `location` that was passed into the `update` function\`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
update
|
||||
.toString()
|
||||
.match(/button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"];
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,252 +0,0 @@
|
||||
---
|
||||
id: 5d68c3b1e0696bdec46938e8
|
||||
title: Part 41
|
||||
challengeType: 0
|
||||
dashedName: part-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`location["button text"]` is an array with three elements. Use only the first element of the array by adding `[0]` at the end.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
update
|
||||
.toString()
|
||||
.match(
|
||||
/button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[0\]/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"];
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,257 +0,0 @@
|
||||
---
|
||||
id: 5d68c51ee0696bdec46938e9
|
||||
title: Part 42
|
||||
challengeType: 0
|
||||
dashedName: part-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now update the `innerText` of the other two buttons. They should be set to equal the same thing as the first button, except the number inside the brackets should be 1 for the second button and 2 for the third button.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
update
|
||||
.toString()
|
||||
.match(
|
||||
/button2\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[1\]/
|
||||
) &&
|
||||
update
|
||||
.toString()
|
||||
.match(
|
||||
/button3\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[2\]/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,262 +0,0 @@
|
||||
---
|
||||
id: 5d68c5efe0696bdec46938ea
|
||||
title: Part 43
|
||||
challengeType: 0
|
||||
dashedName: part-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now update the three `onclick` properties. These will look very similar to the `innerText` properties, except instead of using the `"button text"` part of the `location`, use `"button functions"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
update
|
||||
.toString()
|
||||
.match(
|
||||
/button1\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[0\]/
|
||||
) &&
|
||||
update
|
||||
.toString()
|
||||
.match(
|
||||
/button2\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[1\]/
|
||||
) &&
|
||||
update
|
||||
.toString()
|
||||
.match(
|
||||
/button3\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[2\]/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,248 +0,0 @@
|
||||
---
|
||||
id: 5d68c758e0696bdec46938eb
|
||||
title: Part 44
|
||||
challengeType: 0
|
||||
dashedName: part-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, update `text.innerText` to equal the `text` from the location object.
|
||||
|
||||
So far we have been accessing properties of the location object using bracket notation. This time use dot notation. Here is how to access a `name` property of an object called `obj` using dot notation: `obj.name`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(update.toString().match(/text\.innerText\s*\=\s*location\.text\;?/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,247 +0,0 @@
|
||||
---
|
||||
id: 5d68c947e0696bdec46938ec
|
||||
title: Part 45
|
||||
challengeType: 0
|
||||
dashedName: part-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now update the `goStore` function. The code should look just like the code inside the `goTown` function, except the number 0 should be changed to 1. After this step would be a good time to try out the game so far. You should be able to move between the store and the town square.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(goStore.toString().match(/update\(locations\[1\]\)/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,266 +0,0 @@
|
||||
---
|
||||
id: 5d68ca40e0696bdec46938ed
|
||||
title: Part 46
|
||||
challengeType: 0
|
||||
dashedName: part-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a third object in the `locations` array with the same properties as the other two objects.
|
||||
|
||||
Set `name` to "cave". Set the elements in the `"button text"` array to \["Fight slime", "Fight fanged beast", and "Go to town square". Set te elements in the `"button functions"` array to be "fightSlime", "fightBeast", and "goTown". Set the value of the `text` property to "You enter the cave. You see some monsters.".
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(locations[2], {
|
||||
name: 'cave',
|
||||
'button text': ['Fight slime', 'Fight fanged beast', 'Go to town square'],
|
||||
'button functions': [fightSlime, fightBeast, goTown],
|
||||
text: 'You enter the cave. You see some monsters.'
|
||||
});
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
<script>
|
||||
// Need to initialize for test
|
||||
function fightSlime() {}
|
||||
function fightBeast() {}
|
||||
</script>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,265 +0,0 @@
|
||||
---
|
||||
id: 5d68d3f7e0696bdec46938ee
|
||||
title: Part 47
|
||||
challengeType: 0
|
||||
dashedName: part-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now update the `goCave` function using the pattern from `goTown` and `goCave`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(goCave.toString().match(/update\(locations\[2\]\)\;?/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
<script>
|
||||
// Need to initialize for test
|
||||
function fightSlime() {}
|
||||
function fightBeast() {}
|
||||
</script>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,266 +0,0 @@
|
||||
---
|
||||
id: 5d68d4fde0696bdec46938ef
|
||||
title: Part 48
|
||||
challengeType: 0
|
||||
dashedName: part-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create two more empty functions: `fightSlime` and `fightBeast`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(typeof fightSlime === 'function' && typeof fightBeast === 'function');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,275 +0,0 @@
|
||||
---
|
||||
id: 5d68d631e0696bdec46938f0
|
||||
title: Part 49
|
||||
challengeType: 0
|
||||
dashedName: part-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that the store and cave locations are complete, we'll code the actions at those locations. Inside the `buyHealth` function, set `gold` to equal `gold` minus 10.
|
||||
|
||||
For example here is how you would set set `num` to equal 5 less than `num`: `num = num - 5;`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
buyHealth(), assert(gold === 40);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
gold = gold - 10;
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,275 +0,0 @@
|
||||
---
|
||||
id: 5d68dbf7e0696bdec46938f1
|
||||
title: Part 50
|
||||
challengeType: 0
|
||||
dashedName: part-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After gold is subtracted, add ten to health.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
buyHealth(), assert(gold === 40 && health === 110);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
gold = gold - 10;
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
gold = gold - 10;
|
||||
health = health + 10;
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,281 +0,0 @@
|
||||
---
|
||||
id: 5d6904b6e0696bdec46938f2
|
||||
title: Part 51
|
||||
challengeType: 0
|
||||
dashedName: part-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
There is a shorthand way to add or subtract from a variable called compound assignment. The long way to add to a variable is `num = num + 5`. The shorthand way is `num += 5`. It works the same way with subtraction.
|
||||
|
||||
Update both lines inside the `buyHealth` function to use compound assignment.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) &&
|
||||
buyHealth.toString().match(/health\s*\+\=\s*10\;?/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
gold = gold - 10;
|
||||
health = health + 10;
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,281 +0,0 @@
|
||||
---
|
||||
id: 5d6905ace0696bdec46938f3
|
||||
title: Part 52
|
||||
challengeType: 0
|
||||
dashedName: part-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that the gold and health variables have been updated, we need to update the values displayed on the screen. Inside the `buyHealth` function, add the line `goldText.innerText = gold;`. Then use the same pattern to update `healthText`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) &&
|
||||
buyHealth.toString().match(/healthText.innerText\s*\=\s*health\;?/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,302 +0,0 @@
|
||||
---
|
||||
id: 5d6f6bfc7c812010bf3327cc
|
||||
title: Part 53
|
||||
challengeType: 0
|
||||
dashedName: part-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
What if the player doesn't have enough gold to buy health? Put all the code in the `buyHealth` function inside an `if` statement. Here is an example of an `if` statement inside a function:
|
||||
|
||||
```js
|
||||
function checkMoney() {
|
||||
if (condition) {
|
||||
console.log("You have money!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Note: For now you should use the word "condition" inside the `if` statement but we'll be changing that next.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
buyHealth
|
||||
.toString()
|
||||
.match(
|
||||
/if\s*\(\s*condition\s*\)\s*\{\s*(gold|health|goldText|healthText)/
|
||||
) &&
|
||||
buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) &&
|
||||
buyHealth.toString().match(/health\s*\+\=\s*10\;?/) &&
|
||||
buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) &&
|
||||
buyHealth.toString().match(/healthText\.innerText\s*\=\s*health\;?/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (condition) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,292 +0,0 @@
|
||||
---
|
||||
id: 5d6f6e3c7c812010bf3327cd
|
||||
title: Part 54
|
||||
challengeType: 0
|
||||
dashedName: part-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The word "condition" inside the if statement is just a placeholder. Change the condition to check if the amount of gold the player has is greater than or equal to 10.
|
||||
|
||||
Here is an `if` statement that checks if `num` is greater than or equal to 5:
|
||||
|
||||
```js
|
||||
if (num >= 5) {
|
||||
console.log("Num is greater than or equal to five!");
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(buyHealth.toString().match(/if\s*\(\s*gold\s*\>\=\s*10\s*\)/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (condition) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,295 +0,0 @@
|
||||
---
|
||||
id: 5d6f6f747c812010bf3327ce
|
||||
title: Part 55
|
||||
challengeType: 0
|
||||
dashedName: part-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now when a player tries to buy health it will only work if they have enough money. If the player does not have enough money, nothing will happen. Add an `else` statement where you can put code to run if a player dees not have enough money.
|
||||
|
||||
Here is an example of an empty `else` statement:
|
||||
|
||||
```js
|
||||
if (num >= 5) {
|
||||
console.log("Num is greater than or equal to five!");
|
||||
} else {
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(buyHealth.toString().match(/\}\s*else\s*\{\s*\}/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,290 +0,0 @@
|
||||
---
|
||||
id: 5d6f70937c812010bf3327cf
|
||||
title: Part 56
|
||||
challengeType: 0
|
||||
dashedName: part-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `else` statement, set `text.innerText` to equal "You do not have enough gold to buy health."
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
(gold = 5),
|
||||
buyHealth(),
|
||||
assert(text.innerText === 'You do not have enough gold to buy health.');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,290 +0,0 @@
|
||||
---
|
||||
id: 5d6f72657c812010bf3327d0
|
||||
title: Part 57
|
||||
challengeType: 0
|
||||
dashedName: part-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Before we write the code for the `buyWeapon` function, use `const` to create a `weapons` variable right above the `locations` array. Set it to equal an empty array.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(weapons, []);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,314 +0,0 @@
|
||||
---
|
||||
id: 5d6f736b7c812010bf3327d2
|
||||
title: Part 58
|
||||
challengeType: 0
|
||||
dashedName: part-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Just like in the `locations` array, all the elements in `weapons` will be objects. Add four objects to the `weapons` array, each with two properties: `name` and `power`. The first should be the `name` "stick" with `power` set to 5. Then, "dagger" with set `power` to 30. Next, "claw hammer" with a `power` of 50. Finally, "sword" with a `power` of 100.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(weapons, [
|
||||
{ name: 'stick', power: 5 },
|
||||
{ name: 'dagger', power: 30 },
|
||||
{ name: 'claw hammer', power: 50 },
|
||||
{ name: 'sword', power: 100 }
|
||||
]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,329 +0,0 @@
|
||||
---
|
||||
id: 5d6f776c7c812010bf3327d3
|
||||
title: Part 59
|
||||
challengeType: 0
|
||||
dashedName: part-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `buyWeapon` function, add an `if` statement to check if gold is greater than or equal to 30.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(buyWeapon.toString().match(/if\s*\(\s*gold\s*\>\=\s*30\)\s*\{\s*\}/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,332 +0,0 @@
|
||||
---
|
||||
id: 5d6f785f7c812010bf3327d4
|
||||
title: Part 60
|
||||
challengeType: 0
|
||||
dashedName: part-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Similar to in the `buyHealth` function, set `gold` to equal 30 less than its current value.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
(gold = 50), buyWeapon(), assert(gold === 20);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,333 +0,0 @@
|
||||
---
|
||||
id: 5d6f79667c812010bf3327d6
|
||||
title: Part 61
|
||||
challengeType: 0
|
||||
dashedName: part-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The value of `currentWeapon` corresponds to an index in the `weapons` array. The player starts with a stick since `currentWeapon` starts at 0 and `weapons[0]` is the "stick" weapon. In the `buyWeapon` function, add one to `currentWeapon` since the user is buying the next weapon in the `weapons` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
(currentWeapon = 0), buyWeapon(), assert(currentWeapon === 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon += 1;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,342 +0,0 @@
|
||||
---
|
||||
id: 5d6f7b917c812010bf3327d7
|
||||
title: Part 62
|
||||
challengeType: 0
|
||||
dashedName: part-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can easily increment or add one to a variable with the `++` operator. All three of these statements add one to a number:
|
||||
|
||||
```js
|
||||
num = num + 1;
|
||||
num += 1;
|
||||
num++;
|
||||
```
|
||||
|
||||
Change the line `currentWeapon += 1;` to use the `++` operator.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(buyWeapon.toString().match(/currentWeapon\s*\+\+\;?/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon += 1;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,340 +0,0 @@
|
||||
---
|
||||
id: 5d6f82da7c812010bf3327d8
|
||||
title: Part 63
|
||||
challengeType: 0
|
||||
dashedName: part-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now update the `innerText` property of `goldText` and `text`. `text` should equal "You now have a new weapon.".
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
buyWeapon(),
|
||||
assert(
|
||||
goldText.innerText === '20' &&
|
||||
text.innerText === 'You now have a new weapon.'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
text.innerText = "You now have a new weapon.";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,339 +0,0 @@
|
||||
---
|
||||
id: 5d6f919f7c812010bf3327d9
|
||||
title: Part 64
|
||||
challengeType: 0
|
||||
dashedName: part-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Let's tell the player what weapon they bought. In between the two lines you just wrote, use `let` to initialize a new variable called `newWeapon`. Set `newWeapon` to equal `weapons`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(/let\s*newWeapon\s*\=\s*weapons\;?/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
text.innerText = "You now have a new weapon.";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons;
|
||||
text.innerText = "You now have a new weapon.";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,340 +0,0 @@
|
||||
---
|
||||
id: 5d6f94347c812010bf3327da
|
||||
title: Part 65
|
||||
challengeType: 0
|
||||
dashedName: part-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Right after the word `weapons` (with no space between), add brackets `[]`. In between the brackets put `currentWeapon`, which is the index number of the weapon the player just bought.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(/let\s*newWeapon\s*\=\s*weapons\s?\[currentWeapon\]\;?/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons;
|
||||
text.innerText = "You now have a new weapon.";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon];
|
||||
text.innerText = "You now have a new weapon.";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,342 +0,0 @@
|
||||
---
|
||||
id: 5d6f96747c812010bf3327db
|
||||
title: Part 66
|
||||
challengeType: 0
|
||||
dashedName: part-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Get just the name property of the current weapon by adding `.name` at the end of `weapons[currentWeapon]` (don't use a space).
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/let\s*newWeapon\s*\=\s*weapons\s?\[currentWeapon\]\.name\;?/.test(code)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon];
|
||||
text.innerText = "You now have a new weapon.";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a new weapon.";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,351 +0,0 @@
|
||||
---
|
||||
id: 5d6f98247c812010bf3327dc
|
||||
title: Part 67
|
||||
challengeType: 0
|
||||
dashedName: part-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can insert variables into a string with the concatenation (`+`) operator. Update the "You now have a new weapon." string so it says "You now have a " and then lists the name of the new weapon. Make sure to add a period at the end of the sentence.
|
||||
|
||||
Here is an example that creates the string "Hello, our name is freeCodeCamp.":
|
||||
|
||||
```js
|
||||
let ourName = "freeCodeCamp";
|
||||
let ourStr = "Hello, our name is " + ourName + ".";
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
buyWeapon
|
||||
.toString()
|
||||
.match(/[\'\"\`]You now have a [\'\"\`]\s*\+\s*newWeapon\;?/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a new weapon.";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,348 +0,0 @@
|
||||
---
|
||||
id: 5d6f9a4c7c812010bf3327dd
|
||||
title: Part 68
|
||||
challengeType: 0
|
||||
dashedName: part-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Way back at the beginning you created the `inventory` array. Push the `newWeapon` onto the end of the `inventory` array. Here is an example of pushing onto an array:
|
||||
|
||||
```js
|
||||
let arr = ["first"];
|
||||
let next = "second";
|
||||
arr.push(next);
|
||||
// arr now equals ["first", "second"]
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
buyWeapon(), assert.deepStrictEqual(inventory, ['stick', 'dagger']);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,349 +0,0 @@
|
||||
---
|
||||
id: 5d70850e066dac7142a6d797
|
||||
title: Part 69
|
||||
challengeType: 0
|
||||
dashedName: part-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Up to this point, anytime `text.innerText` was updated, the old text was erased. This time, use the `+=` operator instead of the `=` operator to add text to the end of `text.innerText`. Add the string " In your inventory you have: " (include the spaces at the beginning and end).
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
buyWeapon
|
||||
.toString()
|
||||
.match(
|
||||
/text\.innerText\s*\+\=\s*[\'\"\`] In your inventory you have\: [\'\"\`]\;?/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: ";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,350 +0,0 @@
|
||||
---
|
||||
id: 5d70862e066dac7142a6d798
|
||||
title: Part 70
|
||||
challengeType: 0
|
||||
dashedName: part-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
At the end of the string you just added after the ending quote mark, add `+ inventory` to add the contents of the inventory to the end of the string.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
buyWeapon
|
||||
.toString()
|
||||
.match(
|
||||
/text\.innerText\s*\+\=\s*[\'\"\`] In your inventory you have\: [\'\"\`]\s*\+\s*inventory\;?/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: ";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,352 +0,0 @@
|
||||
---
|
||||
id: 5d7086d4066dac7142a6d799
|
||||
title: Part 71
|
||||
challengeType: 0
|
||||
dashedName: part-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
At the end of the `if` statement inside the `buyWeapon` function, add an `else` statement. Inside the `else` statement, set `text.innerText` to equal "You do not have enough gold to buy a weapon.".
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
buyWeapon
|
||||
.toString()
|
||||
.match(
|
||||
/\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,361 +0,0 @@
|
||||
---
|
||||
id: 5d7088d2066dac7142a6d79a
|
||||
title: Part 72
|
||||
challengeType: 0
|
||||
dashedName: part-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Once a player has the best weapon, they can't buy another one. Wrap all the code in the `buyWeapon` function inside another `if` statement. The condition should check if `currentWeapon` is less than 3 (the index of the last weapon).
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
buyWeapon
|
||||
.toString()
|
||||
.match(
|
||||
/if\s*\(\s*currentWeapon\s*\<\s*3\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/
|
||||
) &&
|
||||
buyWeapon
|
||||
.toString()
|
||||
.match(
|
||||
/\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}\s*\}/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < 3) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,358 +0,0 @@
|
||||
---
|
||||
id: 5d708ab5066dac7142a6d79b
|
||||
title: Part 73
|
||||
challengeType: 0
|
||||
dashedName: part-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
At some point in the future, you may want to add more weapons. Instead of checking if `currentWeapon` is less than three, check if `currentWeapon` is less than the length of the `weapons` array. For example, here is how you would get the length of an array called `arr`: `arr.length`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
buyWeapon
|
||||
.toString()
|
||||
.match(
|
||||
/if\s*\(\s*currentWeapon\s*\<\s*weapons\.length\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < 3) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,358 +0,0 @@
|
||||
---
|
||||
id: 5d708be9066dac7142a6d79c
|
||||
title: Part 74
|
||||
challengeType: 0
|
||||
dashedName: part-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
We have to fix an error. The `currentWeapon` variable is the array index. Array indexing starts at zero. The index of the last element in an array is one less than the length of the array. In the `if` condition you are working on, change `weapons.length` to `weapons.length - 1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
buyWeapon
|
||||
.toString()
|
||||
.match(
|
||||
/if\s*\(\s*currentWeapon\s*\<\s*weapons\.length\s*\-\s*1\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,360 +0,0 @@
|
||||
---
|
||||
id: 5d708c9a066dac7142a6d79d
|
||||
title: Part 75
|
||||
challengeType: 0
|
||||
dashedName: part-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add an `else` statement on the end of the outer `if` statement. Inside the `else` statement, set `text.innerText` to "You already have the most powerful weapon!".
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
buyWeapon
|
||||
.toString()
|
||||
.match(
|
||||
/\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}\s*\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You already have the most powerful weapon\![\'\"\`]\;?\s*\}/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,364 +0,0 @@
|
||||
---
|
||||
id: 5d708dd7066dac7142a6d79e
|
||||
title: Part 76
|
||||
challengeType: 0
|
||||
dashedName: part-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Once a player has the most powerful weapon, we'll give them the ability to sell their older weapons back. In the else statement, set `button2.innerText` to equal "Sell weapon for 15 gold". Also, set `button2.onclick` to the function name `sellWeapon`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
buyWeapon
|
||||
.toString()
|
||||
.match(
|
||||
/else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You already have the most powerful weapon\![\'\"\`]\;?\s*button2\.innerText\s*\=\s*[\'\"\`]Sell weapon for 15 gold\.?[\'\"\`]\;?\s*button2\.onclick\s*\=\s*sellWeapon\;?\s*\}/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,363 +0,0 @@
|
||||
---
|
||||
id: 5d708fae066dac7142a6d79f
|
||||
title: Part 77
|
||||
challengeType: 0
|
||||
dashedName: part-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After the `buyWeapon` function, create an empty function called `sellWeapon`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(typeof sellWeapon === 'function');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,373 +0,0 @@
|
||||
---
|
||||
id: 5d709664066dac7142a6d7a0
|
||||
title: Part 78
|
||||
challengeType: 0
|
||||
dashedName: part-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Players should not be able to sell their only weapon. Inside the `sellWeapon` function, add an `if` statement with a condition that checks if the length of the `inventory` array is greater than one.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
sellWeapon
|
||||
.toString()
|
||||
.match(/if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*\}/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,386 +0,0 @@
|
||||
---
|
||||
id: 5d709bbc066dac7142a6d7a2
|
||||
title: Part 79
|
||||
challengeType: 0
|
||||
dashedName: part-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `if` statement, set `gold` equal to 15 more than its current value. Also, update `goldText.innerText` to the new value.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
gold = 50;
|
||||
inventory = ['stick'];
|
||||
sellWeapon();
|
||||
return gold === 50 && goldText.innerText === '50';
|
||||
})() &&
|
||||
(() => {
|
||||
gold = 50;
|
||||
inventory = ['stick', 'dagger'];
|
||||
sellWeapon();
|
||||
return gold === 65 && goldText.innerText === '65';
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,379 +0,0 @@
|
||||
---
|
||||
id: 5d71b58b848f6914ab89897d
|
||||
title: Part 80
|
||||
challengeType: 0
|
||||
dashedName: part-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use the `let` keyword to create a variable named `currentWeapon`. Don't set it equal to anything yet. Notice that we already have a `currentWeapon` variable from earlier. Since the `let` keyword is used instead of `var`, this new version of `currentWeapon` is scoped only to this `if` statement. At the close of the `if` statement, the old version of `currentWeapon` will be used again.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*(.\s*)*let\s*currentWeapon\;?/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,388 +0,0 @@
|
||||
---
|
||||
id: 5d71bdca848f6914ab89897e
|
||||
title: Part 81
|
||||
challengeType: 0
|
||||
dashedName: part-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use the `shift()` method on the `inventory` array to remove the first element and return that removed element. Set `currentWeapon` to equal returned element.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```js
|
||||
let arr = ["one", "two", "three"];
|
||||
let firstElement = arr.shift();
|
||||
// arr now equals ["two", "three"] and firstElement now equals "one"
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*(.\s*)*let\s*currentWeapon\s*\=\s*inventory\.shift\(\s*\)\;?/
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,380 +0,0 @@
|
||||
---
|
||||
id: 5d71bfdf848f6914ab89897f
|
||||
title: Part 82
|
||||
challengeType: 0
|
||||
dashedName: part-82
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After the line that creates the `currentWeapon` variable, set `text.innerText` to equal `"You sold a " + currentWeapon + "."`
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
(inventory = ['potato', 'carrot']),
|
||||
sellWeapon(),
|
||||
assert(text.innerText === 'You sold a potato.' && inventory[0] === 'carrot');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,384 +0,0 @@
|
||||
---
|
||||
id: 5d71c20f848f6914ab898980
|
||||
title: Part 83
|
||||
challengeType: 0
|
||||
dashedName: part-83
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now use the `+=` operator to add to `text.innerText`. Add the string " In your inventory you have: " (with spaces at the beginning and end). Then add the `inventory` variable to the end of the string.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
(inventory = ['potato', 'carrot']),
|
||||
sellWeapon(),
|
||||
assert(
|
||||
text.innerText === 'You sold a potato. In your inventory you have: carrot'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,387 +0,0 @@
|
||||
---
|
||||
id: 5d71c80e848f6914ab898981
|
||||
title: Part 84
|
||||
challengeType: 0
|
||||
dashedName: part-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add code so that if the length of the inventory is NOT more than one, then a text message appears that says "Don't sell your only weapon!".
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
(inventory = ['potato']),
|
||||
sellWeapon(),
|
||||
assert(
|
||||
inventory[0] === 'potato' &&
|
||||
text.innerText === "Don't sell your only weapon!"
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,408 +0,0 @@
|
||||
---
|
||||
id: 5d71cab4f27e5122af9f1178
|
||||
title: Part 85
|
||||
challengeType: 0
|
||||
dashedName: part-85
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now we'll start working on fighting monsters. Organize your code by moving the `fightDragon` function to the bottom of the code near the other fight functions.
|
||||
|
||||
Below where the `weapons` array is defined, define a `monsters` array. Set the contents of the `monsters` array to: `{ name: "slime", level: 2, health: 15 }, {name: "fanged beast", level: 8, health: 60 }, { name: "dragon", level: 20, health: 300 }`. Space out the code similar to the `weapons` array so that it is easier to read.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(monsters, [
|
||||
{ name: 'slime', level: 2, health: 15 },
|
||||
{ name: 'fanged beast', level: 8, health: 60 },
|
||||
{ name: 'dragon', level: 20, health: 300 }
|
||||
]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,423 +0,0 @@
|
||||
---
|
||||
id: 5d71ea30f27e5122af9f1179
|
||||
title: Part 86
|
||||
challengeType: 0
|
||||
dashedName: part-86
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Fighting each type of monster will be very similar so all three fighting functions will call a function named `goFight`. At the end of the code, add an empty function named `goFight`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(typeof goFight === 'function');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,430 +0,0 @@
|
||||
---
|
||||
id: 5d71eb0bf27e5122af9f117a
|
||||
title: Part 87
|
||||
challengeType: 0
|
||||
dashedName: part-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `fightSlime` function, set `fighting` to equal 0 (which is the index of the slime in the `monsters` array). On the next line, call the `goFight` function.
|
||||
|
||||
As a reminder, here is how you would call a function named `myFunc`: `myFunc();`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(fightSlime.toString().match(/fighting\s*\=\s*0\;?\s*goFight\(\s*\)\;?/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,436 +0,0 @@
|
||||
---
|
||||
id: 5d71f787e39bedcf8f0998ff
|
||||
title: Part 88
|
||||
challengeType: 0
|
||||
dashedName: part-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Write the code for the `fightBeast` and `fightDragon` functions, using the `fightSlime` function as an example. Make sure to delete the line that is already in the `fightDragon` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
fightBeast.toString().match(/fighting\s*\=\s*1\;?\s*goFight\(\s*\)\;?/) &&
|
||||
fightDragon.toString().match(/fighting\s*\=\s*2\;?\s*goFight\(\s*\)\;?/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,452 +0,0 @@
|
||||
---
|
||||
id: 5d71ed88f27e5122af9f117b
|
||||
title: Part 89
|
||||
challengeType: 0
|
||||
dashedName: part-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a new object in the `locations` array with all the same properties as the other objects in the array. Set `name` to "fight". Set `"button text"` to `["Attack", "Dodge", "Run"]`. Set `"button functions"` to `[attack, dodge, goTown]`. And set `text` to "You are fighting a monster.".
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(locations[3], {
|
||||
name: 'fight',
|
||||
'button text': ['Attack', 'Dodge', 'Run'],
|
||||
'button functions': [attack, dodge, goTown],
|
||||
text: 'You are fighting a monster.'
|
||||
});
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
<script>
|
||||
// initialize for test
|
||||
const attack = () => {}
|
||||
const dodge = () => {}
|
||||
</script>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,454 +0,0 @@
|
||||
---
|
||||
id: 5d71f217e39bedcf8f0998fd
|
||||
title: Part 90
|
||||
challengeType: 0
|
||||
dashedName: part-90
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
At the end of the code create empty functions named `attack` and `dodge`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(typeof attack === 'function' && typeof dodge === 'function');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
}
|
||||
|
||||
function attack() {
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,461 +0,0 @@
|
||||
---
|
||||
id: 5d71f669e39bedcf8f0998fe
|
||||
title: Part 91
|
||||
challengeType: 0
|
||||
dashedName: part-91
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the `goFight` function, call the `update` function and pass it `locations[3]`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(goFight.toString().match(/update\(\s*locations\[\s*3\s*\]\s*\)\;?/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
}
|
||||
|
||||
function attack() {
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
}
|
||||
|
||||
function attack() {
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,476 +0,0 @@
|
||||
---
|
||||
id: 5d72027ce39bedcf8f099900
|
||||
title: Part 92
|
||||
challengeType: 0
|
||||
dashedName: part-92
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next in the `goFight` function, set `monsterHealth` to equal the health of the current monster. You can get the health of the current monster with `monsters[fighting].health`. Try to understand that line before continuing.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
fightSlime();
|
||||
return monsterHealth === 15;
|
||||
})() &&
|
||||
(() => {
|
||||
fightBeast();
|
||||
return monsterHealth === 60;
|
||||
})() &&
|
||||
(() => {
|
||||
fightDragon();
|
||||
return monsterHealth === 300;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
}
|
||||
|
||||
function attack() {
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,471 +0,0 @@
|
||||
---
|
||||
id: 5d721925e39bedcf8f099901
|
||||
title: Part 93
|
||||
challengeType: 0
|
||||
dashedName: part-93
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The HTML that shows the monster stats that has been hidden using CSS. Display the `monsterStats` HTML element by updating its CSS `display` property to equal `block`.
|
||||
|
||||
Here is an example of updating the `display` property of an element named `myElement`: `myElement.style.display = "block";`
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
goFight
|
||||
.toString()
|
||||
.match(/^\s*monsterStats\.style\.display\s*\=\s*[\'\"\`]block[\'\"\`]\;?/m)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
}
|
||||
|
||||
function attack() {
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,483 +0,0 @@
|
||||
---
|
||||
id: 5d7dea508360d21c6826a9af
|
||||
title: Part 94
|
||||
challengeType: 0
|
||||
dashedName: part-94
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now set the `innerText` property of `monsterNameText` to equal `monsters[fighting].name`. Also, set the `innerText` property of `monsterHealthText` to equal `monsterHealth`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(() => {
|
||||
fightBeast();
|
||||
return (
|
||||
monsterNameText.innerText === 'fanged beast' &&
|
||||
monsterHealthText.innerText === '60'
|
||||
);
|
||||
})() &&
|
||||
(() => {
|
||||
fightDragon();
|
||||
return (
|
||||
monsterNameText.innerText === 'dragon' &&
|
||||
monsterHealthText.innerText === '300'
|
||||
);
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
}
|
||||
|
||||
function attack() {
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,471 +0,0 @@
|
||||
---
|
||||
id: 5d7deecc8360d21c6826a9b0
|
||||
title: Part 95
|
||||
challengeType: 0
|
||||
dashedName: part-95
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
We'll build out the `attack` function now. For the first line in the function, update the text message to say "The \[monster name] attacks." but replace "\[monster name]" with the actual name of the monster. Remember, you can get the monster name with `monsters[fighting].name`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
fightDragon(), attack(), assert(text.innerText === 'The dragon attacks.');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
text.innerText = "The " + monsters[fighting].name + " attacks.";
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,478 +0,0 @@
|
||||
---
|
||||
id: 5d7df0458360d21c6826a9b1
|
||||
title: Part 96
|
||||
challengeType: 0
|
||||
dashedName: part-96
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now use the `+=` operator to append more text to `text.innerText`. Add the text " You attack it with your \[weapon name]." but replace "\[weapon name]" with the actual weapon name. Remember, you can get the weapon name with `weapons[currentWeapon].name`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
(currentWeapon = 3),
|
||||
fightDragon(),
|
||||
attack(),
|
||||
assert(
|
||||
text.innerText === 'The dragon attacks. You attack it with your sword.'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
text.innerText = "The " + monsters[fighting].name + " attacks.";
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
text.innerText = "The " + monsters[fighting].name + " attacks.";
|
||||
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,475 +0,0 @@
|
||||
---
|
||||
id: 5d7df2a68360d21c6826a9b2
|
||||
title: Part 97
|
||||
challengeType: 0
|
||||
dashedName: part-97
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, set `health` to equal `health` minus the monster's level. You can get the monster's level with `monsters[fighting].level`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
(health = 50), fightDragon(), attack(), assert(health === 30);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
text.innerText = "The " + monsters[fighting].name + " attacks.";
|
||||
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
text.innerText = "The " + monsters[fighting].name + " attacks.";
|
||||
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
|
||||
health -= monsters[fighting].level;
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,477 +0,0 @@
|
||||
---
|
||||
id: 5d7df41a8360d21c6826a9b3
|
||||
title: Part 98
|
||||
challengeType: 0
|
||||
dashedName: part-98
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set `monsterHealth` to `monsterHealth` minus the power of the current weapon (`weapons[currentWeapon].power`).
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
fightDragon(), (monsterHealth = 20), attack(), assert(monsterHealth === 15);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
text.innerText = "The " + monsters[fighting].name + " attacks.";
|
||||
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
|
||||
health -= monsters[fighting].level;
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
text.innerText = "The " + monsters[fighting].name + " attacks.";
|
||||
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
|
||||
health -= monsters[fighting].level;
|
||||
monsterHealth -= weapons[currentWeapon].power;
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,484 +0,0 @@
|
||||
---
|
||||
id: 5d7df75a8360d21c6826a9b4
|
||||
title: Part 99
|
||||
challengeType: 0
|
||||
dashedName: part-99
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
At the end of that line, add a random number between one and the value of `xp`. Here is the formula to get a random number between 1 and 5: `Math.floor(Math.random() * 5) + 1`.
|
||||
|
||||
`Math.random()` returns a decimal or floating point number between 0 and 1, and `Math.floor()` rounds a given number down to the nearest integer.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
(xp = 1),
|
||||
fightDragon(),
|
||||
(monsterHealth = 20),
|
||||
attack(),
|
||||
assert(monsterHealth === 14);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
text.innerText = "The " + monsters[fighting].name + " attacks.";
|
||||
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
|
||||
health -= monsters[fighting].level;
|
||||
monsterHealth -= weapons[currentWeapon].power;
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
text.innerText = "The " + monsters[fighting].name + " attacks.";
|
||||
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
|
||||
health -= monsters[fighting].level;
|
||||
monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -1,485 +0,0 @@
|
||||
---
|
||||
id: 5d7dfb908360d21c6826a9b5
|
||||
title: Part 100
|
||||
challengeType: 0
|
||||
dashedName: part-100
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Update `healthText.innerText` and `monsterHealthText.innerText` to equal `health` and `monsterHealth`.
|
||||
|
||||
# --hints--
|
||||
|
||||
See description above for instructions.
|
||||
|
||||
```js
|
||||
(xp = 1),
|
||||
(health = 50),
|
||||
fightDragon(),
|
||||
(monsterHealth = 20),
|
||||
attack(),
|
||||
assert(monsterHealthText.innerText === '14' && healthText.innerText === '30');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --before-user-code--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<style>
|
||||
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 {
|
||||
border: 1px black solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#stats {
|
||||
border: 1px black solid;
|
||||
color: black;
|
||||
padding: 5px;
|
||||
}
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px black solid;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
```
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
text.innerText = "The " + monsters[fighting].name + " attacks.";
|
||||
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
|
||||
health -= monsters[fighting].level;
|
||||
monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
const button1 = document.querySelector('#button1');
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
const text = document.querySelector("#text");
|
||||
const xpText = document.querySelector("#xpText");
|
||||
const healthText = document.querySelector("#healthText");
|
||||
const goldText = document.querySelector("#goldText");
|
||||
const monsterStats = document.querySelector("#monsterStats");
|
||||
const monsterNameText = document.querySelector("#monsterName");
|
||||
const monsterHealthText = document.querySelector("#monsterHealth");
|
||||
|
||||
const weapons = [
|
||||
{
|
||||
name: "stick",
|
||||
power: 5
|
||||
},
|
||||
{
|
||||
name: "dagger",
|
||||
power: 30
|
||||
},
|
||||
{
|
||||
name: "claw hammer",
|
||||
power: 50
|
||||
},
|
||||
{
|
||||
name: "sword",
|
||||
power: 100
|
||||
}
|
||||
];
|
||||
|
||||
const monsters = [
|
||||
{
|
||||
name: "slime",
|
||||
level: 2,
|
||||
health: 15
|
||||
},
|
||||
{
|
||||
name: "fanged beast",
|
||||
level: 8,
|
||||
health: 60
|
||||
},
|
||||
{
|
||||
name: "dragon",
|
||||
level: 20,
|
||||
health: 300
|
||||
}
|
||||
];
|
||||
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon],
|
||||
text: "You are in the town square. You see a sign that says \"Store.\""
|
||||
},
|
||||
{
|
||||
name: "store",
|
||||
"button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
|
||||
"button functions": [buyHealth, buyWeapon, goTown],
|
||||
text: "You enter the store."
|
||||
},
|
||||
{
|
||||
name: "cave",
|
||||
"button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
|
||||
"button functions": [fightSlime, fightBeast, goTown],
|
||||
text: "You enter the cave. You see some monsters."
|
||||
},
|
||||
{
|
||||
name: "fight",
|
||||
"button text": ["Attack", "Dodge", "Run"],
|
||||
"button functions": [attack, dodge, goTown],
|
||||
text: "You are fighting a monster."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = location["button functions"][0];
|
||||
button2.onclick = location["button functions"][1];
|
||||
button3.onclick = location["button functions"][2];
|
||||
text.innerText = location.text;
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
update(locations[1]);
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
update(locations[2]);
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy health.";
|
||||
}
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length - 1) {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "You do not have enough gold to buy a weapon.";
|
||||
}
|
||||
} else {
|
||||
text.innerText = "You already have the most powerful weapon!";
|
||||
button2.innerText = "Sell weapon for 15 gold";
|
||||
button2.onclick = sellWeapon;
|
||||
}
|
||||
}
|
||||
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
let currentWeapon = inventory.shift();
|
||||
text.innerText = "You sold a " + currentWeapon + ".";
|
||||
text.innerText += " In your inventory you have: " + inventory;
|
||||
} else {
|
||||
text.innerText = "Don't sell your only weapon!";
|
||||
}
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
fighting = 0;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
fighting = 1;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
fighting = 2;
|
||||
goFight();
|
||||
}
|
||||
|
||||
function goFight() {
|
||||
update(locations[3]);
|
||||
monsterHealth = monsters[fighting].health;
|
||||
monsterStats.style.display = "block";
|
||||
monsterNameText.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function attack() {
|
||||
text.innerText = "The " + monsters[fighting].name + " attacks.";
|
||||
text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
|
||||
health -= monsters[fighting].level;
|
||||
monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
|
||||
healthText.innerText = health;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user