Download a zip archive with the file structure of the game here. It contains all the image assets needed for the game but no code. We will be writing this next.
Now open index.html, add a title for your page and create links to all the JS files.
Later, to play the game, just open this file in your browser.
http://pastebin.com/RWQmrcNA
Your directory should look like this:
How the game is organized
Phaser games are organized around states. Think of states in Phaser as the different parts of a game. Here are the states of our game:
The Menu state. It is handled by menu.js, and only displays the start image. When it is clicked, the game transitions to the Game state.
Game state. It is handled by game.js. This is the actual play area of the game. You control the snake, eat apples and have lots of fun. When you die, you transition to the Game_Over state.
Game_Over state. It shows gameover.png and displays your last score. When it is clicked you transition to the Game state.
main.js is our main JavaScript file. This is the place where we will create a new game instance and add a menu state.
1. Loading an image
Right now, our game doesn’t do anything. Let’s code the Menu state, and make it display the title screen.
During the setup we included the Phaser library in our HTML file. This gives us a global object called Phaser. Through it, we can access the library’s methods and functions for building games.
Now we will use the global Phaser object, and create a new game instance. This is an object which represents our entire game. We will add the states to it.
main.js
http://pastebin.com/FMFgUTTL
Now we need to initialize our Menu state object. In menu.js define a new object and add the functions below. When the state is started, the preload function will be called first, loading all the needed assets for our game. Once preloading finishes, create gets called, initializing the playing field and everything we want on it:
menu.js
http://pastebin.com/gPDf1H9m
Because of browser security restrictions, to start the game you’ll need a locally running web server. This page from the Phaser guidelines has plenty of options for all operating systems – here. In other words, it won’t work if you simply double click your index.html.
If everything has been done right, a page with the the start screen should appear in your browser.
2. Drawing the snake
As we mentioned earlier, the Game state is where the actual game play happens. This is also the place where we will draw the snake. Like we did with the Menu state, we need to register the Game state with the global game object in main.js. Here is how your code should look like:
main.js
http://pastebin.com/4hnyY7zK
We’ll also want to add some code in menu.js to let us start the Game state when it is clicked. For this purpose, we will replace the sprite with a button. Adding a button is basically the same as adding a sprite, you only need to provide a function to be called when it is clicked. Here is the final menu.js code:
menu.js
http://pastebin.com/y6MS56d5
We can now proceed with coding the Game state and drawing the snake. The structure is similar to the one of the Menu state.
game.js
http://pastebin.com/0htNNE2R
3. Movement and control
To make the snake move we’ll be working in the update function of game.js.
First of all, we create event listeners for controlling the direction of the snake with the arrow keys.
The actual movement is a bit complex, since update is triggered at a very quick rate, and if we move the snake every time it’s called we would end up with one uncontrollably speedy reptile. To change this, we’ve set up an if statement that checks weather this is the 10th consecutive call of update() using a counter variable called updateDelay.
If it really is the 10th call, we remove the last square of our snake (first element in the stack), give it new coordinates according to the current direction and place it in front of the head of the snake (top of the stack). Here’s how the code looks like:
http://pastebin.com/u7Rb5UqB
4. Collision detection
A game in which the snake is roaming freely in the playing field is not much fun. We need to detect when the snake comes in contact with a wall, an apple or itself. This is called collision detection.
This is usually done by using a physics engine, of which the Phaser framework supports a few. But they are too complex for a simple game like this. We will instead do our own collision detection by comparing coordinates.
In the update function, after the code for moving the snake, we call a number of methods. They will compare coordinates to tell us if a collision has occurred.
http://pastebin.com/tf0FK4qe
When the snake collides with the apple we increase the score and the length of the snake. But when a collision with the wall or the snake body occurs, we should end the game. To do this, we need to make the Game_Over state. Again, we need to register it with main.js. Add this line near the bottom of that file:
main.js
http://pastebin.com/7F8xD4uB
That’s it! Our game is ready!
Now open index.html, add a title for your page and create links to all the JS files.
Later, to play the game, just open this file in your browser.
http://pastebin.com/RWQmrcNA
Your directory should look like this:
How the game is organized
Phaser games are organized around states. Think of states in Phaser as the different parts of a game. Here are the states of our game:
The Menu state. It is handled by menu.js, and only displays the start image. When it is clicked, the game transitions to the Game state.
Game state. It is handled by game.js. This is the actual play area of the game. You control the snake, eat apples and have lots of fun. When you die, you transition to the Game_Over state.
Game_Over state. It shows gameover.png and displays your last score. When it is clicked you transition to the Game state.
main.js is our main JavaScript file. This is the place where we will create a new game instance and add a menu state.
1. Loading an image
Right now, our game doesn’t do anything. Let’s code the Menu state, and make it display the title screen.
During the setup we included the Phaser library in our HTML file. This gives us a global object called Phaser. Through it, we can access the library’s methods and functions for building games.
Now we will use the global Phaser object, and create a new game instance. This is an object which represents our entire game. We will add the states to it.
main.js
http://pastebin.com/FMFgUTTL
Now we need to initialize our Menu state object. In menu.js define a new object and add the functions below. When the state is started, the preload function will be called first, loading all the needed assets for our game. Once preloading finishes, create gets called, initializing the playing field and everything we want on it:
menu.js
http://pastebin.com/gPDf1H9m
Because of browser security restrictions, to start the game you’ll need a locally running web server. This page from the Phaser guidelines has plenty of options for all operating systems – here. In other words, it won’t work if you simply double click your index.html.
If everything has been done right, a page with the the start screen should appear in your browser.
2. Drawing the snake
As we mentioned earlier, the Game state is where the actual game play happens. This is also the place where we will draw the snake. Like we did with the Menu state, we need to register the Game state with the global game object in main.js. Here is how your code should look like:
main.js
http://pastebin.com/4hnyY7zK
We’ll also want to add some code in menu.js to let us start the Game state when it is clicked. For this purpose, we will replace the sprite with a button. Adding a button is basically the same as adding a sprite, you only need to provide a function to be called when it is clicked. Here is the final menu.js code:
menu.js
http://pastebin.com/y6MS56d5
We can now proceed with coding the Game state and drawing the snake. The structure is similar to the one of the Menu state.
game.js
http://pastebin.com/0htNNE2R
3. Movement and control
To make the snake move we’ll be working in the update function of game.js.
First of all, we create event listeners for controlling the direction of the snake with the arrow keys.
The actual movement is a bit complex, since update is triggered at a very quick rate, and if we move the snake every time it’s called we would end up with one uncontrollably speedy reptile. To change this, we’ve set up an if statement that checks weather this is the 10th consecutive call of update() using a counter variable called updateDelay.
If it really is the 10th call, we remove the last square of our snake (first element in the stack), give it new coordinates according to the current direction and place it in front of the head of the snake (top of the stack). Here’s how the code looks like:
http://pastebin.com/u7Rb5UqB
4. Collision detection
A game in which the snake is roaming freely in the playing field is not much fun. We need to detect when the snake comes in contact with a wall, an apple or itself. This is called collision detection.
This is usually done by using a physics engine, of which the Phaser framework supports a few. But they are too complex for a simple game like this. We will instead do our own collision detection by comparing coordinates.
In the update function, after the code for moving the snake, we call a number of methods. They will compare coordinates to tell us if a collision has occurred.
http://pastebin.com/tf0FK4qe
When the snake collides with the apple we increase the score and the length of the snake. But when a collision with the wall or the snake body occurs, we should end the game. To do this, we need to make the Game_Over state. Again, we need to register it with main.js. Add this line near the bottom of that file:
main.js
http://pastebin.com/7F8xD4uB
That’s it! Our game is ready!
0 nhận xét:
Post a Comment