WebSocketとCanvasでオンライン対戦オセロを作ろう 第1回 基礎の基礎
Upcoming SlideShare
Loading in...5
×
 

WebSocketとCanvasでオンライン対戦オセロを作ろう 第1回 基礎の基礎

on

  • 2,973 views

WebSocketとCanvasをつかったオンライン対戦のオセロを作る企画

WebSocketとCanvasをつかったオンライン対戦のオセロを作る企画
第1回 基礎の基礎

Statistics

Views

Total Views
2,973
Views on SlideShare
2,494
Embed Views
479

Actions

Likes
3
Downloads
18
Comments
0

3 Embeds 479

http://d.hatena.ne.jp 477
https://twitter.com 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

WebSocketとCanvasでオンライン対戦オセロを作ろう 第1回 基礎の基礎 WebSocketとCanvasでオンライン対戦オセロを作ろう 第1回 基礎の基礎 Presentation Transcript

  • WebSocket Canvas - -
  • WebSocketCanvas
  • WebSocketCanvas View slide
  • WebSocket Push View slide
  • XHR Pull
  • WebSocket Push
  • WebSocket HelloWorld<!doctype html> var ws = require("websocket-server")<title>hello websocket</title> var server = ws.createServer();<input id="name" type="textfield" onchange="send(this);" /> server.addListener("connection", function(conn){<div id="msg"></div> conn.addListener("message", function(name){<script type="text/javascript"> server.broadcast("Hello " + name.toUpperCase());var conn; });(function() { }); if(window["WebSocket"]) { server.listen(8080); url = "ws://{ }:8080/"; conn = new WebSocket(url); conn.onmessage = function(e) { document.getElementById("msg").innerHTML = e.data; } }})();var send = function(m) { if(conn) { name = m.value; conn.send(name); }}</script>
  • WebSocket HTTPTCPURL scheme ws:/ wss:/ / / OK http://dev.ariel-networks.com/Members/inoue/websocket/
  • Canvasjavascript
  • Canvas HelloWorld <!doctype html> <title>Hello Canvas</title> <canvas id="canvas" width="300" height="200"></canvas> <script> var canvas = document.getElementById("canvas"); (function(){ var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.strokeRect(20, 20, 260, 160); ctx.beginPath(); ctx.fillStyle = rgb(188, 0, 45); ctx.arc(150, 100, 40, Math.PI*2, false); ctx.fill(); })(); </script>
  • Canvas3DVideo *1 *1: Video Canvas →http://www.craftymind.com/factory/html5video/CanvasVideo.html
  • WebSocketCanvas