JavaScript-algorithms-and-data-structures - Freecodecamp
Lesson 1
Create your standard HTML boilerplate with a DOCTYPE, html, head, and body, then add a meta tag for the charset. Add a title element and use the text RPG - Dragon Repeller for it. Include a link tag for your stylesheet to link the styles.css file.
Finally, create a div element with id set to game within your body.
Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RPG - Dragon Repeller</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game">
<!-- Your game content goes here -->
</div>
</body>
</html>
Lesson 2
Now you can start writing your JavaScript. Begin by creating a script element. This element is used to load JavaScript into your HTML file. You should use an opening <script> and closing </script> tag.
Solution:
<script></script>
Lesson 3
One of the most powerful tools is your developer console. Depending on your browser, this might be opened by pressing F12 or Ctrl+Shift+I. On Mac, you can press Option + ⌘ + C and select "Console". You can also click the "Console" button above the preview window to see our built-in console.
The developer console will include errors that are produced by your code, but you can also use it to see values of variables in your code, which is helpful for debugging.
Add a console.log("Hello World"); line between your script tags. Then click the "Console" button to open the console. You should see the text "Hello World".
Note how the line ends with a semi-colon. It is common practice in JavaScript to end your code lines with semi-colons.
Solution:
<script> console.log("Hello World"); </script>
Lesson 4
Before you start writing your project code, you should move it to its own file to keep things organized.
Remove your console.log("Hello World"); line. Then give your now empty script element a src attribute set to ./script.js.
Solution:
<script src="./script.js"> </script>
Lesson 5
In JavaScript, a variable is used to hold a value. To use a variable, you must first declare it. For example, to declare a variable called camperbot, you would write:
let camperbot;
The let keyword tells JavaScript you are declaring a variable. Declare a variable called xp.
let xp;
Lesson 6:
Variables can be assigned a value. When you do this while you declare it, this is called initialization. For example:
let age = 32;
This would initialize the age variable with a value of 32, a number.
Initialize your xp variable to have a value of 0, a number.
Solution
let xp = 0;
Lesson 7:
Create another variable called currentWeapon and set it to 0.
When a variable name has multiple words, the convention in JavaScript is to use what's called camelCase. The first word is lowercase, and the first letter of every following word is uppercase.
let thisIsCamelCase;
Solution
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
Lesson 8:
Declare a variable called fighting but do not initialize it with a value. Remember to end your line with a semi-colon.
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
Lesson 9:
The variables you have assigned have all had values that are numbers. JavaScript has multiple different data types. The next one you will use is the string. Strings are used to store things like words or text. Strings are surrounded by double quotes, single quotes, or backticks. Here is an example of declaring a variable with a string:
let developer = "Naomi";
Assign the inventory variable to have the value of stick.
Solution
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory ="stick";
Lesson 10:
The player's inventory in your game will be able to hold multiple items. You will need to use a data type that can do this.
An array can be used to hold multiple values. For example:
let order = ["first", "second", "third"];
This is an array that holds three values. Notice how the values are separated by commas.
Change your inventory variable to be an array with the strings "stick", "dagger", and "sword".
Solution:
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory =[ "stick","dagger","sword"];
Lesson 11:
<!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>
In your role-playing game, users will be able to track their stats, buy weapons, and fight monsters. Before you can continue with the interactive JavaScript portion of the game, you need to first create the HTML elements that will display the game information.
Create four div elements within your #game element. Give them the following respective id values, in order: stats, controls, monsterStats, and text.
Solution:
<body>
<div id="game">
<div id="stats"></div>
<div id="controls"></div>
<div id="monsterStats"></div>
<div id="text"></div>
</div>
</body>
Lesson 12:
Create three span elements within your #stats element. Give each of them the class stat. Then give the first one the text XP: 0, the second one the text Health: 100, and the third one the text Gold: 50.
Solution:
<body>
<div id="game">
<div id="stats">
<span class="stat">XP: 0</span>
<span class="stat">Health: 100</span>
<span class="stat">Gold: 50</span>
</div>
<div id="controls"></div>
<div id="monsterStats"></div>
<div id="text"></div>
</div>
</body>
Lesson 13:
Wrap the numbers 0, 100, and 50 in span elements, and wrap those new span elements in strong elements. Then give your new span elements id values of xpText, healthText, and goldText, respectively.
Solution
<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>
Lesson 14:
For your #controls element, create three button elements. The first should have the id set to button1, and the text Go to store. The second should have the id set to button2, and the text Go to cave. The third should have the id set to button3, and the text Fight dragon.
Solution
<div id="controls">
<button id="button1">Go to store</button>
<button id="button2">Go to cave</button>
<button id="button3">Fight dragon</button>
</div>
Lesson 15
JavaScript interacts with the HTML using the Document Object Model, or DOM. The DOM is a tree of objects that represents the HTML. You can access the HTML using the document object, which represents your entire HTML document.
One method for finding specific elements in your HTML is using the querySelector() method.
The querySelector() method takes a CSS selector as an argument and returns the first element that matches that selector. For example, to find the <h1> element in your HTML, you would write:
let h1 = document.querySelector("h1");
Note that h1 is a string and matches the CSS selector you would use.
Create a button1 variable and use querySelector() to assign it your element with the id of button1. Remember that CSS id selectors are prefixed with a #.
Solution:
let button1 = document.querySelector("#button1");
Lesson 16
Similar to your #stats element, your #monsterStats element needs two span elements. Give them the class stat and give the first element the text Monster Name: and the second the text Health: . After the text in each, add a strong element with an empty nested span element. Give the first inner span element an id of monsterName and the second inner span element an id of monsterHealth.
Solution
<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>
lesson 17
Give your #text element the following 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.
Solution
<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>
Post a Comment