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!