vteam #559 is working on the development of a Casino Slot Game which is a simulation of Slot machine found in the casinos. The purpose of this game is to attract customers of an Online Web Store and offer them various rewards if they make good scores in the game. The game is to be developed in multiple platforms with current focus on the Web Version.
Requirement:
Client of vteam #559 required a Web version of the game for now, and wanted it to be a canvas based game. We suggested our client to go with DOM based implementation instead of Canvas. As with the evolution of HTML5, various JavaScript based modern libraries and frameworks end result in DOM would be much more powerful, flexible and well designed as compared to the one in canvas.
Challenges:
Due to some security constraints, the game had to be hosted on a different server from the API and Database. Security scheme that was implemented on API server restricted us from many features due to CORS (Cross-Origin Resource Sharing). Certain HTTP header details went missing. We had to implement certain CORS headers to fix the problem.
As the game was not a conventional application so we had to write a custom directive for Slot Machine, which is self contained and easily maintainable in future.
Proposed Solution:
We proposed a DOM based SPA(Single Page Application) game powered by AngularJS. As AngularJS gives real strength to Web Based Applications. Its MV pattern gives us the flexibility to entertain major requirement add-ons or changes from client end. Plus the real time Client Server Synchronization had to be kept in mind. As the game has to deal with financial transactions in terms of Game Credits, the security offered by AngularJS for HTTP Calls and interceptor is the real need for this.
Implementation:
Along with AngularJS as the client side MV framework, we used CSS3 for animations and SoundJS for various interactive sounds. The game was designed as Single Page Application, so we used a third party router, UI-Router to handle nested states. AngularJS Auth Interceptors were implemented to cater the security needs as asked by client.
Custom directive was written to implement the slot machine mechanism as there was a ready-made component available to fulfill this job. We used a jQuery Plug-in and converted it into a custom directive in AngularJS.
Conclusion:
As a result, we achieved what our client expected from us in the given time-frame, fulfilling our commitment with client. This helped the client with what he expected from us for the game, We are open to any new ideas to implement for him for future development as well.
Comments are closed.