Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Get started building a video game in JavaScript.
Important Note
We've updated the phaser.js file in the workspace what's called a "minified" (compact) version. So if you open the phaser.js file, it won't look like the one shown in the video. The smaller version let's the workspace work faster.
More information about Treehouse workspaces
Free Text Editors
Downloading and Running the Project Files
Because of how the Phaser.JS library handles files, you need to be running a web server locally to view a working copy of this project. You can't just open the index.html file in your web browser as you might a basic HTML page. There are several simple ways to get a web server up and running on your computer:
- The Web Server for Chrome is an easy-to-install extension for Chrome that lets you select a folder on your computer (like the folder with the game files in them) and deliver them through a basic web server. This is probably the easiest way to get started — but you'll need to use the Chrome web browser.
- If you don't want to use Chrome, check out a simple guide for getting a local web server set up for several other methods.
Resources
- Phaser — Desktop and Mobile HTML5 game framework
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up