2018年10月31日 星期三

[DeTools] 金庸武俠世界裡的主要門派分布地圖



看到有人貼了一張金庸門派的地理位置圖,我就用 google map 也做了一個動態版的金庸武俠世界裡的主要門派分布地圖,建點的時候有參考原本那張圖,然後也有 google 一下小說的描述和位置,應該大致上是正確的,有缺或需要補的可以再跟我說。

Read more

2018年10月30日 星期二

使用 vis.js 建立時間軸



時間軸 UI 用過幾個,這次是想要一個可以作區間的但又不是像 full calendar 那麼複雜的介面,類似甘特圖的 UI,找來找去就找到這個 vis.js,但他不止能做時間軸,還可以做類似心智圖或其他圖表的功能,這邊先就時間軸來說明一下。

一樣將 js 跟 css 讀入後,像這樣使用就可以了。

  1. var container = document.getElementById('visualization');   
  2.   
  3.   // Create a DataSet (allows two way data-binding)   
  4.   var items = new vis.DataSet([   
  5.     {id: 1, content: 'item 1', start: '2013-04-20'},   
  6.     {id: 2, content: 'item 2', start: '2013-04-14'},   
  7.     {id: 3, content: 'item 3', start: '2013-04-18'},   
  8.     {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},   
  9.     {id: 5, content: 'item 5', start: '2013-04-25'},   
  10.     {id: 6, content: 'item 6', start: '2013-04-27'}   
  11.   ]);   
  12.   
  13.   // Configuration for the Timeline   
  14.   var options = {};   
  15.   
  16.   // Create a Timeline   
  17.   var timeline = new vis.Timeline(container, items, options);  

其中 content 是用來放要顯示的內容,有 start 跟 end 的話就會顯示一個區間,只有 start 的話就會顯示一個點,區間是包含時分秒的,也就是如果給到幾點幾分幾秒,會在時間軸上算到一個位置把點放上去。

option 那邊可以設定時間軸的樣子。

  1. var options = {   
  2.   width: '100%',   
  3.   height: '30px',   
  4.   margin: {   
  5.     item: 20   
  6.   }   
  7. };  

預設的時間軸是你上面有多少內容,他會一次顯示給你看,如果上面太多東西一次看到的範圍就會太大而且會包含已經發生過的事情,所以如果想要設定開始時間跟範圍的話,可以像這樣給一個 start 的值。
  1. var options = {   
  2.         start: yourtime,   
  3. };  

更多文件及設定資料可以看官方說明

我有把它用在 Pokemon GO 活動列表
Read more

2018年10月29日 星期一

2018年10月28日 星期日

鐵啞鈴社群日

因為第一次社群日很多地方伺服器塞爆出包,N 社破天荒辦了兩次鐵啞鈴的社群日,不過由於第一次我待的地方網路很順,加上這次給的彗星拳誠意十足,所以兩次加起抓了很多也抓的很開心。





總計抓了 16 隻色違。

IMG_8638IMG_8640IMG_8641IMG_8642IMG_8646IMG_8647IMG_8651IMG_8655IMG_8724IMG_8725IMG_8727IMG_8728IMG_8729IMG_8730IMG_8738IMG_8739

還有換到兩隻亮晶晶跟一隻 iv96 的。
IMG_8734IMG_8735

Read more

[Metal Robot 魂] ヒュッケバイン(凶鳥)

P1190428

以往一直 pass 的 Metal Robot 魂系列,這次看到ヒュッケバイン(凶鳥)就閃躲不能了,因為凶鳥是我剛踏入機戰時的主角機,也就是第四次機器人大戰時候的真實系主人公機體,當時其實也不大認識鋼彈和什麼機器人作品,只是因為主角一定不管在什麼路線都是跟著的,加上印象很深刻是在有一話叫榮光的落日那關,我的己方全掛當時就是靠凶鳥一對一幹掉鐸雷克戰艦而讓我愛上這架機體。

P1190437

P1190400P1190401
Metal Robot 魂顧名思義就是 Robot 魂的多了很多金屬材質版本,所以價位大概也貴了一倍,更討厭的都是魂商店販售,也就是還要忍受那個比一般網拍貴一倍以上的運費。
Read more

2018年10月26日 星期五

2018年10月25日 星期四

2018年10月24日 星期三

2018年10月21日 星期日

我的網路與社群紀錄(一)


從國中有電腦開始上網以來,紀錄一下幾個大階段的網路社群記事。

