Getting Set Up
Before we can begin creating games, we need to make sure our computer is set up to play.
Check your web browser
For this lab, we’ll be using the Chrome / Chromium web browser. Firefox and other HTML5 browsers are great and you can use them for future projects. However, today we’re going to use Chrome so we can all learn together.
Be sure your version of Chrome is up-to-date by going to chrome://chrome in your browser and look for the “Chrome is up to date.” badge.
As long as you see “up to date” the version number or browser name are not important.
Test it out with a sample game
Download enchant.js sample game
Download the game using the link above and extract it into a folder on your computer.
Open the index.html file in Chrome, if the file opens in a different web browser, copy the url to your system’s clipboard, open Chrome, then paste the url into Chrome.
Play the game a few times. You should be able to move around with the arrow keys. If not, click into the green area of the screen and try the arrow keys again. If you’re still unable to move, find someone to help you figure out what the problem is.
Open the Chrome developer tools by pressing F12 on Windows or Linux, or pressing Command + Alt + i on Mac OS X. The developer tools show a javascript error console that we’ll be checking when our game does something we didn’t expect.
Download enchant.js template project
Enchant.js is a library for making games in your web browser! In order to use it, we need a local copy. A project template has been packaged up for you. Download it using the link below.
Download enchant.js template project
This will save the template project as a zip file on your computer. You can extract it now or wait until we need it.
Set up a text editor
If you don’t already have a preferred text editor, you can get Atom, a text editor that is open source and pretty neat. Follow the link below to download Atom for your computer.
We’ll use Atom to edit javascript files on our computer while writing our game.