Can’t seem to focus on much

Creating a role playing game using HTML/JavaScript is fun. I’m kind of zipping through it. I need to slow down a bit and take it all in.

Go read the book, Before We Were Yours. Two dual stories told in alternating times between Memphis, Tennessee 1939 and present day Aiken, South Carolina. The book is about the events that happened for over 30 years in the Tennessee Children’s Home Society orphanage. They literally would steal kids from the poor and sell them to the rich. The two stories are told from the point of view of a family of children ripped from their parents and put through the system and a woman trying to figure out what her family is hiding after an elderly woman mistakes her for someone else. It is a sad story but well written. I’m not done with it yet, so I will come back to talking about it.

I’m having such a hard time focusing today. I’ve studied off and on, tried to watch a YouTube video, trying to write right now and even that is proving hard cause I can’t seem to focus. Everytime I try to focus my brain goes, “Oh look, something shiny!”. The kids are doing chores and leaving me alone so I should be able to get stuff done. I’m glad it’s Friday. I can use some sleeping in tomorrow.

JavaScript notes…
——————————————-
Step 10
Give your #game a maximum width of 500px and a maximum height of 400px. Set the background-color to #ffffff and the color to #ffffff.

Use margins to center it by setting the top margin to 30px, bottom margin to 0px, and the left and right margin to auto.

Finally, give it 10px of padding on all four sides.

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

Step 11
Give both your #controls and #stats elements a border of 1px solid #0a0a23, a #0a0a23 text color, and 5px of padding.

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

Step 12
Give your #monsterStats element the same border and padding as your #stats element. Set its color to #ffffff and give it a #c70d0d background.

#monsterStats {
  border: 1px solid #0a0a23;
  padding: 5px;
  color: #ffffff;
  background-color: #c70d0d
}

Step 13
For now, hide your #monsterStats element with the display property. Do not change any of the other styling.

#monsterStats {
  display: none;
  border: 1px solid #0a0a23;
  padding: 5px;
  color: #ffffff;
  background-color: #c70d0d;
}

Step 14
Next, give your .stat elements a padding-right of 10px.

.stat {
  padding-right: 10px;
}

Step 15
Finally, you will need to add some styles for your buttons. Start by setting the cursor property to pointer. Then set the text color to #0a0a23 and the background-color to #feac32.

