用 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 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 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 播放器 此作品主要是練習 Youtube API 的運用,主要功能是利用 API 來操作播放清單以及播放參數的設定。 雖然這功能有點多此一舉..(Youtube 就可以做清單了),但是還是分享一下製作心得! 功能主要就是利用 Youtube 所提供的 API 再利用 Local Storage 紀錄播放清單,再利用 JavaScript 按鍵事件,…
天氣地圖 Weather Maps - OA Wu's Blog
天氣地圖 Weather Maps
天氣地圖 Weather Maps 這項做主要是藉由中央氣象局的網站資料建置出來的,其中主要功能是可以藉由 Google Maps 查詢各地方的天氣預報概況,並且可以查看各個地區的每小時溫度變化,以及搭配使用 localStorage 來實作前端關注的功能。此作品主要利用 PHP 取得資料,並且編譯成 HTML 檔案上傳 Amazon S3,此架構不僅可以減…
吳政賢個人簡歷OA WuLiveCoding.tw
OA Wu's Blog
開發心得
用 jQuery 做迷宮遊戲