Preview
Video Player
00:00
00:00
Welcome to Programming
6:49Get started building a video game in JavaScript.
[NOISE]
>> Hi,
0:00
and welcome to Intoducing JavaScript.
0:05
My name's Dave,
I'm a long-time fan of JavaScript and
0:07
a teacher here at Treehouse.
0:10
In this course, you'll get a taste of
programming by building a video game.
0:12
This simple game is programmed in
JavaScript and runs in a web browser.
0:16
The goal is straightforward.
0:20
Move the character around the screen and
collect coins to win.
0:21
You don't need to know
anything about programming or
0:25
JavaScript to follow along in this course.
0:28
But if you do have some JavaScript
programming experience, you'll probably
0:31
have a fun time anyway, and learn a thing
or two about creating JavaScript games.
0:34
At Treehouse we have a lot
of tools to help you learn.
0:39
I'll teach you using videos like this one.
0:42
And you'll take quizzes and
0:44
interactive coding challenges to
reinforce what you're learning.
0:45
You can even use your browser
to write JavaScript code.
0:50
Our online code editor called Workspaces
0:53
provides everything you
need to write programs.
0:56
You'll notice for example, a button below
this video labeled Launch Workspace.
0:59
Go ahead and click that now.
1:03
Once, the workspace opens,
you'll notice a column on the left.
1:07
It lists files of different types.
1:11
The files that end in .png are graphics.
1:13
Click one to see what
the graphic looks like.
1:17
The file that ends in .html is a web page,
index.html.
1:20
You attach JavaScript
files to an html page,
1:26
then when you view the page in a browser,
the JavaScript program runs.
1:29
These two lines here load
two JavaScript files.
1:33
You can see those files
in the file browser.
1:38
They end in .js, short for JavaScript.
1:40
You can create and edit JavaScript in
HTML files, also called text files,
1:44
in a Treehouse workspace, like this one.
1:48
Web pages and JavaScript files
are simply files full of text.
1:51
And all you need to work on them
is something called a text editor.
1:55
Text editors don't do complex
formatting like a word processor, and
1:58
are usually pretty simple programs.
2:02
Their main purpose is to let you type
letters and numbers to create webpages and
2:04
computer programs.
2:08
A Treehouse workspace is a text
editor that runs in your browser.
2:10
But there are also desktop programs that
you can install on your computer for
2:13
editing text files.
2:17
Programs like Atom, or Visual Studio Code.
2:18
Both of these are free, and
they're just a couple of examples.
2:23
Workspaces also lets you
preview a webpage in a browser.
2:27
Click the Preview button in
the upper right corner, and
2:30
you'll open the index.html
file in a browser window.
2:33
A bit of our game is already in place.
2:36
Use the left and right arrow keys
to move the player around, and
2:39
hit the space bar to make him jump.
2:42
You'll notice a couple of other items.
2:45
A coin and a platform.
2:46
Those, like the player,
are objects in the game.
2:48
So you can start having fun right away.
2:51
I provided you with the bit of a program.
2:53
Jump back to the workspace.
2:55
There's an area here called the console.
2:57
You won't use that in this course.
2:59
You can close it by clicking the X symbol.
3:01
Click the phaser.js file.
3:02
This is a JavaScript file, it's actually a
large and complicated JavaScript program.
3:07
It's called Phaser, and thanks to
the hard work and a lot of programmers,
3:13
it provides a framework for
creating games.
3:17
In other words it helps other programmers
like you and me jump start our games like
3:20
giving us a handy set of tools to create
lots of different types of games.
3:24
The programming that we'll be
writing goes in the game.js file.
3:29
This is our game.
3:33
Click to open it in
the workspace text editor.
3:34
Now if you're new to programming,
this may seem pretty complicated, but
3:37
look around a bit and some words might
give you a hint as to what they do.
3:40
For example, currentScore and
winningScore.
3:44
They clearly have something to do
with the player's score in the game.
3:50
And these chunks of code that
begin with the word function.
3:54
They indicate that they do stuff.
3:58
They have a function in this game,
like creating items and adding platforms.
3:59
We'll dig deeper into this
code later in the course, but
4:04
let's make a couple of changes and
see what happens.
4:06
Here on line 12, let's change 0 to 90.
4:09
This will set the current
score to 90 points.
4:14
We can preview it, so I'll save the file,
And click the Preview button.
4:17
Now you can see our score is 90 points,
we didn't even do anything.
4:26
I can't seem to be able to
catch that coin, however.
4:30
Let's make another change.
4:33
Back in the workspace, on line 24,
4:35
let's change 150 here to 550.
4:39
Now it's not totally clear
from looking at this code, but
4:43
those two numbers indicate where in
the game the platform should appear.
4:46
Make sure you save the file and
preview it.
4:50
Look, the platform now appears
a lot lower on the screen.
4:55
Press the left arrow to run,
jump onto the platform with the spacebar.
4:58
Now we can catch the coin.
5:07
A badge appears.
5:09
We'll move to the badge,
And press the spacebar.
5:10
The player has collected the badge and
won the game.
5:16
By changing just a couple of values,
we changed how the game works.
5:20
I'll go back to Workspaces and
change the score back to 0.
5:23
Welcome to programming.
5:29
If you're confused about all this code on
the screen, and maybe feeling a little
5:30
overwhelmed because this stuff looks
really, really complicated, don't worry.
5:34
Take a breath and just follow me.
5:38
Learning programming is challenging and
will take you time.
5:41
This course is meant to give
you a taste of programming,
5:44
not turn you into an instant programmer.
5:46
If you simply follow along with me, you'll
learn a thing or two, create a game, and
5:49
hopefully have some fun.
5:53
Don't worry about every bit of
programming code you see in this course.
5:55
You don't need to understand
it all to learn something.
5:59
Just pay attention to
the concepts I present.
6:02
Experiment with the code I show you,
and have fun.
6:04
We have many other courses that can
train you up to be a programmer, so
6:07
you can learn how this program works and
write your own programs just like it.
6:10
Relax, enjoy the ride and begin to let
programming flow through your finger tips.
6:15
In the next video,
we'll add more to this game.
6:20
And I'll teach you more about programming.
6:22
But before that,
6:24
why don't you try your hand at one
of our Treehouse code challenges?
6:25
A code challenge is
an interactive code editor
6:28
that asks you to write some
code to solve a problem.
6:31
It gives you immediate
feedback as to whether or
6:34
not you passed the challenge successfully.
6:36
If not, the code challenge tells you why.
6:38
The code challenge is
the next step in this course.
6:41
Don't worry,
you don't have to write any code,
6:43
just follow the instructions to learn
how Treehouse code challenges work.
6:45
Have fun!
6:49