創作內容

6 GP

同步的畫布

作者：Hua│2014-11-01 15:57:26│巴幣：12│人氣：703

同步的畫布
- 隨意輸入一個暱稱, 線上玩家名稱會列在左方.
- 觸碰右方的白色區, 會以左上方的顏色畫隨機大小的圓(半徑0~10). 每個連上這個網頁的使用者共用同一個畫布, 每個人看到的畫布結果是一樣的, 也就是每個人畫的圓都會顯示在其他人畫布上.
- 點擊左上方的顏色顯示, 會清除右方的畫布. 全使用者的畫布都會被清除.
- 畫布的結果會儲存於server上.

概念:
後端使用firebase, 同步資料.

觸碰繪圖區時, 產生繪圖命令, 上傳firebase.
繪圖命令傳到firebase, 經由firebase廣播到同樣開啟此網頁的使用者.
每個使用者接到畫圓命令後, 才在畫布上畫圓. 由於每個人接到的命令順序是相同的, 因此看到的繪圖結果也是一樣的.

儲存於server上的並不是畫布結果本身, 而是一連串的繪圖命令, 這些繪圖命令執行完, 才還原出上次的畫布結果.
可以說是另一種"聊天室", 聊天室傳送的是文字訊息. 這個demo傳送的是繪圖指令.

更新:

2014/11/03: 新增線上玩家列表

喜歡 6 收藏 2 引用留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=2642368
All rights reserved. 版權所有，保留一切權利

相關創作

同標籤作品搜尋：畫布|連線|firebase

隨機選取聊天室

官方多人連線, photon, firebase與parse比較

在非常大的棋盤上移動 - 連線版

協同操作物件@聊天室

留言共 6 篇留言

方治：
神級(膜拜)!

11-01 17:06

Hua：
初始載入畫布內容的方式, 應該還可以再改良.

11-01 17:27

KO：
firebase 看起來好強大

11-01 23:52

Hua：
https://www.firebase.com/docs/web/examples.html11-02 00:13

Hua：
http://ezcomet.com/
之前台灣也有類似的服務, 可惜財務支撐不住, 就關了.11-02 09:25

Hua：
firebase的範例裡也有個canvas同步, 它是靠每個像素同步做出來的.

11-02 01:00

Hua：
不過它一次只畫數個像素, 以我的demo來看, 每一筆都要傳許多像素, 來回的資料傳輸量滿多的.11-02 13:32

Hua：
更新: 新增線上玩家列表

11-03 00:43

✿calmsad：
請問大大功能是關起來了嗎

10-19 13:52

Hua：
可能吧, 很久沒看了.10-19 17:50

我要留言提醒：您尚未登入，請先登入再留言

6 喜歡★rexrainbow 可決定是否刪除您的留言，請勿發表違反站規文字。

前一篇：Bubble shoot... 後一篇：在非常大的棋盤上移動...

追蹤私訊切換新版閱覽

作品資料夾

自我介紹 (1)

Phaser 3 (0)
└展示 (18)
└教學 (1)
└文件 (2)

Construct 2 (0)
└展示 (153)
└其他 (11)
└教學 (9)
└插件與文件 (5)
└成品 (8)

happy545 給你好~~：
如果我賣以前畫畫的作品有人會買嗎?我真的需要幫忙....看更多我要大聲說昨天07:22