PIXI JS – Make a small game hitting boxes

So, as I have mentioned some time ago, I have started to read the book Learn Pixi.js, nicely provided to me from Apress.com for a review.

It is an interesting book and one of its best part is that its code is shared online for free (check the site of the book here, under source code or click here for direct download). Thus, there was one example, looking like this:


The example was doing the following – it “listens” to your keyboard and it moves the cat in the direction of the arrows. When it touches the box, the text “No collision” is changed to “Collision”. As far as, my target was to build some kind of small game with PIXI, while reading the book, I have used this example as a starting point for a small browser game.

This is what I have built:

pic1 pic2 pic3 pic4

Pretty much, the idea is the following – you start to move the nice logo of my site 🙂 in order to collect points. Each box gives one point, when it is “touched” for a second time. No timer is present, when the background is white.

Thus, you have to remember which boxes are touched, because if you touch a box twice, it would activate the timer. And it would give you one point. At this time, you have to start touching for a second time all the boxes, you have touched once already. They would disappear and give you points. Once the timer goes to 0, you cannot move, your result is shown on the screen and after some seconds, the browser is restarted. That’s it! 🙂

The code is available in GitHub. Just open the CollisionGame.html with your browser. I have managed to play the game with Firefox, it seemed that Chrome had some kind of problems with it.

Pretty much that is all. The review of the book is coming soon! 🙂

Tagged with: ,