PIXI.js clicker creation
Most of those starting to learn programming started out of a desire to make their game. I’m not an exception, but fate brought me to web development.
Okay, let’s get to the point. Create a clicker with pixi.js.
The task is trivial, but because I understand little about game development, I had to study this topic a little better.
Why js? Why pixi.js? Why is a clicker at all ?!
– I decided to show only my implementation of the task. I don’t want to teach someone what technologies to use, how to write code. Just my solution to the problem.
Before you write code:
This is a video of the process of creating games. If you are too lazy to read, then you can watch and listen
Secondly, I will insert all the code with a picture, but at the end of the article there will be a link to github with the project sources so that you can poke yourself.
In the code, I left explanatory comments for you, I hope it will be clear.
First, we declare aliases and initialize the application itself.
We create the necessary variables for all elements of the game and load pictures.
For the pictures, I chose the atlas format.
If you are not familiar with the atlas, then this is the json format for downloading a large number of pictures at a time.
This is how it looks in code.
I created it using TexturePacker. To do this manually, in my opinion, is not advisable.
Using the setup function, I parse the atlas, set the location of the elements, styles for the text, add the initial value of the points.
These are standard actions for everything (layout). The most interesting are the three properties of target. interactive, buttonMode and on (“pointerdown”, handlerClick). The first two are needed for the interaction of the click and the target element. on is a regular event handler.
Now we need to write all the necessary functions for the game to work.
Game loop – gameLoop Game
state – play
Click processing – handlerClick
gameLoop simply calls the state function.
In play, I check the timer value (it is 10) and allow the click on the button, also update the size of the target.
handlerClick is checking for the possibility of a click and a click is made.
From the flaw that I see is resizing on the target element. It changes from 0.9 to 1. Immediately. No animation. But when you play it does not notice, left as is.
As promised, below is a link to the github project.
If you have not encountered pixi, but want to deploy the game on your own, then you need a server. I used openserver. This is for ajax requests.
As promised, the link to the code.