用 jQuery 做迷宮遊戲 此作品主要架構於 jQuery 之下實作,它不是一個前端 jQuery extend function,而是 based on jQuery 的前端迷宮遊戲,並且當使用智慧型手機瀏覽時,可支援使用重力感測器(G-sensor),所以可利用搖晃手機達到操作方向的簡單體感遊戲。 專案內有附一隻地圖產生器,可以提供各位自行編輯迷宮地圖路線,…

用 jQuery 做迷宮遊戲

此作品主要架構於 jQuery 之下實作,它不是一個前端 jQuery extend function,而是 based on jQuery 的前端迷宮遊戲,並且當使用智慧型手機瀏覽時,可支援使用重力感測器(G-sensor),所以可利用搖晃手機達到操作方向的簡單體感遊戲。

迷宮還有另外一項隱藏視角,就是當 Git 切換到 3D Branch 時,即可檢視 3D 介面的迷宮模式,此項是利用 css 的旋轉(transform、rotateX、rotateY、translateZ),將原本的每個節點元素各自新增出六個元素充當六個面,再分別調整每個元素內的各個面旋轉、位移角度

專案內有附一隻地圖產生器,可以提供各位自行編輯迷宮地圖路線,當地圖編輯完後按下 dump 後,複製陣列文字,並且貼至 res/index.js 內覆蓋 maze 陣列變數後,即可產生自己的地圖迷宮,由此可以得知整個地圖設計原理,是參考老鼠走迷宮的進階遊戲,在網頁上更可以利用 JavaScript 去監聽鍵盤 keydown 的按鍵以實作上、下、左、右的反應。

二維陣列製作的迷宮,參考老鼠走迷宮,在網頁上更可以利用 JavaScript 去監聽鍵盤 keydown 的按鍵以實作上、下、左、右的反應

迷宮還有另外一項隱藏視角,就是當 Git 切換到 3D Branch 時,即可檢視 3D 介面的迷宮模式,此項是利用 css 的旋轉(transform、rotateX、rotateY、translateZ),將原本的每個節點元素各自新增出六個元素充當六個面,再分別調整每個元素內的各個面旋轉、位移角度。

相關參考

實作 jQuery Navbar 套件 - OA Wu's Blog
實作 jQuery Navbar 套件
實作 jQuery Navbar 套件實作 jQuery Navbar 套件 這是一個前端 jQuery Extend Function,主要架構於 jQuery 以及 SCSS、SASS。開發者可自行設定 SCSS 變數、jQuery Extend Options 來更換樣式。 相關參考 Live Demo GitHub 原始碼
實作 Material Web Design - OA Wu's Blog
實作 Material Web Design
實作 Material Web Design實作 Material Web Design 這套前端工具主要是參考 Material UI 風格設計,並且這是一個藉由 Compass、HTML 以及 jQuery..等各種前端工具實作的 Material UI Design for Web,開發者可以自行使用 SCSS 或者 CSS 來做修改,目前是使用 jQuery 來達到更多 UI 回饋效果。 以下是基本的介紹: 此作品開發工具主要使用 Gulp、Co…
用 jQuery 實作 Youtube 播放器 - OA Wu's Blog
用 jQuery 實作 Youtube 播放器
用 jQuery 實作 Youtube 播放器用 jQuery 實作 Youtube 播放器 此作品主要是練習 Youtube API 的運用,主要功能是利用 API 來操作播放清單以及播放參數的設定。 雖然這功能有點多此一舉..(Youtube 就可以做清單了),但是還是分享一下製作心得! 功能主要就是利用 Youtube 所提供的 API 再利用 Local Storage 紀錄播放清單,再利用 JavaScript 按鍵事件,…
天氣地圖 Weather Maps - OA Wu's Blog
天氣地圖 Weather Maps
天氣地圖 Weather Maps天氣地圖 Weather Maps 這項做主要是藉由中央氣象局的網站資料建置出來的,其中主要功能是可以藉由 Google Maps 查詢各地方的天氣預報概況,並且可以查看各個地區的每小時溫度變化,以及搭配使用 localStorage 來實作前端關注的功能。此作品主要利用 PHP 取得資料,並且編譯成 HTML 檔案上傳 Amazon S3,此架構不僅可以減…
吳政賢 個人簡歷 OA Wu LiveCoding.tw