mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-01-08 21:02:25 -05:00
chore(i18n,learn): processed translations (#47851)
This commit is contained in:
camperbot
@@ -7,7 +7,7 @@ dashedName: step-1
|
||||
|
||||
# --description--
|
||||
|
||||
JavaScript – це потужна мова, яка дозволяє створювати інтерактивні вебсайти. Для початку створіть стандартний шаблонний код HTML з `DOCTYPE`, `html`, `head` та `body`. Додайте елемент `title` та `link` до своєї таблиці стилів та теґ `meta` до `charset`. Потім створіть елемент `div`, що має id зі значенням `game`, в межах `body`. Для елемента `title` використайте текст `RPG - Dragon Repeller`.
|
||||
JavaScript – це потужна мова, яка дозволяє створювати інтерактивні вебсайти. Для початку створіть стандартний шаблонний код HTML з `DOCTYPE`, `html`, `head` та `body`. Додайте елемент `title` та `link` до своєї таблиці стилів та тег `meta` до `charset`. Потім створіть елемент `div`, що має id зі значенням `game`, в межах `body`. Для елемента `title` використайте текст `RPG - Dragon Repeller`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -35,13 +35,13 @@ assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
Ваш елемент `html` повинен мати початковий теґ. Не забудьте атрибут `lang`.
|
||||
Ваш елемент `html` повинен мати початковий тег. Не забудьте атрибут `lang`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
Ваш елемент `html` повинен мати кінцевий теґ.
|
||||
Ваш елемент `html` повинен мати кінцевий тег.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
@@ -53,25 +53,25 @@ assert(code.match(/<\/html\s*>/));
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
Ви повинні мати початковий теґ `head`.
|
||||
Ви повинні мати початковий тег `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
Ви повинні мати кінцевий теґ `head`.
|
||||
Ви повинні мати кінцевий тег `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
Ви повинні мати початковий теґ `body`.
|
||||
Ви повинні мати початковий тег `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
Ви повинні мати кінцевий теґ `body`.
|
||||
Ви повинні мати кінцевий тег `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 62a115879a6d51422652cbfc
|
||||
title: Крок 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Створіть чотири елементи `div` у своєму елементі `#game`. Надайте їм наступні значення `id`, у такому порядку: `stats`, `controls`, `monsterStats` та `text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити чотири нові елементи `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div')?.length, 5);
|
||||
```
|
||||
|
||||
Одному з нових елементів `div` надайте `id` зі значенням `stats`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div#stats'));
|
||||
```
|
||||
|
||||
Одному з нових елементів `div` надайте `id` зі значенням `controls`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div#controls'));
|
||||
```
|
||||
|
||||
Одному з нових елементів `div` надайте `id` зі значенням `monsterStats`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div#monsterStats'));
|
||||
```
|
||||
|
||||
Одному з нових елементів `div` надайте `id` зі значенням `text`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div#text'));
|
||||
```
|
||||
|
||||
Ви повинні розмістити нові елементи `div` в правильному порядку.
|
||||
|
||||
```js
|
||||
function __t(a, b) {
|
||||
return document.querySelector(a)?.nextElementSibling?.getAttribute('id') === b;
|
||||
}
|
||||
assert(__t('div#stats','controls') && __t('div#controls','monsterStats') && __t('div#monsterStats','text'));
|
||||
```
|
||||
|
||||
Ви повинні розмістити нові елементи `div` в межах елемента `#game`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('#game')?.children?.length, 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<div id="game">
|
||||
</div>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 62a1166ed9a56d439c0770e7
|
||||
title: Крок 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Створіть три елементи `span` у своєму елементі `#stats`. Надайте кожному з них клас `stat`. Потім надайте першому текст `XP: 0`, другому – `Health: 100`, а третьому – `Gold: 50`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати три елементи `span` всередині елемента `#stats`.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll('#stats > span');
|
||||
assert.equal(spans?.length, 3);
|
||||
```
|
||||
|
||||
Ви повинні надати трьом новим елементам `span` клас зі значенням `stat`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('#stats > .stat')?.length, 3);
|
||||
```
|
||||
|
||||
Ваш перший елемент `.stat` повинен мати наданий текст `XP: 0`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#stats > .stat')?.[0]?.innerText === 'XP: 0');
|
||||
```
|
||||
|
||||
Ваш другий елемент `.stat` повинен мати наданий текст `Health: 100`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#stats > .stat')?.[1]?.innerText === 'Health: 100');
|
||||
```
|
||||
|
||||
Ваш третій елемент `.stat` повинен мати наданий текст `Gold: 50`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#stats > .stat')?.[2]?.innerText === 'Gold: 50');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
|
||||
</div>
|
||||
<div id="controls"></div>
|
||||
<div id="monsterStats"></div>
|
||||
<div id="text"></div>
|
||||
</div>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 62a24068d60b671847d1d4e2
|
||||
title: Крок 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Тепер нам потрібна швидка стилізація. Спочатку надайте `body` властивість `background-color` зі значенням `darkblue`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати селектор `body`.
|
||||
|
||||
```js
|
||||
const body = new __helpers.CSSHelp(document).getStyle('body');
|
||||
assert.exists(body);
|
||||
```
|
||||
|
||||
Ваш селектор `body` повинен мати властивість `background-color` зі значенням `darkblue`.
|
||||
|
||||
```js
|
||||
const background = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
|
||||
assert.equal(background, 'darkblue');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 62a24128d5e8af1b47ad1aab
|
||||
title: Крок 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Надайте своїм елементам `#controls` та `#stats` властивості `border` зі значенням `1px solid black`, колір тексту зі значенням `black` та відступ зі значенням `5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати селектор `#controls, #stats`.
|
||||
|
||||
```js
|
||||
const selector = new __helpers.CSSHelp(document).getStyle('#controls, #stats');
|
||||
assert.exists(selector);
|
||||
```
|
||||
|
||||
Ваш селектор `#controls, #stats` повинен мати `border` зі значенням `1px solid black`.
|
||||
|
||||
```js
|
||||
const border = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('border');
|
||||
assert.equal(border, '1px solid black');
|
||||
```
|
||||
|
||||
Ваш селектор `#controls, #stats` повинен мати `color` зі значенням `black`.
|
||||
|
||||
```js
|
||||
const color = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('color');
|
||||
assert.equal(color, 'black');
|
||||
```
|
||||
|
||||
Ваш селектор `#controls, #stats` повинен мати відступ зі значенням `5px`.
|
||||
|
||||
```js
|
||||
const padding = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('padding');
|
||||
assert.equal(padding, '5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 62a24190868ca51c0b6e83c7
|
||||
title: Крок 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Поки приховайте свій елемент `#monsterStats`. Не змінюйте жодного іншого стилю.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати селектор `#monsterStats`.
|
||||
|
||||
```js
|
||||
const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats');
|
||||
assert.exists(monsterStats);
|
||||
```
|
||||
|
||||
Ваш селектор `#monsterStats` повинен мати властивість `display` зі значенням `none`.
|
||||
|
||||
```js
|
||||
const display = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('display');
|
||||
assert.equal(display, 'none');
|
||||
```
|
||||
|
||||
Ваш селектор `#monsterStats` повинен мати `border` зі значенням `1px solid black`.
|
||||
|
||||
```js
|
||||
const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border');
|
||||
assert.equal(border, '1px solid black');
|
||||
```
|
||||
|
||||
Ваш селектор `#monsterStats` повинен мати відступ зі значенням `5px`.
|
||||
|
||||
```js
|
||||
const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding');
|
||||
assert.equal(padding, '5px');
|
||||
```
|
||||
|
||||
Ваш селектор `#monsterStats` повинен мати `color` зі значенням `white`.
|
||||
|
||||
```js
|
||||
const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color');
|
||||
assert.equal(color, 'white');
|
||||
```
|
||||
|
||||
Ваш селектор `#monsterStats` повинен мати `background-color` зі значенням `red`.
|
||||
|
||||
```js
|
||||
const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color');
|
||||
assert.equal(background, 'red');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#monsterStats {
|
||||
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 62a2509ba163e020bb9d84ea
|
||||
title: Крок 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Тепер ви можете почати писати свій JavaScript. Розпочніть зі створення елемента `script`. Цей елемент використовують, щоб завантажити JavaScript у файл HTML. Ви повинні використати початковий тег `<script>` та кінцевий тег `</script>`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати елемент `script`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('script').length, 2);
|
||||
```
|
||||
|
||||
Ваш елемент `script` повинен мати початковий теґ.
|
||||
|
||||
```js
|
||||
assert.match(code, /<script\s*>/i);
|
||||
```
|
||||
|
||||
Ваш елемент `script` повинен мати кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/script\s*>/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,109 @@
|
||||
---
|
||||
id: 62a257659d0d1e2456f24ba2
|
||||
title: Крок 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Перш ніж почати писати код проєкту, вам потрібно перемістити його у власний файл, щоб все було організовано. Видаліть свій рядок `console.log("Hello World");`. Потім надайте вашому зараз порожньому елементу `script` атрибут `src` зі значенням `./script.js`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Вам не потрібен рядок `console.log("Hello World");` у своєму коді.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /console\.log\("Hello World"\);/);
|
||||
```
|
||||
|
||||
Ваш елемент `script` повинен мати атрибут `src` зі значенням `./script.js`.
|
||||
|
||||
```js
|
||||
const script = document.querySelector("script[data-src$='script.js']");
|
||||
assert.exists(script);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
--fcc-editable-region--
|
||||
<script>
|
||||
console.log("Hello World");
|
||||
</script>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
@@ -17,7 +17,7 @@ var camperbot = "Bot";
|
||||
|
||||
# --hints--
|
||||
|
||||
`xp` повинне мати значення `0`.
|
||||
`xp` повинна мати значення `0`.
|
||||
|
||||
```js
|
||||
assert.equal(xp, 0);
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 62a3b5843544ce3a77459c27
|
||||
title: Крок 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Поки гравець повинен починати тільки з `stick`. Змініть масив `inventory`, щоб він мав `stick` як єдине значення.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваша змінна `inventory` все ще повинна бути масивом.
|
||||
|
||||
```js
|
||||
assert.isArray(inventory);
|
||||
```
|
||||
|
||||
Ваша змінна `inventory` повинна мати лише одне значення.
|
||||
|
||||
```js
|
||||
assert.lengthOf(inventory, 1);
|
||||
```
|
||||
|
||||
Ваша змінна `inventory` повинна містити рядок `stick`.
|
||||
|
||||
```js
|
||||
assert.include(inventory, "stick");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
--fcc-editable-region--
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick", "dagger", "sword"];
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 62a3bec30ea7f941412512dc
|
||||
title: Крок 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Так само як і з кнопками, створіть змінні для наступних `id` та використайте `querySelector()`, щоб надати їм елемент як значення:
|
||||
|
||||
`text`, `xpText`, `healthText`, `goldText`, `monsterStats` та `monsterName`.
|
||||
|
||||
Не забудьте оголосити їх за допомогою ключового слова `const` та назвіть змінні відповідно до `id`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні оголосити змінну `text` за допомогою `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const text/);
|
||||
```
|
||||
|
||||
Ваша змінна `text` повинна мати значення вашого елемента `#text`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(text, document.querySelector('#text'));
|
||||
```
|
||||
|
||||
Ви повинні оголосити змінну `xpText` за допомогою `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const xpText/);
|
||||
```
|
||||
|
||||
Ваша змінна `xpText` повинна мати значення вашого елемента `#xpText`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(xpText, document.querySelector('#xpText'));
|
||||
```
|
||||
|
||||
Ви повинні оголосити змінну `healthText` за допомогою `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const healthText/);
|
||||
```
|
||||
|
||||
Ваша змінна `healthText` повинна мати значення вашого елемента `#healthText`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(healthText, document.querySelector('#healthText'));
|
||||
```
|
||||
|
||||
Ви повинні оголосити змінну `goldText` за допомогою `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const goldText/);
|
||||
```
|
||||
|
||||
Ваша змінна `goldText` повинна мати значення вашого елемента `#goldText`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(goldText, document.querySelector('#goldText'));
|
||||
```
|
||||
|
||||
Ви повинні оголосити змінну `monsterStats` за допомогою `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const monsterStats/);
|
||||
```
|
||||
|
||||
Ваша змінна `monsterStats` повинна мати значення вашого елемента `#monsterStats`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(monsterStats, document.querySelector('#monsterStats'));
|
||||
```
|
||||
|
||||
Ви повинні оголосити змінну `monsterName` за допомогою `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const monsterName/);
|
||||
```
|
||||
|
||||
Ваша змінна `monsterName` повинна мати значення вашого елемента `#monsterName`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(monsterName, document.querySelector('#monsterName'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</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 src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick"];
|
||||
|
||||
--fcc-editable-region--
|
||||
const button1 = document.querySelector("#button1");
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 62a3c0ab883fd9435cd5c518
|
||||
title: Крок 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Коментарі дозволяють додавати примітки до коду. В JavaScript однорядкові коментарі починаються з `//`, а багаторядкові починаються з `/*` та `*/`. Ось приклади однорядкового та багаторядкового коментарів «Hello World»:
|
||||
|
||||
```js
|
||||
// hello world
|
||||
/*
|
||||
hello world
|
||||
*/
|
||||
```
|
||||
|
||||
Додайте однорядковий коментар `initialize buttons`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні використати символ `//`, щоб розпочати однорядковий коментар.
|
||||
|
||||
```js
|
||||
assert.match(code, /\/\//);
|
||||
```
|
||||
|
||||
Ваш коментар повинен мати текст `initialize buttons`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\/\/\s*initialize buttons/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</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 src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
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 monsterName = document.querySelector("#monsterName");
|
||||
const monsterHealthText =document.querySelector("#monsterHealth");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,348 @@
|
||||
---
|
||||
id: 62a94114ce0b8918b487390f
|
||||
title: Крок 141
|
||||
challengeType: 0
|
||||
dashedName: step-141
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додайте ще один об’єкт до масиву `locations`. Усе має бути таким самим, як і об’єкт `lose`, за винятком того, що `name` повинен бути `win`, а `text` повинен бути `You defeat the dragon! YOU WIN THE GAME! 🎉`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати сім значень у масиві `locations`.
|
||||
|
||||
```js
|
||||
assert.lengthOf(locations, 7);
|
||||
```
|
||||
|
||||
Ваше сьоме значення `locations` повинне бути об’єктом.
|
||||
|
||||
```js
|
||||
assert.isObject(locations[6]);
|
||||
```
|
||||
|
||||
Ваше сьоме значення `locations` повинне мати властивість `name` зі значенням `win`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[6].name, 'win');
|
||||
```
|
||||
|
||||
Ваше сьоме значення `locations` повинне мати властивість `button text` зі значенням масиву з трьома рядками `REPLAY?`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(locations[6]["button text"], ['REPLAY?', 'REPLAY?', 'REPLAY?']);
|
||||
```
|
||||
|
||||
Ваше сьоме значення `locations` повинне мати властивість `button functions` зі значенням масиву з трьома змінними `restart`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(locations[6]["button functions"], [restart, restart, restart]);
|
||||
```
|
||||
|
||||
Ваше сьоме значення `locations` повинне мати властивість `text` зі значенням `You defeat the dragon! YOU WIN THE GAME! 🎉`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[6].text, 'You defeat the dragon! YOU WIN THE GAME! 🎉');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</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 src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
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 monsterName = 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."
|
||||
},
|
||||
{
|
||||
name: "kill monster",
|
||||
"button text": ["Go to town square", "Go to town square", "Go to town square"],
|
||||
"button functions": [goTown, goTown, goTown],
|
||||
text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
|
||||
},
|
||||
--fcc-editable-region--
|
||||
{
|
||||
name: "lose",
|
||||
"button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
|
||||
"button functions": [restart, restart, restart],
|
||||
text: "You die. ☠️"
|
||||
}
|
||||
--fcc-editable-region--
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
monsterStats.style.display = "none";
|
||||
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";
|
||||
monsterName.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;
|
||||
if (health <= 0) {
|
||||
lose();
|
||||
} else if (monsterHealth <= 0) {
|
||||
fighting === 2 ? winGame() : defeatMonster();
|
||||
}
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
text.innerText = "You dodge the attack from the " + monsters[fighting].name;
|
||||
}
|
||||
|
||||
function defeatMonster() {
|
||||
gold += Math.floor(monsters[fighting].level * 6.7);
|
||||
xp += monsters[fighting].level;
|
||||
goldText.innerText = gold;
|
||||
xpText.innerText = xp;
|
||||
update(locations[4]);
|
||||
}
|
||||
|
||||
function lose() {
|
||||
update(locations[5]);
|
||||
}
|
||||
|
||||
function winGame() {
|
||||
update(locations[6]);
|
||||
}
|
||||
|
||||
function restart() {
|
||||
xp = 0;
|
||||
health = 100;
|
||||
gold = 50;
|
||||
currentWeapon = 0;
|
||||
inventory = ["stick"];
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
xpText.innerText = xp;
|
||||
goTown();
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,326 @@
|
||||
---
|
||||
id: 62aa1cea594f152ba626b872
|
||||
title: Крок 142
|
||||
challengeType: 0
|
||||
dashedName: step-142
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете завершити свою гру зараз, але ви також можете зробити її цікавішою.
|
||||
|
||||
Всередині функції `attack` змініть рядок `health -= monsters[fighting].level;` на `health -= getMonsterAttackValue(monsters[fighting].level);`. Це встановить `health` на `health` мінус значення, яке повертає функція `getMonsterAttackValue`, та передає `level` монстра як аргумент.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні оновити свій рядок `health` на `health -= getMonsterAttackValue(monsters[fighting].level);`.
|
||||
|
||||
```js
|
||||
assert.match(attack.toString(), /health\s*-=\s*getMonsterAttackValue\(monsters\[fighting\].level\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</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 src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
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 monsterName = 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."
|
||||
},
|
||||
{
|
||||
name: "kill monster",
|
||||
"button text": ["Go to town square", "Go to town square", "Go to town square"],
|
||||
"button functions": [goTown, goTown, goTown],
|
||||
text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
|
||||
},
|
||||
{
|
||||
name: "lose",
|
||||
"button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
|
||||
"button functions": [restart, restart, restart],
|
||||
text: "You die. ☠️"
|
||||
},
|
||||
{
|
||||
name: "win",
|
||||
"button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
|
||||
"button functions": [restart, restart, restart],
|
||||
text: "You defeat the dragon! YOU WIN THE GAME! 🎉"
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
monsterStats.style.display = "none";
|
||||
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";
|
||||
monsterName.innerText = monsters[fighting].name;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
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;
|
||||
if (health <= 0) {
|
||||
lose();
|
||||
} else if (monsterHealth <= 0) {
|
||||
fighting === 2 ? winGame() : defeatMonster();
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function dodge() {
|
||||
text.innerText = "You dodge the attack from the " + monsters[fighting].name;
|
||||
}
|
||||
|
||||
function defeatMonster() {
|
||||
gold += Math.floor(monsters[fighting].level * 6.7);
|
||||
xp += monsters[fighting].level;
|
||||
goldText.innerText = gold;
|
||||
xpText.innerText = xp;
|
||||
update(locations[4]);
|
||||
}
|
||||
|
||||
function lose() {
|
||||
update(locations[5]);
|
||||
}
|
||||
|
||||
function winGame() {
|
||||
update(locations[6]);
|
||||
}
|
||||
|
||||
function restart() {
|
||||
xp = 0;
|
||||
health = 100;
|
||||
gold = 50;
|
||||
currentWeapon = 0;
|
||||
inventory = ["stick"];
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
xpText.innerText = xp;
|
||||
goTown();
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,384 @@
|
||||
---
|
||||
id: 62aa258da314ef42ba0a1858
|
||||
title: Крок 159
|
||||
challengeType: 0
|
||||
dashedName: step-159
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Створіть дві нові функції під назвою `pickTwo` та `pickEight`.
|
||||
|
||||
Всередині кожної з них викличте функцію `pick()` та передайте `2` або `8` як аргумент, залежно від назви функції.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні використати ключове слово `function`, щоб оголосити `pickTwo`.
|
||||
|
||||
```js
|
||||
assert.match(code, /function\s+pickTwo\s*/);
|
||||
```
|
||||
|
||||
Ви повинні використати ключове слово `function`, щоб оголосити `pickEight`.
|
||||
|
||||
```js
|
||||
assert.match(code, /function\s+pickEight\s*/);
|
||||
```
|
||||
|
||||
`pickTwo` повинна викликати функцію `pick`.
|
||||
|
||||
```js
|
||||
assert.match(pickTwo.toString(), /pick\(/);
|
||||
```
|
||||
|
||||
`pickTwo` повинна викликати функцію `pick` з аргументом `2`.
|
||||
|
||||
```js
|
||||
assert.match(pickTwo.toString(), /pick\(\s*2\s*\)/);
|
||||
```
|
||||
|
||||
`pickEight` повинна викликати функцію `pick`.
|
||||
|
||||
```js
|
||||
assert.match(pickEight.toString(), /pick\(/);
|
||||
```
|
||||
|
||||
`pickEight` повинна викликати функцію `pick` з аргументом `8`.
|
||||
|
||||
```js
|
||||
assert.match(pickEight.toString(), /pick\(\s*8\s*\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</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 src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
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 monsterName = 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."
|
||||
},
|
||||
{
|
||||
name: "kill monster",
|
||||
"button text": ["Go to town square", "Go to town square", "Go to town square"],
|
||||
"button functions": [goTown, goTown, goTown],
|
||||
text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
|
||||
},
|
||||
{
|
||||
name: "lose",
|
||||
"button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
|
||||
"button functions": [restart, restart, restart],
|
||||
text: "You die. ☠️"
|
||||
},
|
||||
{
|
||||
name: "win",
|
||||
"button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
|
||||
"button functions": [restart, restart, restart],
|
||||
text: "You defeat the dragon! YOU WIN THE GAME! 🎉"
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
monsterStats.style.display = "none";
|
||||
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";
|
||||
monsterName.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 -= getMonsterAttackValue(monsters[fighting].level);
|
||||
if (isMonsterHit()) {
|
||||
monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
|
||||
} else {
|
||||
text.innerText += " You miss.";
|
||||
}
|
||||
healthText.innerText = health;
|
||||
monsterHealthText.innerText = monsterHealth;
|
||||
if (health <= 0) {
|
||||
lose();
|
||||
} else if (monsterHealth <= 0) {
|
||||
fighting === 2 ? winGame() : defeatMonster();
|
||||
}
|
||||
if (Math.random() <= .1 && inventory.length !== 1) {
|
||||
text.innerText += " Your " + inventory.pop() + " breaks.";
|
||||
currentWeapon--;
|
||||
}
|
||||
}
|
||||
|
||||
function getMonsterAttackValue(level) {
|
||||
const hit = (level * 5) - (Math.floor(Math.random() * xp));
|
||||
console.log(hit);
|
||||
return hit > 0 ? hit : 0;
|
||||
}
|
||||
|
||||
function isMonsterHit() {
|
||||
return Math.random() > .2 || health < 20;
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
text.innerText = "You dodge the attack from the " + monsters[fighting].name;
|
||||
}
|
||||
|
||||
function defeatMonster() {
|
||||
gold += Math.floor(monsters[fighting].level * 6.7);
|
||||
xp += monsters[fighting].level;
|
||||
goldText.innerText = gold;
|
||||
xpText.innerText = xp;
|
||||
update(locations[4]);
|
||||
}
|
||||
|
||||
function lose() {
|
||||
update(locations[5]);
|
||||
}
|
||||
|
||||
function winGame() {
|
||||
update(locations[6]);
|
||||
}
|
||||
|
||||
function restart() {
|
||||
xp = 0;
|
||||
health = 100;
|
||||
gold = 50;
|
||||
currentWeapon = 0;
|
||||
inventory = ["stick"];
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
xpText.innerText = xp;
|
||||
goTown();
|
||||
}
|
||||
|
||||
function easterEgg() {
|
||||
update(locations[7]);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
function pick(guess) {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,339 @@
|
||||
---
|
||||
id: 62ba17beef16c563069a65d8
|
||||
title: Крок 137
|
||||
challengeType: 0
|
||||
dashedName: step-137
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У масив `locations` додайте ще один об’єкт у кінці. Встановіть властивість `name` на `lose`, встановіть `button text` на масив з трьома рядками `REPLAY?`, встановіть `button functions` на масив з трьома змінними `restart` та встановіть `text` на `You die. ☠️`. Ви можете скопіювати цей текст, щоб використати емот.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні мати шість значень у масиві `locations`.
|
||||
|
||||
```js
|
||||
assert.lengthOf(locations, 6);
|
||||
```
|
||||
|
||||
Ваше шосте значення `locations` повинне бути об’єктом.
|
||||
|
||||
```js
|
||||
assert.isObject(locations[5]);
|
||||
```
|
||||
|
||||
Ваше шосте значення `locations` повинне мати властивість `name` зі значенням `lose`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[5].name, 'lose');
|
||||
```
|
||||
|
||||
Ваше шосте значення `locations` повинне мати властивість `button text` зі значенням масиву з трьома рядками `REPLAY?`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(locations[5]["button text"], ['REPLAY?', 'REPLAY?', 'REPLAY?']);
|
||||
```
|
||||
|
||||
Ваше шосте значення `locations` повинне мати властивість `button functions` зі значенням масиву з трьома змінними `restart`.
|
||||
|
||||
```js
|
||||
assert.deepEqual(locations[5]["button functions"], [restart, restart, restart]);
|
||||
```
|
||||
|
||||
Ваше шосте значення `locations` повинне мати властивість `text` зі значенням `You die. ☠️`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[5].text, 'You die. ☠️');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</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 src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#game {
|
||||
max-width: 500px;
|
||||
max-height: 400px;
|
||||
background-color: lightgray;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#controls, #stats {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#monsterStats {
|
||||
display: none;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding-right: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
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 monsterName = 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."
|
||||
},
|
||||
{
|
||||
name: "kill monster",
|
||||
"button text": ["Go to town square", "Go to town square", "Go to town square"],
|
||||
"button functions": [goTown, goTown, goTown],
|
||||
text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
|
||||
},
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
monsterStats.style.display = "none";
|
||||
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";
|
||||
monsterName.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;
|
||||
if (health <= 0) {
|
||||
lose();
|
||||
} else if (monsterHealth <= 0) {
|
||||
defeatMonster();
|
||||
}
|
||||
}
|
||||
|
||||
function dodge() {
|
||||
text.innerText = "You dodge the attack from the " + monsters[fighting].name;
|
||||
}
|
||||
|
||||
function defeatMonster() {
|
||||
gold += Math.floor(monsters[fighting].level * 6.7);
|
||||
xp += monsters[fighting].level;
|
||||
goldText.innerText = gold;
|
||||
xpText.innerText = xp;
|
||||
update(locations[4]);
|
||||
}
|
||||
|
||||
function lose() {
|
||||
update(locations[5]);
|
||||
}
|
||||
|
||||
function restart() {
|
||||
xp = 0;
|
||||
health = 100;
|
||||
gold = 50;
|
||||
currentWeapon = 0;
|
||||
inventory = ["stick"];
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
xpText.innerText = xp;
|
||||
goTown();
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user