Programming Language Final PPT
-
Upload
ikwhan-chang -
Category
Engineering
-
view
94 -
download
5
Transcript of Programming Language Final PPT
![Page 1: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/1.jpg)
PROGRAMMING LANGUAGE PROJECT
Team NullPointExceptionpresented by Ikwhan Chang
12/12/14
REMOTE SOCCER WEB GAME
![Page 2: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/2.jpg)
INDEX• Team NullPointException
• Introduction
• How to Play?
• Game Rule
• Open Source
• How to Use?
• System Architecture
• System Environment
• Demo
• Q & A
![Page 3: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/3.jpg)
TEAM NullPointException• Team Name : NullPointException
• Team Mission
• Make new experience in a web
• Make no-error program in JavaScript
• Team Member & Role
Name St.No PartIkwhan Chang 20060957 Project Manager, Server-sided programmingJinwoo Park 20091487 System Design, UXSanghu Han 20091551 Game Client ProgrammingHwan Lim 20091527 Game Client ProgrammingMyoungHwan Gong 20091451 Encryption, Packet Design
![Page 4: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/4.jpg)
INTRODUCTION• Project Name
• Remote Soccer Web Game
• What is this?
• soccer game based on web for peer-to-peer
• Remote controlling via QR-Code
![Page 5: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/5.jpg)
1. connect our game’s website
HOW TO PLAY?
![Page 6: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/6.jpg)
2. scan QR-Code via each user’s smartphone
user can join our game via QR-Code
QR Controller
Move user’s site to controller
HOW TO PLAY?
![Page 7: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/7.jpg)
HOW TO PLAY?3. Play!
player 1’s controller player 2’s controller
![Page 8: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/8.jpg)
GAME RULE•Two players, One ball
•each side has their own goal post
•ball can move inside rectangle area.
•Available action
•Moving : any coordinated by x-y
•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
•Score limitation : it’s random or user can select before game start
![Page 9: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/9.jpg)
OPEN SOURCE
•Any developer who want to use our qr-controller can easily use our npe-qrctl.js library
•npe-qrctl.js is a javascript library based on jQuery.
•http://git.matthewlab.com/root/remote-web-airhockey/tree/master
![Page 10: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/10.jpg)
Install our JS library
1) Add HTML element for showing qr-code
2) Include the ngxqrctl script in developer’s site
HOW TO USE?
<div id=”ngx-container”></div>
<script src="/path/to/ngxqrctl.min.js"></script>
![Page 11: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/11.jpg)
Install our JS library
3) Initialize with JavaScript
4) Bind to Event
HOW TO USE?
$("#ngx_area2").ngxQrCtl({ 'position': 'top', 'width': 200, 'height': 200, 'label':'player 2', 'debug': true});
$('#ngx_area1').bind('move', function (event, x, y) { if (isStart == 1) $.relateLocation(0, x, y);});
![Page 12: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/12.jpg)
PRACTICAL TO USE
•This is some practical case of matthewlab.com (Ikwhan’s personal website)
•Any website that consisted of HTML can use our QR-code library
•Server is provided by Google Cloud
![Page 13: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/13.jpg)
SYSTEM ARCHITECTUREClient #1 Server
Routing
Socket.io (Push Server) Client #N
.!. . . . .
Push Data!(JSON)
Push Data!(JSON)
![Page 14: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/14.jpg)
SYSTEM ENVIRONMENT
Server
NginX(Route)
Node.JS(HTTP)Controller(Client)
Socket.io
Server : CentOS 7
Socket.io(Web Socket)
Express.io + Jade(Template Engine)jQuery
jQuery Mobile(Event)
Air Hockey Game
Socket.io
jQuery
HTML5 Canvas
KineticJS
![Page 15: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/15.jpg)
WEB SOCKET(SOCKET.IO)
•Traditionally, if developer want to use the real-time communication between client and server, there is just few synchronized option.
•WebSocket is synchronized options and it is more convenience than simple Ajax communication
C/SCommunication
Our Platform
![Page 16: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/16.jpg)
HTML5 & ADOBE EDGE
•Since we made our game using HTML5, any web browser can run our game even iPad or Android Browser.
•Adobe Edge can make our game rapidly, especially CSS3 transition animation.
Adobe Edge
![Page 17: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/17.jpg)
PROS & CONS•PROS
•1) The developer can use our qr-code in any website
•2) Rapid responsive speed
•3) Multiplatform(our main platform is HTML5!)
•CONS
•1) Game is too simple UI and functions(just move..)
•2) Looks like not a football game(we tried to make soccer game but it looks like
air hockey game..)
•3) There is just two player, not multiplay
![Page 18: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/18.jpg)
DEMO
![Page 19: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/19.jpg)
Q & A
![Page 20: Programming Language Final PPT](https://reader035.fdocuments.us/reader035/viewer/2022062220/55a42e121a28ab5e5c8b482a/html5/thumbnails/20.jpg)
THANKS!