JavaScript Tutorial 9 - Rock-Paper-Scissors

This is another quick game using some of the JavaScript that we have learned so far. To start this app off we need to once again generate a random number between 1 - 100 like so...

var number = Math.round(Math.random() * 100);

We will use this to decide what the computer picks, using some simple comparison code, the computer will pick an option based off the number generated...


if (number <= 33)
{
com = "rock";
}
else if (number >= 66)
{
com = "paper";
}
else 
{
com = "scissor";
}

So basically all this code does is take the number generated previously and says its less or equal to 33 then the com will pic rock, or if the number is greater or equal to 66 then com will choose paper and if its not any of those options then they pick scissors.

Now that we have our computer choice done, we now have to add in functionality for the user to pick their choice. We will use a simple prompt like this...

var user = prompt("What do you Choose, Rock...Papper...Scissor?");

So this will work well but what if the user types in with capital letters or under case, because JavaScript is case sensitive, we need to add in a statement so no matter what is typed into the box it will always output it lower case. That will look like this...

var user = user.toLowerCase();

Now we don't need to worry about capital letters. We now have both inputs from the computer and user. Next we have to add in comparison code that will decide who the winner is. Because we have two conditions instead of one, when we use the if statement we can add in "&&" and put in a second condition. So both conditions have to be true for the code to execute.


if ((com == "rock") && (user == "paper"))
{
alert("You Win.Com Chose " + com);
}
else if ((com == "rock") && (user == "scissor"))
{
alert("You Loose.Com Chose " + com);
}
else if ((com == "rock") && (user == "rock"))
{
alert("You Tie.Com Chose " + com);
}
else if ((com == "paper") && (user == "rock"))
{
alert("You Loose.Com Chose " + com);
}
else if ((com == "paper") && (user == "scissor"))
{
alert("You Win.Com Chose " + com);
}
else if ((com == "paper") && (user == "paper"))
{
alert("You Tie.Com Chose " + com);
}
else if ((com == "scissor") && (user == "paper"))
{
alert("You Loose.Com Chose " + com);
}
else if ((com == "scissor") && (user == "rock"))
{
alert("You Win.Com Chose " + com);
}
else if ((com == "scissor") && (user == "scissor"))
{
alert("You Tie.Com Chose " + com);
}

That block of code will cover every possible outcome and will spit out an alert statement based on the input. When you put all the code together it will look like this...

var number = Math.round(Math.random() * 100);

var user = prompt("What do you Choose, Rock...Papper...Scissor?");

var user = user.toLowerCase();

if (number <= 33)

{

com = "rock";

}

else if (number >= 66)

{

com = "paper";

}

else 

{

com = "scissor";

}

if ((com == "rock") && (user == "paper"))

{

alert("You Win.Com Chose " + com);

}

else if ((com == "rock") && (user == "scissor"))

{

alert("You Loose.Com Chose " + com);

}

else if ((com == "rock") && (user == "rock"))

{

alert("You Tie.Com Chose " + com);

}

else if ((com == "paper") && (user == "rock"))

{

alert("You Loose.Com Chose " + com);

}

else if ((com == "paper") && (user == "scissor"))

{

alert("You Win.Com Chose " + com);

}

else if ((com == "paper") && (user == "paper"))

{

alert("You Tie.Com Chose " + com);

}

else if ((com == "scissor") && (user == "paper"))

{

alert("You Loose.Com Chose " + com);

}

else if ((com == "scissor") && (user == "rock"))

{

alert("You Win.Com Chose " + com);

}

else if ((com == "scissor") && (user == "scissor"))

{

alert("You Tie.Com Chose " + com);

}

This is a very simple and easy to make JavaScript version of Rock-Paper-Scissors.

JavaScript Tutorial 8 - Guess The Number

Now we will put some of our skills to the test by creating a simple app that will give the user 5 chances for the user to guess the number it generated. To start of we nee to first be able to generate a random number from 1 - 100. Just like we did in my previous tutorial...


var random = (Math.random());
var multiply = random * 100;
var round = Math.round(multiply) ;
var number = round;

So now the variable "number" will be a random number between 1 - 100. Next we need to write a code that will give the user only 5 chances to guess the number, I think a for loop will work perfectly for this...

for(var c = 0; c < 4; c ++)

Ok, so now it will only let the user have 5 guesses, next we need to create a prompt that will let the user enter in their guess, for this all we do is use a prompt statement like this...

var guess = prompt("Guess what number i'm thinking off, 1 - 100");

Now we can grab the guess from the user, now we need to create a if else statement to tell the user if their guess is higher or lower then the number that the code generated, but what happens if the user guesses it right because if else statements can only handle 2 options? Well thats when else if statements come in, they allow you to add in another condition, so in our case that will be if the user guesses it correctly...


if(guess < number)
{
    alert("higher. " + c);
}

else if (guess > number)
{
    alert("lower. " + c);
}
else
{
    alert("correct the number was " + number);
 }

Using the "<" and ">" we were able to determine if the guess was higher or lower then the number and if it wasn't or higher or lower then we knew that it must be the number.So when its all put together it looks like this...


