Colors Switch

Html5 game in wich player moves a ball left and right to hit a part of the wall that is colored with the same color as the ball, when the ball hit the wall both ball and wall change colors.

Comment

Inspiration

I want to make a simple but addictive game, with just one touch to play it, I classified it as a hyper casual game.

How I built it

I built i using:

  • Phaser 3 as engine
  • Javascript for all communication and different API
  • Facebook Instant Game SDK to bring social actions like as: LeaderBoard, Social Sharing and Inviting, Game Bot, etc.
  • Node Js on Heroku for Gabe Bot backend and multiple other server tasks.

Challenges I ran into

  • With using only Phaser 3 with Facebook Instant Game SDK, we are not able to do lot of things such as: ++ LeaderBoard with player's pictures ++ Sharing a base_64 image with invite Api or share Api ++ Sending requests to server ++ configuring a Game Bot

Phaser 3 has a already a pre-made plugin containing Facebook Instant Games Sdk, but it's not very efficient to do lot of work, so I used the Sdk from Facebook and Phaser native version with pure Javascript to accomplish lot of tasks.

Accomplishments that I'm proud of

  • Sharing Image on the fly on Facebook
  • Integrating a Complete LeaderBoard
  • Integrating a Game Bot

What I learned

  • Javascript as I was PHP + Jquery Oriented, Now I Loved Javascript + Node Js
  • Phaser 3 on very advanced approach
  • Implementing a FSM with Phaser 3
  • Facebook Instant Games SDK
  • Node Js and Heroku Plateform
  • Using Postgres with node JS

What's next for Colors Switch

Next I will add a multiplayer Mode with using Apis supplied by Facebook like as:

  • matchPlayerAsync( );
  • chooseAsync( );

Built With

Share this project:

Updates