首先是高中時期的奇摩家族,當時應該很多人的班板都在上面,記得還有不少正妹圖可以看,我也成立了不少有的沒有的奇摩家族,只是時代有點久遠我也忘得差不多了。而奇摩家族也因為在 2011 左右關閉後,這些回憶也就慢慢消失了。

▼ 僅示意圖非我成立的家族,圖片來自 mobile01



再來是上大學後的 bbs 時代,大一的時候接觸 bbs 後就很喜歡他有個人板的設定,當時邊緣人的我就默默成立一個後開始狂用 ANSI 做圖,我也因為玩得太兇出了名在大二就當了系站的站長。

當時幾乎每個科系都會有一個 bbs 站,每個大學也都會有一個最大的主站,每個大站也或多或少會有些不一樣的地方,我當時就去幾個比較知名的站例如台大 PTT2、不良牛、星月繁星、中央二進位和我們中央大氣風氣雲湧等上一一成立個人板,記得其實應該有十幾個站但也是年代久了忘得差不多了,有了個人板加上 bbs 可以設定轉信的功能,也就是你在一個站發會同步到其他的站去,我就每開一個板就都設定同步轉信,當時就很享受這種有很多個人阪的感覺(?),到後來去參加 PTT 的進站畫面設計比賽還拿了第一名後,我就漸漸不做 bbs 的圖了,加上畢業後當兵時 bbs 的漸漸沒落,這些個板大概也就消失在歷史的洪流裡了。

▼ 當年 PTT 進站畫面第一名的作品,當時中央的二進位還有風起雲湧也都用這個進站畫面,應該算是我在做 bbs 的圖最得意的事蹟了。
2005


退伍後開始工作,正好是部落格的黃金年代,我從無名小站開始,到後來也是類似 bbs 的年代一樣我在各大 BSP 平台都有成立部落格,其他包含 PIXNET、樂多、天空部落、Xuite、Blogger和 FC2 等都可以看到我成立的部落格的蹤跡,當時貼文的方式是一個站貼一個主題,比如在 Xuite 貼些喜歡的音樂,在天空部落貼機器人的資訊,在 PIXNET 貼籃球的戰術...等,後來歷經無名小站的關閉以及我開始會寫程式了,這些部落格也就漸漸荒廢掉了,當然部落格會沒落的主要原因還是因為 FB 的崛起啦,相信現在會寫部落格的人越來越少了,我還是有在持續寫比如這個紅色死神部落格,但更喜歡的就變成寫網站了。


▼ 無名小站時期做了不少 CSS 的樣式,這是當時最多人喜歡的一款,而在無名小站關閉後我也將內容備份到無名紅色死神後且不在做後續的更新了。
onepiece

先寫到這邊,下一篇應該就要來講我這幾年做的最開心的事情了。
Read more

2018年10月20日 星期六

[超級英雄圖譜] 幻影天使(Elektra)

Elektra

艾麗卡從小就在兄長俄瑞斯忒斯的教導下學習武術。而在父親遇害後,她為了追求更強的力量而離開美國,並輾轉加入了手合會。艾麗卡在那裏學到了忍術、各種武術與暗殺技巧,各式冷兵器的造詣更達到了大師的地步,而她主要使用的武器是出自琉球的雙釵。

艾麗卡的體能可以媲美奧運選手,在力氣、敏捷、速度與反應上都達到了人類的巔峰。

為了更好的完成自己的刺殺行動,艾麗卡特地學習過了催眠與反催眠的技巧,加上她本身也有些許的心靈感應能力,這使她的精神意志極為強大,不會輕易受制於他人的精神控制。
Read more

2018年10月19日 星期五

[Pokémon-Info] 依世代區分圖鑑



因為四代開放,想說把之前弄的圖鑑改漂亮一點,所以把各世代獨立出來也把寶可夢的圖片顯示出來就完成了各世代區分的頁面,之後應該會在上面補上各種寶可夢取得的方式讓大家方便查詢。

所以就以第四世代來當範例吧。
Read more

2018年10月18日 星期四

解決 chrome 用 img 標籤讀入 svg 無法顯示的問題

有人問我為什麼他把 svg 用 img 的標籤讀入後會看不到,試了一下發現 chrome 才有這現象,查了一下發現應該是用 illustrator 外部嵌入檔案時轉存 svg 沒有設定好的問題,在轉存的時候像這樣設定就沒問題了。



不過應該很少人會遇到這個問題吧 XD,svg 應該還是用純向量就好了,嵌入外部檔案感覺怪怪的。
Read more

