[閒聊] 自製版~ 轉珠模擬器
看板ToS作者louisalflame (louisalflame)時間7年前 (2016/09/07 22:55)推噓139(139推 0噓 4→)留言143則, 136人參與討論串1/2 (看更多)
大家安安,隔了許久我終於又有進度惹
轉珠模擬器的網址:
http://louisalflame.github.io/TOSwebsite/canvas.html
......雖然這次的進度是負的(疑?)
好啦,其實這次的進度是~
我終於成功把他改寫成能在手機上使用惹!!
(至少可以在我的手機的safari上跑了~^^)
不過我幾乎是把code打掉重練
所以還沒寫到原本的進度QAQ
隊伍功能只剩下隊長隊友的隊長技,有關落珠消珠的部分
(不過原本的舊網頁我沒砍還留著就是了)
順便提一下
從頂端有連結可以到另一頁我做的卡片收集記錄表格喔
模擬器的使用方式,這次參照原版PAD定石網頁的流程
先按"版面"設定好屬珠顏色
再按"隊伍"可以設定特殊的隊長技
(目前先只放有影響的: 希臘、二消、巴比、古希)
按"移動"後,就可以開始模擬轉珠了
最後按"重播"可以檢查轉珠結果 和 分享連結
--------------------以下是CODING牢騷--------------------
原本我的JS程式都是依靠jquery的library
之前的轉珠效果是用jquery-UI內建的drag-drop程式
將6*5 table內的屬珠img做出drag和效果
為了解決手機也可以模擬轉珠的效果
我一開始查jquery都查不到怎麼做手機支援的drag-drop
後來我只好去偷看一下原版PAD定石是怎麼做的wwwwww
發現他是把版面設為canvas,再畫出6*5個屬珠
好啦我就把我的table和img的架構砍掉
學他一樣用canvas自己慢慢畫6*5個屬珠image
一開始我還很天真的繼續用jquery內建的jcanvas
後來發現不管怎麼設定
jcanvas的圖層依然不能在手機上drag-drop ...\囧/
完蛋啦,最後我只好心一橫...
再從頭開始,從最底層看PAD定石的網頁是怎麼寫的...
這才發現我之前都想錯啦啦啦QAQ
拖拉屬珠的效果根本就不是甚麼drag-drop
而是他每一幀frame都自己刻出來畫
不斷偵測mouse位置才去在canvas上畫相對應的屬珠
所以最後就是要自己從頭刻一個canvas animate啊啊啊
結果花了大半時間就是把之前寫好的程式
用更底層的方式去重寫一遍QAQ....
--------------------------------------------------------
如果有用的話
希望可以盡量推文給我鼓勵喔 > w < /
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.39.171.14
※ 文章網址: https://www.ptt.cc/bbs/ToS/M.1473260158.A.9E8.html
推
09/07 22:57, , 1F
09/07 22:57, 1F
→
09/07 22:58, , 2F
09/07 22:58, 2F
推
09/07 22:58, , 3F
09/07 22:58, 3F
推
09/07 22:59, , 4F
09/07 22:59, 4F
推
09/07 22:59, , 5F
09/07 22:59, 5F
推
09/07 22:59, , 6F
09/07 22:59, 6F
推
09/07 23:01, , 7F
09/07 23:01, 7F
推
09/07 23:01, , 8F
09/07 23:01, 8F
推
09/07 23:02, , 9F
09/07 23:02, 9F
推
09/07 23:05, , 10F
09/07 23:05, 10F
推
09/07 23:06, , 11F
09/07 23:06, 11F
推
09/07 23:08, , 12F
09/07 23:08, 12F
推
09/07 23:08, , 13F
09/07 23:08, 13F
推
09/07 23:09, , 14F
09/07 23:09, 14F
推
09/07 23:09, , 15F
09/07 23:09, 15F
推
09/07 23:10, , 16F
09/07 23:10, 16F
推
09/07 23:11, , 17F
09/07 23:11, 17F
推
09/07 23:12, , 18F
09/07 23:12, 18F
推
09/07 23:14, , 19F
09/07 23:14, 19F
推
09/07 23:15, , 20F
09/07 23:15, 20F
推
09/07 23:17, , 21F
09/07 23:17, 21F
這是為了預備留位子給主動技等功能才這樣設計的
不過目前中間四個的確是沒有用到就是惹www
推
09/07 23:18, , 22F
09/07 23:18, 22F
推
09/07 23:18, , 23F
09/07 23:18, 23F
推
09/07 23:18, , 24F
09/07 23:18, 24F
推
09/07 23:20, , 25F
09/07 23:20, 25F
推
09/07 23:21, , 26F
09/07 23:21, 26F
推
09/07 23:21, , 27F
09/07 23:21, 27F
推
09/07 23:23, , 28F
09/07 23:23, 28F
※ 編輯: louisalflame (114.39.171.14), 09/07/2016 23:28:32
推
09/07 23:27, , 29F
09/07 23:27, 29F
推
09/07 23:28, , 30F
09/07 23:28, 30F
推
09/07 23:32, , 31F
09/07 23:32, 31F
推
09/07 23:32, , 32F
09/07 23:32, 32F
推
09/07 23:35, , 33F
09/07 23:35, 33F
推
09/07 23:37, , 34F
09/07 23:37, 34F
推
09/07 23:38, , 35F
09/07 23:38, 35F
推
09/07 23:39, , 36F
09/07 23:39, 36F
推
09/07 23:40, , 37F
09/07 23:40, 37F
還有 66 則推文
推
09/08 08:29, , 104F
09/08 08:29, 104F
推
09/08 08:42, , 105F
09/08 08:42, 105F
推
09/08 08:47, , 106F
09/08 08:47, 106F
推
09/08 09:13, , 107F
09/08 09:13, 107F
推
09/08 09:31, , 108F
09/08 09:31, 108F
推
09/08 09:33, , 109F
09/08 09:33, 109F
推
09/08 09:42, , 110F
09/08 09:42, 110F
推
09/08 10:15, , 111F
09/08 10:15, 111F
推
09/08 10:17, , 112F
09/08 10:17, 112F
推
09/08 10:48, , 113F
09/08 10:48, 113F
推
09/08 10:51, , 114F
09/08 10:51, 114F
推
09/08 10:54, , 115F
09/08 10:54, 115F
推
09/08 11:03, , 116F
09/08 11:03, 116F
推
09/08 11:55, , 117F
09/08 11:55, 117F
推
09/08 12:08, , 118F
09/08 12:08, 118F
推
09/08 12:14, , 119F
09/08 12:14, 119F
推
09/08 13:07, , 120F
09/08 13:07, 120F
推
09/08 13:11, , 121F
09/08 13:11, 121F
推
09/08 13:55, , 122F
09/08 13:55, 122F
推
09/08 14:05, , 123F
09/08 14:05, 123F
推
09/08 14:11, , 124F
09/08 14:11, 124F
推
09/08 14:44, , 125F
09/08 14:44, 125F
推
09/08 14:51, , 126F
09/08 14:51, 126F
推
09/08 14:53, , 127F
09/08 14:53, 127F
推
09/08 15:20, , 128F
09/08 15:20, 128F
推
09/08 15:54, , 129F
09/08 15:54, 129F
推
09/08 16:38, , 130F
09/08 16:38, 130F
推
09/08 16:41, , 131F
09/08 16:41, 131F
推
09/08 16:43, , 132F
09/08 16:43, 132F
推
09/08 17:14, , 133F
09/08 17:14, 133F
推
09/08 17:51, , 134F
09/08 17:51, 134F
推
09/08 18:31, , 135F
09/08 18:31, 135F
推
09/08 20:15, , 136F
09/08 20:15, 136F
→
09/08 20:15, , 137F
09/08 20:15, 137F
推
09/08 20:27, , 138F
09/08 20:27, 138F
推
09/08 20:58, , 139F
09/08 20:58, 139F
推
09/08 21:59, , 140F
09/08 21:59, 140F
推
09/08 22:05, , 141F
09/08 22:05, 141F
推
09/09 01:42, , 142F
09/09 01:42, 142F
推
09/09 10:59, , 143F
09/09 10:59, 143F
討論串 (同標題文章)