programming language final ppt
TRANSCRIPT
PROGRAMMING LANGUAGE PROJECT
Team NullPointExceptionpresented by Ikwhan Chang
12/12/14
REMOTE SOCCER WEB GAME
INDEX• Team NullPointException
• Introduction
• How to Play?
• Game Rule
• Open Source
• How to Use?
• System Architecture
• System Environment
• Demo
• Q & A
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
INTRODUCTION• Project Name
• Remote Soccer Web Game
• What is this?
• soccer game based on web for peer-to-peer
• Remote controlling via QR-Code
1. connect our game’s website
HOW TO PLAY?
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?
HOW TO PLAY?3. Play!
player 1’s controller player 2’s controller
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
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
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>
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);});
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
SYSTEM ARCHITECTUREClient #1 Server
Routing
Socket.io (Push Server) Client #N
.!. . . . .
Push Data!(JSON)
Push Data!(JSON)
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
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
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
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
DEMO
Q & A
THANKS!