Skip to content

Latest commit

 

History

History

intro-to-phaser

README.md

Introduction to Phaser

Steps

  1. Download intro-to-phaser.zip, move it to your Desktop, and double-click to unzip. This will create an intro-to-phaser directory with a bunch of files in it.

  2. Open Brackets. Open the intro-to-phaser directory you just made in step 1.

  3. Take a look at index.html. Notice that it loads two scripts, phaser.js and main.js. phaser.js is the library we are using, and main.js is where your code goes.

  4. Open step01.js, and copy and paste everything into main.js.

  5. In your web browser, go to: https://github.com/bennlich/intro-to-phaser/commits/master, and scroll to the bottom of the list.

This is a list of "commits" or "changes" (also called the "commit history"). Every time you click on the "commit" button in GitHub Desktop, one new commit is added to your commit history.

  1. Click on the commit with the message "setup phaser. nothing to see yet." You should see code that looks just like your main.js file.

  2. Click your browser's back button to go back to the list of commits. Each commit in this list represents one small change toward making a simple game. This is the step-by-step history of me making changes to my code to get my game to work.

  3. Move one-by-one through the list of commits from bottom to top. For each change, follow along by making the same change to your main.js file.

  4. Every time you make a change to main.js, save your change, and use the lightning bolt button to run your game and see what the new code does.

  5. Pay attention to the commit messages at the top of each commit! Sometimes they will be helpful.

  6. Experiment! When you see numbers in the code, try changing them, then reload the page and see what happens. Experimenting is a great way to understand what code does.

It's always okay to deviate from the steps for a bit to experiment (e.g. if you want to make more stars, more platforms, etc.). Just make sure you eventually get all the way to the end of the commit history (you should end up with a moveable player who can jump on platforms).

  1. If something goes wrong, you can always open up the stepXX.js file closest to where you were in the sequence of commits (where XX is a number). Paste that into your main.js, and start fresh from there. Only do this as a last resort though.

Remember: If you have a bug that you can't track down, open up the web inspector and click on the console tab to see if you are getting any errors. This will also tell you what line is causing the error.