var random = (Math.random());
var multiply = random * 100;
var round = Math.round(multiply) ;
var number = round;
for(var c = 0; c < 5; c ++)
{
var guess = prompt("Guess what number i'm thinking off, 1 - 100");
if(guess < number)
{
    alert("higher. " + c);
}

else if (guess > number)
{
    alert("lower. " + c);
}
else
{
    alert("correct the number was " + number);
}
}

This is what a simple guess my number game looks like in JavaScript.

JavaScript Tutorial 7 - For Loops

Like while loops, for loops will run a block a code numerous but times, but with for loops you choose how many times you want to run the block of code. They syntax looks like this...

for (statement1;statement2;statement3)
{
block of code
}

Statement 1 is executed before the loop (the code block) starts.

Statement 2 defines the condition for running the loop (the code block).

Statement 3 is executed each time after the loop (the code block) has been executed.

So for example if you wanted to execute a code 5 times you could do something like this...

for (var i = 0; i < 5; i++)

{

alert(i)

}

From the example above, you can read:
Statement 1 sets a variable before the loop starts (var i=0).
Statement 2 defines the condition for the loop to run (i must be less than 5).
Statement 3 increases a value (i++) each time the code block in the loop has been executed.

So it will output 1,2,3,4,5 then the code will be done.If you wanted to change it to 10 then you could change the i = 0 to i = -5. You could also change the i <5 the i < 10. Lastly you could change the i++ to i+=.5 which changes the amount i increases each time.

This is the very basics of for loops in JavaScript.

JavaScript Tutorial 6 - While Loops

In JavaScript While Loops can execute a block of code as long as a specified condition is true. So as long as your condition is true the block of code will keep looping until your condition is false. They syntax looks like this...

while(condition)
{
block of code to be looped
}

This is very simple, now to get a more complex take on while loops, this will look something like this...

var x = 4;

while( x == 4)
{
alert("loop")
x = 5
}

This code will run the alert statement once, because I added in the x = 5, which makes the condition false and will stop the loop. Its very important to have a way for the condition to become false or else it will create an infinite loop and crash your browser.You can also do something like this...


while (i<5)  {  x=x + "The number is " + i + "<br>";  i++;  }

This code will spit out 5 different alerts by using the "++" statement which just increase the value of a variable by 1. This is the basics of how while loops work in JavaScript.

JavaScript Tutorial 5 - Math

In JavaScript there are several math functions, they vary in diffifculty starting from very simple addition to some complex generating numbers. The very simple stuff looks like this syntax wise...

var add = 7 + 9
var subtract = 10 - 5
var divide = 10/2
var multiply = 5 * 5
var x = 5
var y = 7
x > y = false
x<y = true

This is as simple as it gets math wise. Now we will move on to generating numbers between 0 and 1. To do this we will use a Math random statement which looks like this...

var num = Math.random()

var num = 0.983782646377272

The number it spits out can be anywhere from 0 to 1. Now if we wanted to to make this out of a hundred for convenience, then all you would do is multiply this by 100 like so...

var num = Math.random() * 100

var num = 98.3782646377272

Now we are getting somewhere but do we really want that whole number with a ton of digits? well this is where the math round code comes in handy and it works just like this....

var num = Math.random() * 100

var round = Math.round(num)

var round = 98

Now we have a application that will spit out a random number between 1 and 100. Now how can this be used in an application? well I will show you a possible situation for its use...


var num = Math.random() * 100
var round = Math.round(num)
if (round >= 50)
{
 alert(" im smaller then 50")
}
else 
{
alert(" im greater then 50")
}

This is just a simple app that will trigger an alert statement based of the number generated. This is the basic concept of math in JavaScript.

JavaScript Tutorial 4 - Arrays

An array is a special variable, which can hold more than one value at a time.

If you have a list of items instead of creating multiple var statements you can just use an array to store all the data in one line of code. For example...

Var names = [Nick,Joe,Bryan];

Ok so now we have this piece of data, but how do we access it you ask? Well each piece of data has a corresponding index number where it can be accessed from. Nick = 0 , Joe = 1 and 

Bryan = 2 if you had more data you would just keep counting up by 1. So now to see how this looks in JavaScript...

var Myname = names[0]

Myname = Nick

var Myname = names[1]
Myname = Joe


var Myname = names[2]
Myname = Bryan

Now you can also change the data in the array by using a statement like this...

names[0] = "Luke"

That line of code just changed the result of the previous code that pulled the first peice of data in the array so now if we run the code...


var Myname = names[0]
Myname = Luke

We see that Nick changed to Luke due are previous code. This is a brief overview of Arrays in JavaScript.

JavaScript Tutorial 3 - Functions

A function is a block of code that will be executed when "someone" calls it. A function is stated by saying function followed by the name of the function for example...

function name () 

The name of this function is called name, now the syntax of a function looks like this...

function myFunction()
{alert("Hello World!");}


myFunction()

Now every time you call that function it will run that block of code this is very useful when you need to write out the same code multiple times.

At this point you are probably wondering why after the function there is "()", well this is where you can add in arguments. Basically this allows you to add in variables to your function  for example...


function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);}

myFunction(name,job)


This is the basics of Functions and what there syntax is.