Kotoba 和和字典

後端基於CI的框架實作了一個日語字典網站,前端則運用MUI CSS實現Material Design的風格。註冊只需要使用者名稱,登入後可以把單字加入最愛,並且可以根據需求自行分類。歡迎大家進來玩玩~用手機的話還可以利用iOS的「加入主畫面」功能、或Android的「新增至主螢幕」功能,將網站設為常用桌面捷徑。

資料來源: weblio辞書

Go to page

 

待更新項目:

  • 其他語言支援:英語、中文等
  • 更多個人化設定

バックエンドはCIに基づいてオンライン辞書を、フロントエンドはMUI CSSを基にしてMaterial Designを実装してみた。新規登録にUsernameだけ、登録したら、単語の管理や分類などをご自由に。よければ是非使ってみてください。携帯端末を利用する場合、iOSのSafari又はAndroidのChromeで「ホーム画面に追加」機能でショートカット作成することができる。

Hanabi

練習了JS對Canvas的操作,並且利用requestAnimationFrame以利瀏覽器以最大效能渲染煙火點。每一個產生的煙火約有500個煙火點,利用不斷堆疊的透明黑色,製造出殘影的效果。透過對煙火物件Property的改變,可以輕易達到改變顏色的效果。

在不同的參數設定下,意外產生出規律圖形。有一個如梅花般的效果,於是就保留下來了,有空會在新增更多的種類,並且為顏色做最佳化,有些色彩實在不像是煙火XD

玩法:

  1. 選擇煙火種類,可用鍵盤數字選擇
  2. 用滑鼠左鍵綻放你的天空

Go to page

 

待更新項目:

  • 將陸續增加煙火種類,並且預訂新增背景。

JapanEx 制縣傳說

第一次是在這篇IG貼文上看到,沒聽過的人可以參考這個 Android App,無奈我用的是iPhone不能玩,於是心血來潮用SVG自己做一個。先在Illustrator把日本的圖形畫好之後,每個形狀會帶入圖層名稱作為其ID的標籤,於是就可以在HTML裡被使用。多國語言有搭配Vue.js的Template做樣板,動態載入翻譯文字。

至於計分數的方法,考量到分享的用途,又不想大費周章使用資料庫,於是就索性全部塞在網址裡了XD 缺點就是網址變太長,有點醜就是了。

玩法:

  1. 按一下曾到訪過的地區,選擇符合的選項,朝向把47個都道府縣都收集滿的等級235吧!
  2. 可以分享到Facebook上,或者自行保存下來,還可以增加客製化的簽名檔喔。

Go to page

 

2018.05.30 更新:

  1. 縣名更正
  2. 所屬地區修正

Solar System

1969年阿姆斯壯搭乘美國阿波羅11號登陸月球,現在,你可以透過手機裡的瀏覽器,前往太陽系的每一個角落。點擊星球,就能夠飛往該行星,以當地視角,一覽不同的宇宙風光,顛覆你對世界的想像。針對地球,甚至看得到燈火通明的夜晚!我們不必成為太空人,就能上太空看地球。

利用了開學前的寒假,全力投入的結晶,研究Three.js的物體包覆,以及Camera 的使用,搭配Raycaster已獲取滑鼠在3D視圖中的座標向量所指到的目標等。資料方面則收集了來自NASA官網的行星資訊,從Planet Pixel Emporium下載到大量高品質的地圖素材等,練習使用Require.js,另外由於圖檔較大,在預載之後用到了Microcache.js來做緩存,並且自行寫了函式僅在當下星球使用高畫質圖檔,以減緩瀏覽器渲染的負擔,使畫面更為流暢。

將陸續新增各個行星的資訊頁面,以提供更多精彩的行星故事。

Go to page

Taiwan Bike Map

台灣近年來風行租借單車的服務,但是有礙於北部跟南部使用不同的租借系統,缺乏一個統一的入口可以查詢租借地點以及查看車位狀況,於是便動手寫了一個,結合Google Map API的定位系統,搭配後端使用CodeIgniter框架,以及到Open Data抓取腳踏車輛的地點座標等相關資料,並且為了使標記看起來不至於太擁擠,用了MarkerClusterer.js來做統整,可一目瞭然租借點的分佈。

點擊腳踏車站點,可看剩餘車位以及可借車數。用手機可以查看即時的現在地,以方便參考相對位置。地圖資訊每分鐘更新一次。

Go to page

涵蓋範圍

Youbike

  • 台北市
  • 新北市
  • 桃園市
  • 新竹市
  • 台中市
  • 彰化縣(尚未取得公開資料)

T-Bike

  • 台南市

CityBike

  • 高雄市