2018年10月16日 星期二

2018年10月15日 星期一

2018年10月14日 星期日

2018年10月13日 星期六

2018年10月12日 星期五

2018年10月10日 星期三

2018年10月9日 星期二

2018年10月8日 星期一

[jQuery plugin] 跑馬燈效果- jQuery.Marquee

想要用跑馬燈效果可以使用這一隻。

外掛網址: jQuery.Marquee

有 cdn 可以用
  1. <script src="//cdn.jsdelivr.net/npm/[email protected]/jquery.marquee.min.js" type="text/javascript"></script>  


一些設定
allowCss3Support Force the usage of jQuery's animate method even if the target browser supports CSS3 animations. Default: true
css3easing Works when allowCss3Support is set to true. See here for full list. Default: 'linear'
easing Requires the jQuery easing plugin. Default: 'linear'
delayBeforeStart Time in milliseconds before the marquee starts animating. Default: 1000
direction Direction towards which the marquee will animate 'left' / 'right' / 'up' / 'down'. Default: 'left'. Todo: need to change this to ltr/rtl etc
duplicated Should the marquee be duplicated to show an effect of continuous flow. Use this only when the text is shorter than the container. Default: false
duration Duration in milliseconds in which you want your element to travel. Default: 5000.
speed Speed will override duration. Speed allows you to set a relatively constant marquee speed regardless of the width of the containing element. Speed is measured in pixels per second.
gap Gap in pixels between the tickers. Will work only when the duplicated option is set to true. Default: 20. Note: 20 means 20px so no need to use '20px' as the value.
pauseOnHover Pause the marquee on hover. If the browser supports CSS3 and allowCss3Support is set to true this will be done using CSS3. Otherwise this will be done using the jQuery Pause plugin. Default: false. See demo page for example.
pauseOnCycle On cycle, pause the marquee for delayBeforeStart milliseconds.
startVisible The marquee will be visible from the start if set to true.


使用方法
  1. $('.marquee').marquee({   
  2.     //duration in milliseconds of the marquee   
  3.     duration: 15000,   
  4.     //gap in pixels between the tickers   
  5.     gap: 50,   
  6.     //time in milliseconds before the marquee will start animating   
  7.     delayBeforeStart: 0,   
  8.     //'left' or 'right'   
  9.     direction: 'left',   
  10.     //true or false - should the marquee be duplicated to show an effect of continues flow   
  11.     duplicated: true  
  12. });  
Read more

2018年10月7日 星期日

洛克人 11 全破心得



睽違很久的新洛克人,從官方釋出消息就開始期待,後來也在第一天就入手。






這次的導入了新的齒輪系統,按 L 鍵可以增強武器威力,按 R 鍵可以加速,不過加速就是周遭的東西變慢,這樣在敵人可以被攻擊的時候開威力增加可以更快打倒敵人,而加速的齒輪打開可以讓在過關或打王的時候比較容易跳或閃過陷阱。

武器方面再拿到特殊武器後,外觀也會改變,算是反致敬 exe 系列,這樣比起只是變色有趣多了,在拿到武器的過場動畫也做的都比以往精緻,動畫過了後還可以讓你測試這個新武器的使用方法。





我覺得在新世代還是有精緻的畫面才是正道,或是像馬力歐奧德賽那樣有些關卡會切換到復古風也可以,9 代跟 10 代變回 8 bit 真的不是很想玩。

難度部分應該是困難而且多了很多新花樣,像彈跳人那關的氣球比起 7 代的彈簧好玩很多,爆破人那關的炸彈陷阱也很有趣,我是為了想早點破關所以選了新手模式,有想挑戰的還有很多種的困難度可以選擇。

劇情上倒滿瞎的,一開始威利博士出現又把萊德的機器人一起都帶走,被打倒後也沒有新梗直接求饒,不過這次萊德博士好像是第一次到威利的城堡,過場動畫都是 3D 的動作也很細緻,都算是在洛克人上玩出新意。

總結來說對於我們洛克人迷來說能夠有新的八大魔王可以看可以玩就很滿足了,畫面上玩起來很開心,也滿希望舊的可以重製成現代風格的樣子,之前似乎有想嘗試但都只有元祖一代跟 X 一代有而已,不知道是不是銷量不好就沒有繼續做下去,也希望這款可以有不錯的銷量讓我們繼續玩到下一代的洛克人或洛克人 X 啊。

Read more

2018年10月6日 星期六

Related Posts Plugin for WordPress, Blogger...