Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Capstone Project Final Presentation


Published on

Air Hockey Game with Google Cloud + NodeJS + NginX + + HTML5
you can see gitlab repository:

Published in: Engineering
  • Login to see the comments

  • Be the first to like this

Capstone Project Final Presentation

  1. 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. 2. INDEX • Team NGX • Introduction • How to Use • How to Play • Game Rule • System Architecture • System Environment • Schedule • Q&A 2
  3. 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. 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. 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. 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. 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. 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. 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. 10 How to Play? Air Hockey Web Game 2. scan QR-code via user’s smartphone
  11. 11. 11 How to Play? Air Hockey Web Game 3. Play!
  12. 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. 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