Air Hockey Game with Google Cloud + NodeJS + NginX + Socket.io + HTML5 you can see gitlab repository: http://git.matthewlab.com/root/remote-web-airhockey

1. Air Hockey Web Game (using ngxqrctl.js)
Proposal
Team NGX
kick-off presentation for capstone project
Ikwhan Chang(20060957) | Sangtae Lee(20115695) | Dongkyoung Jo(20112104)

2. INDEX
• Team NGX
• Introduction
• How to Use
• How to Play
• Game Rule
• System Architecture
• System Environment
• Schedule
• Q&A
2

3. Team NGX Team NGX
Air Hockey Web Game
(using ngxqrctl.js)
Team Mission
- Make new user experience in a web
- Make best web maintenance environment
- Share our source code within worldwide developers
Team Member & Role
3
Name Part
Ikwhan Chang NGX Web Server, QR Controller JavaScript Library
Sangtae Lee AirHockey Game Client
Dongkyoung Jo NGX QR Controller

4. Introduction Project Name
• Responsive Air Hockey Web Game
What is this?
• Air Hockey Game based on Web
• Remote Controlling via QR Code
• Server is based on NGXRCS
(NGXRCS : NGX Remote Control
Server, our previous final production
which is notification-based web
server)

5. Goal 5
Optimize
Server optimization
Ngxqrctl.js
Provide for
developer to our js
library(jQuery
Plugin)
Air Hockey
Game(Demo)
Provide our Air
Hockey Game for
demonstration(how
to use our
ngxqrctl.js)
1) optimize NGXRCS(NGX Remote Control Server) more smoother and faster.
2) make our NGXRCS via QR-code and Javascript Library(jQuery Plugin) : NGX
QR Controller, ngxqrctl.js
3) make simple responsive game based on HTML/JavaScript and ngxqrctl.js :
Air Hockey Game

6. How to Use? 6
1. Install our JS library
Ngxqrctl.js : for developer
1) Add HTML element for showing qr-code
<div id=”ngx-container”>
</div>
2) Include the ngxqrctl script in developer’s site
<script src="/path/to/ngxqrctl.min.js"></script>

7. How to Use? 7
1. Install our JS library
Ngxqrctl.js : for developer
3) CSS
#ngx-container #qr-view{ width: 100%; }
(How to use CSS is not yet determined but we will use CSS for customizing style)
4) Initialize with JavaScript
Initialize an NGX QR Controller instance as a jQuery plugin: $('#container').ngx-qrctl().
var $container = $('#ngx-container');
// init
$container.ngx-qrctl({
// options
layoutMode: 'fitRows’
});