Then set the background-image property to linear-gradient(#fecc4c, #ffac33). Lastly, set the border to 3px solid #feac32.

button {
  cursor: pointer;
  color: #0a0a23;
  background-color: #feac32;
  background-image: linear-gradient(#fecc4c, #ffac33);
  border: 3px solid #feac32;
}

Step 16
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 tag.

Step 17
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.

Step 18
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.

Step 19
Your view has been switched to your new script.js file. Remember that you can use the tabs above to switch between files.

Add your console.log(“Hello World”); line to this file, and see it appear in your console.

console.log("Hello World");

Step 20
Remove your console.log(“Hello World”); line to begin writing your project code.

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:

var camperbot;
The var keyword tells JavaScript you are declaring a variable. Declare a variable called xp.

var xp;

Step 21
Variables can be assigned a value. When you do this while you declare it, this is called initialization. For example:

var camperbot = “Bot”;
This would initialize the camperbot variable with a value of Bot, a string.

Initialize your xp variable to have a value of 0, a number.

var xp = 0;

Step 22
Initialize another variable called health with a value of 100, and a variable called gold with a value of 50.

var xp = 0;
var health = 100;
var gold = 50;

Step 23
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.

var xp = 0;
var health = 100;
var gold = 50;
var currentWeapon = 0;

Step 24
You have been declaring your variables with the var keyword. However, in modern JavaScript it is best practice to use the let keyword instead. This fixes several unusual behaviors with var that can make your code difficult to debug.

Change all of your var keywords to let.

let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;

Step 25
Using the let keyword, 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;

Step 26
Declare two more variables named monsterHealth and inventory, but do not initialize them.

let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory;

Step 27
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 with 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.

let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = "stick";

Step 28
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 which 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.

let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick", "dagger", "sword"];

Step 29
For now, you want the player to start with just the stick. Change the inventory array to have stick as its only value.

let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];

Step 30
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 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 #.

let button1 = document.querySelector("#button1");

Step 31
We have run in to a slight problem. You are trying to query your page for a button element, but your script tag is in the head of your HTML. This means your code runs before the browser has finished reading the HTML, and your document.querySelector() will not see the button – because the browser hasn’t processed it yet.

To fix this, move your script element out of the head element, and place it at the end of your body element (just before the closing tag.)

 
    
    
    
  
  
    

      

        XP: 0
        Health: 100
        Gold: 50
      
      

        Go to store
        Go to cave
        Fight dragon
      
      

        Monster Name: 
        Health: 
      
      

        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.
      
    
    

  

Step 32
button1 is a variable that is not going to be reassigned. If you are not going to assign a new value to a variable, it is best practice to use the const keyword to declare it instead of the let keyword. This will tell JavaScript to throw an error if you accidentally reassign it.

Change your button1 variable to be declared with the const keyword.

const button1 = document.querySelector("#button1");

Step 33
Use querySelector() to get the other two button elements using their ids: button2 and button3. Store them in variables called button2 and button3. Remember to use const.

const button1 = document.querySelector("#button1");
const button2 = document.querySelector("#button2");
const button3 = document.querySelector("#button3");

Step 34
Just like you did with the buttons, create variables for the following ids and use querySelector() to give them the element as a value:

text, xpText, healthText, goldText, monsterStats, and monsterName.

Remember to declare these with the const keyword, and name the variables to match the ids.

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");

Step 35
Finally, use querySelector() to get the #monsterHealth element. Because you have already declared a monsterHealth variable earlier, you need to use a different variable name for this element.

Declare a new variable with the const keyword and name it monsterHealthText.

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");

Step 36
Comments allow you to add notes to your code. In JavaScript, single-line comments can be written with // and multi-line comments can be written with /* and */. For example, here are single and multi-line comments that say “Hello World”:

// hello world

/*
hello world
*/
Add a single-line comment that says initialize buttons.

// initialize buttons

Step 37
button1 represents your first button element. These elements have a special property called onclick, which you can use to determine what happens when someone clicks that button.

You can access properties in JavaScript a couple of different ways. The first is with dot notation. Accessing the onclick property of a button would look like:

button.onclick
Use dot notation to set the onclick property of your button1 to the function reference of goStore. This function will be something you write later. Note that button1 is already declared, so you don’t need to use let or const.

// initialize buttons

button1.onclick = goStore;

Step 38
Using the same syntax, set the onclick properties of button2 and button3 to goCave and fightDragon respectively.

// initialize buttons
button1.onclick = goStore;
button2.onclick = goCave;
button3.onclick = fightDragon;

Step 39
Functions are special tools that allow you to run sections of code at specific times. You can declare functions using the function keyword. Here is an example of a function called functionName – note the opening and closing curly braces. These indicate the section of code that is within the function.

function functionName() {

}
Create an empty function named goStore. This will match the goStore variable you used earlier.

function goStore() {
  
}

Step 40
For now, make your goStore function output the message Going to store. to the console. For example, here is a function that outputs the message Hello World.

function functionName() {
console.log(“Hello World”);
}

function goStore() {
  console.log("Going to store.");

}

Step 41
Now create a goCave function that prints Going to cave. to the console.

function goCave() {
  console.log("Going to cave.");
}

Step 42
Now create a fightDragon function that prints Fighting dragon. to the console.

Once you have done that, open your console and try clicking the buttons on your project.

function fightDragon() {
  console.log("Fighting dragon.");
}

Step 43
The innerText property controls the text that appears in an HTML element. For example:

const info = document.querySelector(“#info”);
info.innerText = “Hello World”;
This code would change the element assigned to the info variable to have the text Hello World.

When a player clicks your Go to store button, you want to change the buttons and text. Remove the code inside the goStore function and add a line that updates the text of button1 to say Buy 10 health (10 gold).

function goStore() {
  button1.innerText = "Buy 10 health (10 gold)";
}

Step 44
Now, add a line that updates the text of button2 to say Buy weapon (30 gold) and update the text of button3 to say Go to town square.

function goStore() {
  button1.innerText = "Buy 10 health (10 gold)";
  button2.innerText = "Buy weapon (30 gold)";
  button3.innerText = "Go to town square";
}

Step 45
You will also need to update the functions that run when the buttons are clicked again.

In your goStore() function, update the onclick property for each button to run buyHealth, buyWeapon, and goTown, respectively.

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