• Learnt slot making with CNC milling machine in MSME Tool Room, Indore. (IGTR) during one week training in Dec 2019. Create Video Games with Phaser.js Skill Path.
• An HTML5 Deuces Wild Slot Machine Game! Deuces Wild combined with Slots for a new and strategic slot machine experience. Built with the high performance Phaser engine. The game remembers your credits and high score. Includes a standalone Deuces Wild Poker Hand Evaluation Javascript class. Configuration options to tweak the game Easy to swap out.

Phaser ships with support for 3 physics systems: Arcade Physics, an extremely light-weight AABB library perfect for low-powered devices. Impact Physics for advanced tile support and Matter.js - a full-body system with springs, constraints and polygon support. Welcome to the Javascript version of Slot Machine written by Saurabh Odhyan. Slot machine in Javascript. Learn how to build this. Author: Saurabh Odhyan. Tested in Firefox, Chrome and IE8.

This tutorial covers all the steps to get started with Phaser for a complete beginner. We will go over getting all the necessary tools, learning what other resources are available, learning the structure of a Phaser project, and creating a simple game. See what we will be creating here.

What is Phaser?

Phaser is an HTML5 game framework for mobile and browser games. This means that all of Phaser is contained in one JavaScript file, and it can be used to easily create games. In HTML5, games and graphics are handled in an element called a canvas. Phaser works by updating what is displayed on the canvas, and it also helps you handle the physics of a game. JavaScript and HTML5 are easy to learn and use, making Phaser excellent for learning game development. Be sure to take a look at the Phaser website.

JavaScript

To start learning how to use Phaser, you will need a basic knowledge of JavaScript. JavaScript is the programming language of the web, meaning it works with HTML5 to create what you see on a website. HTML5 will be used in this tutorial to link JavaScript files together in order to create a canvas element, where the game will be displayed. I recommend that you get a brief understanding of JavaScript before continuing with this tutorial. A great resource to get started with JavaScript is Codecademy.

Text Editor

Next, you will need a text editor where you can write your code and view the code from this tutorial. Text editors give you a simple interface for editing your code, meaning they will not be big downloads. I suggest downloading Sublime Text 3.

Web Server

You will now need a web server to view games that you are creating in your browser. Without a web server, some features of games will be disabled by your browser. You should download XAMPP. The only component that you will need for Phaser development is the Apache Server component, when you reach that point in the setup process.

Keep in mind where XAMPP is installed on your computer. On a Windows machine, it is likely C:xampp, and on a Mac it is likely /Applications/XAMPP.

Changing Ports

To avoid conflicting ports for XAMPP with other applications running on your computer, you will probably need to change the port number of your Apache server. This will involve changing the contents of a configuration file using your text editor, but it is not very complicated. Using your text editor, push CTRL+O to open a file, and navigate to the location where XAMPP was installed on your computer, as mentioned earlier. Now, navigate from there to apache/conf/, and open the httpd.conf file.

Push CTRL+F while in the document to search for a line that says Listen 80 and change that line to say:

Push CTRL+F again to search for the line ServerName localhost:80 and change that line to say:

Now save the document. You are finished changing ports. To make sure everything is working with XAMPP, open the XAMPP Control Panel that was installed on your computer and click Start next to Apache. Once the word Apache is highlighted green, go to your browser and go to the address localhost:8080. If you are brought to a page that says XAMPP on it, everything is working properly. In the future, you will run your game in your browser from that address. Well done making it this far! It is almost time to start working with Phaser.

Using Git

You will need Git to download the source files for our simple game. First, download Git.

When using your Apache web server, all of your files will be located in a file called htdocs, which is inside of the location of your main XAMPP folder.

Once you have Git installed, you will need to use your command prompt to add the source files to your htdocs folder. On a Windows machine, you can find it by searching your programs for the phrase cmd. On a Mac, the terminal is located in your Applications folder. From your command prompt, use the command cd followed by the exact location of your htdocs folder. So, for Windows, the command will look something like:

And on a Mac the command will look something like:

If you are trying to copy and paste any commands into the command prompt, remember that you will need to right click the terminal and click Paste. CTRL+V will probably not work.

Finally, to add the source files to the htdocs folder, type the command:

This clones the source code from my GitHub repository.

Now, go to the address localhost:8080/phaser-squares in your browser, and you will see the simple game that we will be creating for yourself.

Phaser Squares

Our simple game will be called Phaser Squares. The player will be able to move a blue square around the canvas, collecting red squares for points.

First, take a look at the file structure of the game at htdocs/phaser-squares. index.html is the HTML5 file that connects and runs the JavaScript files. The folder asset contains all the game assets, or png images that are loaded and displayed in the game. The folder lib contains Phaser. You can look at the assets, but Phaser is in a compressed format and will not be readable. The actual game logic is in game.js.

Open index.html in your text editor by navigating to htdocs/phaser-squares. The important lines here are:

The first line allows us to use Phaser from our local lib folder, and the next line adds our own source code from game.js into our game.

Now, take a look at game.js. The first few lines create the game object and set the dimensions of the world:

So, the dimensions of our game viewport are 480x320. Take a look at the portion that mentions the states preload, create, and update. These are game state methods which have different purposes, and they are therefore separated from one another. We set these states to the corresponding functions in game.js so that Phaser can understand what we want to preload, create, and update. In the preload state, we load our assets and prepare the game world. In the create state, we actually place our assets on the screen as sprites. In the update state, we specificy what should be continuously changing, or updating, in the game. The basic structure for our own functions looks like this:

In the preload state, we load our assets like this:

'player' and 'food' are the names by which Phaser will recognize our assets.

Now it's time to look at the create state. Start Arcade physics, the basic Phaser physics engine, like this:

To use arrow keys for the game, they have to be initialized:

Now we can add an actual player sprite and anchor its position to the center of the square:

In the create state, you can also see that we place food on the screen and group all of it together in a Phaser group:

We also add the score to the game:

Now it's time to look at the update state of the code. Remember that this state is being looped through almost continuously once the previous states are complete. To move the player square, we identify if an arrow key is being pressed, then change the velocity of the player's body if it is. Changing velocity involves using the physics engine, so we are changing the velocity of the body, not just the sprite. This part of the code moves the player body up and down:

Now, we need to make something happen when the player is overlapping a piece of food. To do this, we will place in the update state:

player and food are the objects that should be overlapping, and the function eatFood is called when they are overlapping. Here is the function in our code that is called when those two bodies are overlapping:

This function takes parameters of player and food such that only the individual food piece from the group is killed, or removed from visibility. If we did not do this, all pieces of food on the screen would be killed. The score is also updated in this function.

Conclusion

This concludes Loonride's very first tutorial on Phaser. Be sure to contact us with any questions or suggestions. More tutorials will be available soon, so stay tuned. In the mean time, see what you can do to improve your Phaser Squares game. You could try to place the food randomly, or you could make the game challenging by adding deadly obstacles.

Phaser Js Slot Machine Software

Buy the source code to this slots game

Deuces Wild combined with Slots for a new and strategic slot machine experience. Includes a standalone Deuces Wild Poker Hand Evaluation Javascript class.

Phaser Js Game

• Configuration options to tweak the game
• Easy to swap out graphics
• Game scales for any screen
• Works in all HTML5 browsers
• Built with Phaser
• Simple click/touch controls
• 960×640 Native Resolution
• PSDs Included
• Full source included
• Standalone Deuces Wild Poker Hand Evaluator included
• Remembers your credits and high score