Research And Implementation Of HTML5-based Keno Display System

HTML is the Web’s core language for creating documentations and applications for everyone to use anywhere. HTML5is the newest version of the HTML standard. In October2014, HTML5was published as W3C Recommendation. Most of modern web browser manufacturers had been providing active support for HTML5standard, so HTML5would be a cross-platform technology over desktop, mobile and web explorer. Therefore, more and more new applications were to be developed based on HTML5. Keno is a chance game invented by Liang Zhang of Han dynasty in China. By the period of more than two thousand years, Keno has been evolved to be a common lottery mode adopted by most of lottery organization in the world. In China, Keno game was adopted by a quick drawing lottery production, KDS(Keno Display System) is the drawing display sub-system in this lottery system. Along with quick development of web technologies, traditional lottery agency is being impacted by new lottery selling channels of internet and mobile. In response to the challenge, it is necessary to implement a new KDS by a cross-platform technology to replace the old one, which does not support mobile devices yet.In this thesis, the business requirements are analyzed and system architecture based on HTML5is designed. Some key technologies adopted by the system are studied. In frontend, HTML5technologies including Canvas, WebGL and SSE(Server-Sent Event) are studied. Three.js as Three Dimensional Graphics Engine is studied. Some animation technologies including tweening and skeletal animation are studied. In backend, Message Queue and Node.js are studied. In message protocol, the most popular data exchange format JSON(JavaScript Object Notation) is studied. Based on the above architecture and research, main modules are designed and implemented in detail, including:1) Using three.js to render2D and3D scene;2) Implementing a KDS animation framework by OOP in JavaScript;3) Implementing communication between different platform by RabbitMQ;4) Implementing pushing message to web browser by SSE;5) Using JSON as common message format;6) Implementing web application server by Node.js.At last, the whole developing environment is set up, and the running effect of the system is demonstrated. It is illustrated that the new KDS is better than the old one in aspect of technology implementation, animation effect, deployment and cross-platform. And the system implemented all business requirements and reached the design goals.