手機螢幕不一定要用來'看'，也是絕佳的Gamepad。發揮第二螢幕的魔力！連結電腦螢幕或TV，創造另一種互動體驗；一個人的娛樂只不過用來打發時間，怎都比不上一團人的群樂。本議程將與大家共同探討運用 HTML5 與 Canvas 還有 WebSocket 打造多人 Sync 的連線遊戲體驗。

1. {
Your Phone is the Controller
with Multiplayer
JSDC 2013
吳宗德 (Aidan Wu)

4. Long, Long Time Ago

6. Connected TV

7. 192.168.0.168

8. + 192.168.0.168

9. + 192.168.0.168
+ ADDRESS

10. + 192.168.0.168
+ ADDRESS

11. + 192.168.0.168
+ ADDRESS

12. + 192.168.0.168
+ ADDRESS

14. WebSocket »

19. Your Phone is the Controller
mobile-­‐‑input-­‐‑multitouch
mobile-­‐‑input-­‐‑multitouch
mobile-­‐‑input-­‐‑multitouch
WebSocket Gateway
HTML5 Canvas
Simple Host Server

20. 1. LOGIC / RULE
2. GRAPHICS
3. INPUT
4. SOUND
5. MUSIC
6. CONNECT (MULTIPLAYER)
7. ASSETS
Anatomy of a
Game-­‐‑based APP

21. 1. Install?
Write once play anywhere
2. Graphics? Canvas & WebGL
3. Sounds? HTML5 audio
4. Communication? Multiplayer game server
5. Data? Web storage / Offline
6. Controls? Keyboard and touch
Why is HTML5 gaming
so cool?

22. Graphics
Communication
Input/
Control

23. CANVAS-­‐‑based UI
The Xerox 8010 Star Workstation
introduced the first commercial GUI

24. <CANVAS> element
Drawing paths, boxes, circles,
characters, and adding images,
on the fly, via scripting

25. Tile + Sprite

26. LAYERS

28. GAME LOOP
Polling vs Event driven

29. I
Input
Logic
OFF-­‐‑SCREEN
Display

30. DRAWING OFF-­‐‑SCREEN
backbuffer

31. Gamepad Generation

32. u Hammer.js
u Touchy.js
u QuoJS
Multi-­‐‑touch Gestures

34. MVC
M - Moving toward (continuous)"
V - Looking touchable"
C – Touch(Gesture)-aware

35. Data Communication

36. u RFC 6454 -­‐‑ The Web Origin Concept
u Same-­‐‑Origin Policy
u Cross-­‐‑Document Messaging
u PostMessage Architecture
u XMLHbpRequest Level 2
u Comet
u WebSockets
Connectivity and Real-­‐‑Time

37. WebSockets ?
Long-­‐‑polling /
COMET
Polling / AJAX

38. Bandwidth optimized
binary encoding for
JavaScript
BiSON.js

39. Building a Scalable
Game Server
• Scalable
• Extensible
• Performance

40. New Gaming Experience
on Big and Small Screens

41. Chrome World Wide Maze

42. Chrome Super Sync Sports

43. Q & A
Some issues you might
encounter