8. How to Use? 8
2. Setting event
Ngxqrctl.js : for developer
(ex : onTouchStart)
var $container = $('#ngx-container');
function onTouchStart() {
// Here is user’s action
console.log('layout done');
}
// bind event listener
$container. ngx-qrctl( 'on', ’touchStart', onTouchStart );
(list of event)
dragstart
dragmove
dragend
touchstart
touchend
touchmove

9. 9
How to Play?
Air Hockey Web Game
1. Connect our game’s website
if there is two user, game will start
Player 1 - disconnected Player 2 - connected

10. 10 How to Play?
Air Hockey Web Game
2. scan QR-code via user’s smartphone

11. 11 How to Play?
Air Hockey Web Game
3. Play!

12. 12 Game Rule
Air Hockey Web Game
• Two players, One ball
• Each side has their own goalpost
• Ball can move inside rectangle area.
• Available action
Moving : left, right, jump
• If the ball go into the opposite’s goalpost, on the ground during game, the user
can get a single point
• Time limitation : 3 min

13. System Architecture 13
Wi-Fi Connected
User’s unique code
Our Website
Controller 1
(iphone or android) Controller 2
(iphone or android)
Server
: I/O , Game Logic
Processing, Push
Viewing Data
(JSON)
QR Code provided
Wi-Fi Connected

14. System Environment 14
Client #1
Server
Routing
... . . .
Push Data
(JSON)
Socket.io
(Push Server) Client #N
Push Data
(JSON)

15. Development Environment 15
Lee
Jo
IntelliJ IDE
Eclipse w/ STS
Eclipse w/ Android
Testing
Server
changes
testing
Jenkins
Continuous
Integration
JIRA
share Issue/Bug/TODO Issue Tracker
Chang
Git
Repository

16. Schedule 16
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Mid-term
Exam
UI / layo ut
class, transactio n Design
Server
Game
Demo
Architecturin g
Set-up Default Layo ut
research about
QR-Code
processing
Solve to minor
problem s
Sync w/clie nt
Sync w/serve r
Apply QR-Code
library to our game
implementation to
build QR-Code
image processing
Optimizin g
JS Library Optimizin g
1st Demo
Final Demo
Default Game
Appearanc e
packing JavaScript
Librar y
OSS Challenge
deadline(28th Sep)

17. Team NGX
- 3th weekend 17
Ikhwan Chang (Presenter)
- Server Turning
- Architecturing
SangTae Lee Dongkyoung Jo
- QR-Code Research
- jQuery Socket.io plugin Research

18. Schedule 18
We’re now
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Mid-term
Exam
UI / layo ut
class, transactio n Design
Server
Game
Demo
Architecturin g
Set-up Default Layo ut
research about
QR-Code
processing
Solve to minor
problem s
Sync w/clie nt
Sync w/serve r
Apply QR-Code
library to our game
implementation to
build QR-Code
image processing
Optimizin g
JS Library Optimizin g
1st Demo
Final Demo
Default Game
Appearanc e
packing JavaScript
Librar y
OSS Challenge
deadline(28th Sep)

19. Architecturing
Server
Cent OS (Main O/S)
NGINX (Routing)
NodeJS
Socket.IO
(Notification)
ngx_rcs.js
(plugin)
Client(Game)
jQuery.qr-code
Client(Device)
Smartphone
HTML5
canvas
User’s Touch Data
(JSON)
Air Hockey Game
jQuery
ngx_qrctl.js
Push Notification (plugin)

20. Where our plugins located
Server Client
ngx_rcs.js
(plugin)
ngx_qrctl.js
(plugin)
Server : npm(kind of node.js ‘s package)
Client : jQuery Plugin
All they will provide with opensource(most of plugin already do that)

21. Type of QR-Code

22. QR-Code Processing
http://larsjung.de/jquery-qrcode/

23. QR-Code Processing
USERIP+USER-AGENT+HTTP HEADER
{“Sat, 07 May 2011 17:31:38 GMT”,”Mozilla/5.0 (Macintosh; Intel Mac OS X
x.y; rv:10.0) Gecko/20100101 Firefox/10.0”,”165.194.33.5”}
CREATE UNIQUE KEY(using MD5 with IP-Hash key)
ENCODED TEXT : E5c09a1dd615d8c878dcfb0f2923f976
KEY : 165.194.33.5
CREATE QR-CODE(using jquery.qrcode : http://larsjung.de/jquery-qrcode/)
$(selector).qrcode({
width: 100,
height: 100,
color: #3a3”,
text: “http://qrcode.matthewlab.com/q=E5c09a1dd615d8c878dcfb0f2923f976“
});

24. Team NGX
- 4th weekend 24
Ikhwan Chang
- - setting to node.js and socket.io
- - made to default push notification program
SangTae Lee Dongkyoung Jo(Presenter)
- - set up default layout
- - restructure the class

25. Schedule 25
We’re now
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Mid-term
Exam
UI / layo ut
class, transactio n Design
Server
Game
Demo
Architecturin g
Set-up Default Layo ut
research about
QR-Code
processing
Solve to minor
problem s
Sync w/clie nt
Sync w/serve r
Apply QR-Code
library to our game
implementation to
build QR-Code
image processing
Optimizin g
JS Library Optimizin g
1st Demo
Final Demo
Default Game
Appearanc e
packing JavaScript
Librar y
OSS Challenge
deadline(28th Sep)

26. Team NGX
- Why we change server O/S?
• License problem
• We provided web server from SK since we joined open source
award challenge but said that they cannot provide window based
server because they have not enough to Window license.
• So they provide only server based on Linux
• We seriously consider to change Cent OS(based on Linux)
during first week and finally Cent OS has no problem if we
changed.

27. Team NGX
- Why we change server O/S?
• Detected malware and DDOS attack
• During summer vacation, we found that there was a lot of
malware and DDOS in our server.
• So we could not trust windows server anymore.

28. Team NGX
- Setting socket.io and node.js
• We finished to setup socket.io and node.js
• Node.js can provide npm instructions
• So user can easily install our NGX Server
• User can install just two instructions
• npm install –save express
• npm install –save socket.io

29. Team NGX
- Setting socket.io and node.js
• If user want to run our server, there is easy instruction
• Just “node index” instruction can run our server
• We can check how more faster than previous
server(Windows)
• http://test.matthewlab.com/game : Test game
• http://test.matthewlab.com/c : NGX Controller

30. Using JavaScript
- Center circle
- Center line
- Goal area
- Goalpost
Team NGX
- Default layout(prototype)

31. Team NGX
- Game engine
KineticJS
- HTML Canvas JavaScript framework
- Almost free(except support of technology)
- Experience of use
- Using the game engine

32. Team NGX
- Game
Volleyball Air hockey
• similar elements
• way of movement, collision, score etc
• can reuse the last semester’s class
• need to restructure the class

33. Team NGX
- Problem
• Implementation to actual hockey game is
delayed
• graduation thesis, broke down the laptop ..., other
problems
à We must speed up for progressing our project

34. Team NGX
- Next to do
• Implementation to actual hockey game
quickly
• Add to npm library and make jQuery plugin

35. Team NGX
- 5th weekend 35
Ikhwan Chang(Presenter)
- Completed to make server
- Vaccine is added on our server
- Send to OSS Awards(오픈소스 공모대전), finally.
SangTae Lee Dongkyoung Jo
- - Set game rules clear and then these rules are applied previous project
- - Modify prototype UI and add both players and ball(s)

36. Schedule 36
We’re now
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Mid-term
Exam
UI / layo ut
class, transactio n Design
Server
Game
Demo
Architecturin g
Set-up Default Layo ut
research about
QR-Code
processing
Solve to minor
problem s
Sync w/clie nt
Sync w/serve r
Apply QR-Code
library to our game
implementation to
build QR-Code
image processing
Optimizin g
JS Library Optimizin g
1st Demo
Final Demo
Default Game
Appearanc e
packing JavaScript
Librar y
OSS Challenge
deadline(28th Sep)

37. Install to vaccine 37
- ClamAV is freeware for linux-based OS.
- Our server is based on Cent OS. So we installed ClamAV and added to daily schedule.

38. Presented to oss award 38
Demo video : http://www.youtube.com/watch?v=Vjxvz-ngwSA
Website : http://ngx.matthewlab.com
- Finally, our server-side programming was presented for open source software award, sending all
materials.
- We captured our demo video and upload all source code at github for open source.

39. Server Architecture(OSS Awards) 39

40. Device Detection(OSS Awards) 40

41. Site Remote Control(OSS Awards) 41

42. Air hockey rules 42
- There are two players
- If puck goal in the my section hole, the opposite
play get 1 point.
- A puck is on a host player's section at first.
It means a host player attacks first. but, in the next
game, the winner of previous game gets a right to
attack first.
- If a player get a 15 or 18 points, finally the player
win the game.
- Players cannot touch puck which is in opposite
player section.
- There is time limit to play game speedly.

43. Air hockey 43

44. What will we do next? 44
- The first evolution result will be noticed at 10/6.
- If we passed first evolution, then there is technical test during October. So, Ikwhan Chang will
focus on this technical test and other tests.
- And Sangtae Lee and Dongkyoung Jo will focus on make air hockey game for perfect
sample.

45. Team NGX
- 6th weekend 45
Ikhwan Chang
- ngx_qrctl.js is attached successfully in our Air Hockey Game
- Now we can get user’s touch x-y coordination in our game.
SangTae Lee(Presenter) Dongkyoung Jo
- Implementing Game part (animation effect, movement, collision)
- Design 2D collision equation yet applied to hockey game.

46. Schedule 46
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Mid-term
Exam
UI / layo ut
class, transactio n Design
Server
Game
Demo
Architecturin g
Set-up Default Layo ut
research about
QR-Code
processing
Solve to minor
problem s
Sync w/clie nt
Sync w/serve r
Apply QR-Code
library to our game
implementation to
build QR-Code
image processing
Optimizin g
JS Library Optimizin g
1st Demo
Final Demo
Default Game
Appearanc e
packing JavaScript
Librar y
OSS Challenge
deadline(28th Sep)
We’re now

47. Team NGX
- Game engine
KineticJS
- HTML Canvas JavaScript framework
- Almost free(except support of technology)
- Experience of use
- Using the game engine

48. Team NGX
- Game engine
• Kineticjs take a time-out for focusing on other endeavors
• It is going to service before long, but we cannot wait for
their service.

49. Team NGX
- Problem
• Implementation to actual hockey game is little
bit delayed
• We decide to make hockey game only using html5.
à have to learn html5 animation
• It needs to calculate velocity of user’s controller
• We already have a calculating collision function
à We must speed up for progressing our project

50. Air Hockey Game

51. Team NGX
- 7th weekend 51
Ikhwan Chang(Presenter)
- Tested to communication between client and server
- OSS Award: Failed
SangTae Lee Dongkyoung Jo
- Implementing Game part (animation effect, movement, collision)
- Design 2D collision equation yet applied to hockey game.

52. Schedule 52
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Mid-term
Exam
UI / layo ut
class, transactio n Design
Server
Game
Demo
Architecturin g
Set-up Default Layo ut
research about
QR-Code
processing
Solve to minor
problem s
Sync w/clie nt
Sync w/serve r
Apply QR-Code
library to our game
implementation to
build QR-Code
image processing
Optimizin g
JS Library Optimizin g
1st Demo
Final Demo
Default Game
Appearanc e
packing JavaScript
Librar y
OSS Challenge
deadline(28th Sep)
We’re now

53. Demo

54. Team NGX
- 9th weekend 54
Ikhwan Chang(Presenter)
- Redesign controller
- Add to chat function in server and client.
SangTae Lee Dongkyoung Jo
- Add to Score and Game Ending Message
- Tried to more smooth game
- Change ball from vector to image
- Add to sound effect

55. Schedule 55
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Mid-term
Exam
UI / layo ut
class, transactio n Design
Server
Game
Demo
Architecturin g
Set-up Default Layo ut
research about
QR-Code
processing
Solve to minor
problem s
Sync w/clie nt
Sync w/serve r
Apply QR-Code
library to our game
implementation to
build QR-Code
image processing
Optimizin g
JS Library Optimizin g
1st Demo
Final Demo
Default Game
Appearanc e
packing JavaScript
Librar y
OSS Challenge
deadline(28th Sep)
We’re now
Extra Game Controlle r
Sound Effect and Other
Effec ts

56. Team NGX
Problems from demonstration 56
1. There is not enough to adjust hockey game
rule(e.g. puck cannot move opposite area)
2. There is no sound effect(it means game is looks
like air hockey but not really)
3. Game is too simple
4. Game is too monotone(it is not enough to game
since there is no image)

57. Team NGX
Add to chat 57
[Player 1] : Hey what r u doing now?? NGX Controller
NGX AirHockey Game

58. Team NGX
Add to chat – source code 58
Ngx_qrctl.js NGX Server

59. Team NGX
- 10th weekend 59
Ikhwan Chang(Presenter)
- Fixed to server
- Changed whole design
SangTae Lee Dongkyoung Jo
- Joined in ROTC Training
- Since their main role is game logic, Ikwhan focused on game’s appearance
in this week
- Tried to find resources(sound, image)
- Add to sound

60. Schedule 60
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Mid-term
Exam
UI / layo ut
class, transactio n Design
Server
Game
Demo
Architecturin g
Set-up Default Layo ut
research about
QR-Code
processing
Solve to minor
problem s
Sync w/clie nt
Sync w/serve r
Apply QR-Code
library to our game
implementation to
build QR-Code
image processing
Optimizin g
JS Library Optimizin g
1st Demo
Final Demo
Default Game
Appearanc e
packing JavaScript
Librar y
OSS Challenge
deadline(28th Sep)
We’re now
Extra Game Controlle r
Sound Effect and Other
Effec ts

61. Team NGX
Change whole design 61
- Replaced puck, pin from vector to image(design by Ikwhan)
- Added to icy background image, relocated to score board

62. Team NGX
Add game control button in NGX controller 62
Add game sound
- Game starting sound
- Bump sound

63. Team NGX
- 11th weekend 63
Ikhwan Chang
- Optimize server
- Try to solve blinking images problem
SangTae Lee (Presenter) Dongkyoung Jo
- Optimize game appearances (focus on collision).
- Make ending point of game and enable to setting the point.
- Start to write final report.

64. Schedule 64
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Mid-term
Exam
UI / layo ut
class, transactio n Design
Server
Game
Demo
Architecturin g
Set-up Default Layo ut
research about
QR-Code
processing
Solve to minor
problem s
Sync w/clie nt
Sync w/serve r
Apply QR-Code
library to our game
implementation to
build QR-Code
image processing
Optimizin g
Effec ts Optimizin g
JS Library Optimizin g
1st Demo
Final Demo
Default Game
Appearanc e
packing JavaScript
Librar y
OSS Challenge
deadline(28th Sep)
We’re now
Extra Game Controlle r
Sound Effect and Other

65. Team NGX
There are some problems… 65
- Blinking images(puck and pin).
- When user control pin fast, it’s appearance is little strange.

66. Team NGX
Last week… 66
Add game control button in NGX controller
à Try to activate in the our game. But little bit delayed

67. Team NGX
67
This week….
- Enable setting ending sore in NGX controller
- Solve blinking problems
- Adjust game coordinate (when we redesign whole game
, cooridinate was changed )
- Optimize game logic continuously.

68. Schedule 68
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Mid-term
Exam
UI / layo ut
class, transactio n Design
Server
Game
Demo
Architecturin g
Set-up Default Layo ut
research about
QR-Code
processing
Solve to minor
problem s
Sync w/clie nt
Sync w/serve r
Apply QR-Code
library to our game
implementation to
build QR-Code
image processing
Optimizin g
Effec ts Optimizin g
JS Library Optimizin g
1st Demo
Final Repo rt
Default Game
Appearanc e
packing JavaScript
Librar y
OSS Challenge
deadline(28th Sep)
We’re now
Extra Game Controlle r
Sound Effect and Other

69. Team NGX
Team NGX
Air Hockey Web Game
(using ngxqrctl.js)
Team Mission
- Make new user experience in a web
- Make best web maintenance environment
- Share our source code within worldwide developers
Team Member Role(Revised)
69
Name Part
Ikwhan Chang NGX Web Server, QR Controller JavaScript Library
Sangtae Lee AirHockey Game Client
Dongkyoung Jo UI Design

70. Introduction
Project Name
• Responsive Air Hockey Web Game
What is this?
• Air Hockey Game based on Web
• Remote Controlling via QR Code
• Server is based on NGXRCS
(NGXRCS : NGX Remote Control
Server, our previous final production
which is notification-based web
server)

71. Goal Optimize
71
Server optimization
Google Cloud
Server(IaaS)
Ngxqrctl.js
Provide for
developer to our js
library(jQuery
Plugin)
Air Hockey
Game(Demo)
Provide our Air
Hockey Game for
demonstration(how
to use our
ngxqrctl.js)
1) optimize NGXRCS(NGX Remote Control Server) more smoother and faster.
2) make our NGXRCS via QR-code and Javascript Library(jQuery Plugin) : NGX
QR Controller, ngxqrctl.js
3) make simple responsive game based on HTML/JavaScript and ngxqrctl.js :
Air Hockey Game

