HTML5, future to solve cross –platform issue in serious game development


  • Mazen Ismaeel Ghareb Department of Computer Science, College of Science and Technology, University of Human Development, Sulaymaniyah, Kurdistan Region, Iraq



HTML5, Serious game, E-learning, Web programming, Java script, Cross platform


serious games as a learning medium have progressed in the previous couple of years. They have been connected to support learning in different fields, for example, security, medical services, and instruction. Serious games can scale from low spending recreations up to high spending diversions relying upon the recreations' destinations and elements. For example, military may use recreational software with 3D reenactment. This is the majority of scenarios in learning environments focusing  on motivation to learn. Nevertheless,  game development stays as a tedious, complex, and difficult process. With the use of HTML5, however, there is a growing shift towards web apps as opposed to native code.  HTML5 technologies are enabling game applications to run in the browser with some native app functionality. HTML5 has received a great deal of attention since its release in 2009, there are numerous articles and discussions on the Internet. In this work, we present how we can use HTML5 canvas as game engine and use it as a cross platform engine for developing a serious game with implementation of some simple games.  We mention the advantage and simplicity of canvas HTML5 for web game development. In addition,  we review further cross-platform compilers that support HTML5. Finally, we make a comparison of 10 of cross platform apps that support HTML5  in game development in order to help specify which cross platform can be used in game development generally and serious game specifically.


[2] E. Lengyel, Game Engine Gems 2. CRC Press, 2011.
[3] A. Vahldick, A. J. Mendes, and M. J. Marcelino, “Towards a Constructionist Serious Game Engine,” in Proceedings of the 17th International Conference on Computer Systems and Technologies 2016, 2016, pp. 361–368.
[4] D. Laurie, W. Wisden, and P. Seeburg, “The distribution of thirteen GABAA receptor subunit mRNAs in the rat brain. III. Embryonic and postnatal development,” The Journal of neuroscience, vol. 12, no. 11, pp. 4151–4172, 1992.
[5] O. Sourina, Q. Wang, and M. K. Nguyen, “EEG-based‘ serious’ games and monitoring tools for pain management.,” Studies in health technology and informatics, vol. 163, pp. 606–610, 2010.
[6] T. Susi, M. Johannesson, and P. Backlund, “Serious games: An overview,” 2007..
[7] B. Huynh-Kim-Bang, J. Wisdom, and J.-M. Labat, “Design patterns in serious games: A blue print for combining fun and learning,” Project SE-SG, available at http://seriousgames. lip6. fr/DesignPatterns, 2010.

[8] R. Levitt and J. M. Piro, “Innovation in Education through Web-Based Instruction: Digital and Cross-Platform Storytelling,” Revolutionizing Education through Web-Based Instruction, p. 131, 2016.
[9] S. Nilsson, “Implementation of a Continuous Integration and Continuous Delivery System for Cross-Platform Mobile Application Development,” 2016.
[10] C. Rieger and T. A. Majchrzak, “Weighted Evaluation Framework for Cross-Platform App Development Approaches,” in EuroSymposium on Systems Analysis and Design, 2016, pp. 18–39.
[11] A. Monzavi and R. Darwish, “Comparison of HTML5 and Native Client Development on Mobile Platforms,” 2015.
[12] J. Ross, “System and method for integrated hardware platform for flash applications with distributed objects,” 2013.
[13] P. R. de Andrade, A. B. Albuquerque, O. F. Frota, R. V. Silveira, and F. A. da Silva, “Cross platform app: a comparative study,” arXiv preprint arXiv:1503.03511, 2015.
[14] G. Anthes, “HTML5 leads a web revolution,” Communications of the ACM, vol. 55, no. 7, pp. 16–17, 2012.
[15] M. Pilgrim, HTML5: up and running. “ O’Reilly Media, Inc.,” 2010.
[16] S. Fulton and J. Fulton, HTML5 canvas. “ O’Reilly Media, Inc.,” 2013.
[17] C. Girard, J. Ecalle, and A. Magnan, “Serious games as new educational tools: how effective are they? A meta-analysis of recent studies,” Journal of Computer Assisted Learning, vol. 29, no. 3, pp. 207–219, 2013.
[18] vZavcer, S. Mayr, and P. Petta, “Design pattern canvas: An introduction to unified serious game design patterns,” Interdisciplinary Description of Complex Systems, vol. 12, no. 4, pp. 280–292, 2014.le
[19] F. Laamarti, M. Eid, and A. E. Saddik, “An overview of serious games,” International Journal of Computer Games Technology, vol. 2014, p. 11, 2014.
[20] S. Mader, S. Natkin, and G. Levieux, “How to analyse therapeutic games: the player/game/therapy model,” in International Conference on Entertainment Computing, 2012, pp. 193–206.
[21] S. McCallum and C. Boletsis, “A taxonomy of serious games for dementia,” in Games for Health, Springer, 2013, pp. 219–232.
[22] impactjs, “impactjs.” [Online]. Available: http://impactjs.c0m/. [Accessed: 01–08-2016].
[24] playcanvas, “playcanvas.” [Online]. Available: [Accessed: 01–08-2016].
[25] Turbulenz, “Turbulenz.” [Online]. Available: [Accessed: 01–08-2016].
[26] Turbulenz, “Turbulenz.” [Online]. Available: [Accessed: 01–08-2016].
[27] cocos2d-x, “cocos2d-x.” [Online]. Available: [Accessed: 01–08-2016].
[28] gameclosure, “gameclosure.” [Online]. Available: [Accessed: 01–08-2016].
[29] gamvas-wcb, “gamvas-wcb.” [Online]. Available: [Accessed: 01–08-2016].
[30] Lychcc, “Lychcc.” [Online]. Available: [Accessed: 01–08-2016].
[31] melonjs, “melonjs.” [Online]. Available: [Accessed: 01–01-2016].
[32] construct2, “construct2.” [Online]. Available: https://www.scirra.c0m/construct2. [Accessed: 01–08-2016].
[33] Scirra, “Scirra.” [Online]. Available:
[34] Createjs, “createjs.” [Online]. Available: [Accessed: 01–08-2016].
[35] Pixijs, “Pixijs.” [Online]. Available: [Accessed: 01–08-2016].
[36] gamemaker, “gamemaker.” [Online]. Available: [Accessed: 01–08-2016].
[37], “phonecgap.” [Online]. Available: [Accessed: 01–08-2016].
[38] Microsoft, “Get ready for plug-in free browsing.” [Online]. Available: au/1ibrary/ ic/hh968248%28v;vs.85%29.aspx>. [Accessed: 01–08-2016].
[39] A “What is HTML5 Storage?,” [Online]. Available: Storagc.html. [Accessed: 01–08-2016].
[40] A. M. Darwesh, M. I. Ghareb, and S. Karimi, “Towards a Serious Game for Kurdish Language Learning.”