Phaser Js Slot Machine
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.
Vegas Hits Slot Machine. Developed by the Bally Technologies, Vegas Hits is a multi-denomination slot machine available in live and virtual formats. The game theme revolves around Vegas and the many casinos that it is home to. The symbols on the slot and the accompanying music also reflect the excitement and the grandeur of the Vegas casinos. Lucky Slot Machine is a HTML5 Casino Slot game with 10 type of symbols. Put your bet, lines, and start spinning to try your lucky. This game has been developed using Phaser 3, Phaser is a free open source HTML5 game framework. Destroying the bricks is really cool, but to be even more awesome the game could award points for every brick a user hits, and keep count of the total score.
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.
Dedicated and passionate Full Stack Developer with 7 years of experience. I've acquired a wide depth of knowledge in programming, computer science, software development, and mobile app & game development to help organizations increase productivity and accelerate business performance. Feel free to contact me to discuss the details of your project so I can help achieve your goals.
Some points of my past experience -
◆ Web Programming
• Frontend Development: React.js, AngularJS, Node.js, Mongodb, Express.js• Backend Development: Node.js, Express.js, Ruby on Rails, PHP• CMS: Wordpress, Drupal, Joomla, Shopify• Database: Mysql/SQLite/Oracle/MongoDB
◆ iOS/Android app with API development
Phaser Js Slot Machine Machines
• Native App Development: Android/IOS with Swift & Objective-C, Java & Kotlin• Hybrid App Development: React Native, Flutter• 3rd Party API Manipulation. (Google, Instagram, Stripe, Facebook, Twitter, Braintree, Paypal and etc)
Phaser Js Game
◆ Game Development
Phaser Js Tutorial
• Unity & C#, Unity Plugin Development• UnrealEngine & C++• Video and voice chat during game playing.• Multiplayer: Photon (PUN) Gamesparks / Unity networking (UNet)• Virtual Reality (Google Cardboard, Samsung GearVR, Oculus Rift, HTC Vive, Leap Motion)• Augmented Reality (Vuforia, ARKit, EasyAR, ARCore, SceneKit, Spark AR Studio)• Web Game Development ( HTML5, CSS, Create.js, Pixi.js, Phaser.io, Babylon.js, Three.js, CocosCreator,Playcanvas)• 3D Design (Modeling, Rigging, Texturing, VFX)