Use the following to test your code and see your game:

function startGame() { new Phaser.Game(config); }

Setup the structure for the game project by completing the following:

Create a new JavaScript file named "game.js". All of your code for this lab will go in this file

Create a function named preload() with an empty body

This function is called by Phaser before your game starts. In this function you will load all the multimedia for the game (Only images for this lab)

Create a function named create() with an empty body

This function is called by Phaser to start your game. In this function you will setup all the game elements including displaying the map

Create a function named update() with an empty body

This function is called by Phaser on every frame while your game runs. This function controls your game after it starts. For this lab we will leave this function blank

Create an object outside of any functions named "config" that will configure the Phaser game. Set the key-value pairs of this object to:

Key "type" with the value Phaser.AUTO

Key "width" with the value 160

Key "height" with the value 160

Key "scene" with a value that is another object with the pairs "preload" mapping to your preload function, "create" mapping to your create function, and "update" mapping to your update function. Do not call your functions. You are telling Phaser what functions to call at the appropriate times as described above

Display the map below using Phaser.io with a starting location for the player of [1, 3]

var level = [ [1, 1, 1, 1, 1], [1, 0, 0, 0, 1], [1, 1, 1, 0, 1], [1, 0, 0, 0, 1], [1, 1, 1, 1, 1] ];

Recall from the PreLab:

0	floor	where the player can walk freely
1	wall	the player cannot walk through walls
	Part b

To add an image to the game in phaser call the function "add.image" with the syntax this.add.image(x, y, image_name); where x and y are the coordinates of the center of the image in pixels and image_name is the image to add that matches the image_name used when you preloaded the image.

The [x, y] coordinates are in the number of pixels the center of the image should be from the upper-left corner of the map and all the images are 32x32 pixels. This means that the image at [0, 0] on the grid, or level[0][0], is at the [x, y] point [16, 16] in pixels. As another example [0, 1] on the grid, or level[1][0], is at the [x, y] point [16, 48].

Add all the images for the map by looping over the values in the level variable.

Add the player image at the starting location which is [1, 3]. Be sure to add this last so it will be placed over the floor tile at that location.