72. Air hockey rules 72
- There are two players
- If puck goal in the my section hole, the opposite
play get 1 point.
- A puck is on a host player's section at first.
It means a host player attacks first. but, in the next
game, the winner of previous game gets a right to
attack first.
- If a player get a 15 or 18 points, finally the player
win the game.
- Players cannot touch puck which is in opposite
player section.
- There is time limit to play game speedly.

73. Modified – Server Env 73
Client #1
Server
Routing
... . . .
Push Data
(JSON)
Socket.io
(Push Server) Client #N
Push Data
(JSON)

74. Modified – Server Env 74
Client #1
Server
Routing
... . . .
Push Data
(JSON)
Socket.io
(Push Server) Client #N
Push Data
(JSON)

75. Modified – IaaS 75
After – Google Cloud
Before – Customized Server

76. Modified 76
Removed function
• Chatting : It is not useful
• KineticJS: Since KineticJS opensource project was closed, we could not
use this framework.

77. Problem 77
• O/S was changed(4th week)
• We provided web server from SK since we joined open source
award challenge but we could not use windows server since
there was license problem of Windows Server.
• So they provide only server based on Linux
• Moreover, we failed to challenge OSS award(So, SK planet
could not provide server anymore)
• = That’s why we move server from us to Google Cloud.

78. Problem 78
• Cannot use KineticJS
• Kineticjs take a time-out for focusing on other
endeavors
• It is going to service before long, but we cannot wait
for their service.

79. Before After 79
Modified Feature Before After
Server H/W Server provided by SK Google Cloud Platform
Server O/S Windows 2013 Server Enterprise R2 CentOS 7
Game – Appearance Using the image of puck and pin
Using the vector(SVG) of puck and
pin
Game Engine KineticJS Pure-HTML5 Canvas
Client – the function of
controller
Chatting Button control(Start/Pause/Resume)
Client – QR Code
Appearance
QR with inner status message
QR with color variation belong to the
status of user

80. Result 80
Game Intro
After user scanned qr-code

81. Result 81
Game Main

82. Result 82
• Game Controller
• MoveXY : User can control their puck using touch pad
• Game: User can set game score / User can pause/
resume that game.

83. Demo
http://github.com/MatthewLAB/NGX_PROJECT

84. To be implementation
Server Client
ngx_rcs.js
(plugin)
ngx_qrctl.js
(plugin)
Server : npm(kind of node.js ‘s package)
Client : jQuery Plugin
All they will provide with opensource(most of plugin already do that)

85. QA

86. thanks!