Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Coding Your First HTML5 Game

Ayush Bhargava
Ayush Bhargava
791 Points

what do i do with the files which i downloaded and how do i get the program you are on

The downloads i got were called frog.js, treehouse.js and index.html and a couple of images are these the right files. I tried to get the coding from the video and put it on a workspace and look at the preview but it was just a grey or white blank page.

5 Answers

I am looking for source files and I cannot find them - where would they be?

Jake Lundberg
Jake Lundberg
13,965 Points

When you download the files, it allows you to work on the project locally on your machine with your own editor. But if you are wanting to work in workspaces here on treehouse, then you don't actually have to download the files, they will already be loaded in each of the courses.

Hope this helps!

Ayush Bhargava
Ayush Bhargava
791 Points

This helped but specifically which editor do you use to run the files when i ran those files on safari the game didn't work . The files that i downloaded were different then the ones he was showing so i copied the ones he was showing in the video on a workspace the one he showed at the start with html and css and over time java the game couldn't work propely

Jake Lundberg
Jake Lundberg
13,965 Points

You don't use an editor to "run" files, that is what the browser does. You use an editor to "edit" the files...workspaces is an editor that is online, but most people use an editor on their local computer. I personally like Atom myself, but that is personal preference. I haven't watched this video yet, so I cannot confirm if the downloadable files are the same as in the video or not, I'll go over that tonight after I get off work. If you are unable to wait, I might suggested trying to download them again, and open them in an editor on your local computer and see if they are different again.

I am looking for source files and I cannot find them - where would they be?

Ayush Bhargava
Ayush Bhargava
791 Points

there are in downloads

To Ayush and Um Kr,

Actually the only thing you need from the Downloaded zip is the img folder

(with all the images inside)


Here's what I did to get everything working off my local hard drive:

First go to the "Coding your first game in HTML5" page:

https://teamtreehouse.com/library/coding-your-first-html5-game-2

Select the "Teacher's Notes" tab (if it's not already selected)

Under "Teacher's Notes" (at the top) there is a link for

"Play the finished game":

https://treehouse-code-samples.s3.amazonaws.com/workshops/html5game/treehouse.html


Click on that link and a new browser page/tab should open showing the game.

Use the Browser's "Save As" to save the game to your local hard drive.

You should get:

a "treehouse.html" file

a "treehouse_files" folder which contains one 230KB javascript file:

"treehouse-dom.js"


If you use a text editor to look (and search) inside the "treehouse-dom.js" file

you'll see their are references to

.setFill("img/

--followed by the file names like mikethefrog.png, analogStick.png, etc.


So you just need to copy the "img" folder/directory from inside the zip download to

the folder/directory where you saved the "treehouse.html" file above.


Then you can load/run that "treehouse.html" file into a browser

(for example, under Windows, double click on that "treehouse.html" file in Windows Explorer)

and the game will load in your default browser and should be playable,

(i.e. the frog image should move when the appropriate arrow is clicked with a mouse.


Why wasn't the minified "treehouse-dom.js" included in the download zip file?

Don't ask me!


Looking for more working HTML game examples (with code)?

Here's a page of goodies:

http://www.gameclosure.com/goodies.html

David Harston
David Harston
7,261 Points

Thanks James,

Your solution worked for me.

I'd also add that unless I'm missing something, the course is made much more difficult to learn from when the source files don't match what's being discussed on screen.