Web網頁製作 期末專題

Way to the Exit

獨立製作

PHP JavaScript HTML

在去出口的路上，幫幫機器人，他們就會幫你。

在你需要的時候，可以自由的存檔與讀檔。

注意，**破壞**是不被允許的。

請務必意識到你的**選擇**。

技術報告

作品理念/

總而言之是個做壞事會被發現的遊戲。

系統架構/

註冊、登入

密碼與暱稱修改

遊戲大廳

解謎關卡(翻翻看、畫布、計算機、問答)

存檔讀檔

過關留言板

資料庫/

為存取便利性只有會員與留言兩個表格

會員：帳號、密碼、暱稱、位置(永存與暫存)、闖關進度(永存與暫存)、破壞與否(永存與暫存)、破壞次數

留言：暱稱、時間、內容、破壞次數(調整顏色)

功能與內容/

素材：網路免費素材、字體(附於留言板之Special Thanks)

介面：使用CreateJS繪製Canvas為Stage

動畫：使用EaselJS之SpriteSheet API，判定精靈圖之元件長寬、間隔與幀數

操控：前端接收Keydown等動作，以Canvas上物件之x,y變化以做出移動效果

碰撞：前端偵測物件之間的位置與長寬關係以判定當下顯示之台詞與選項

關卡：半Canvas半HTML，結合過往功課內容(翻翻看、畫布、計算機)

場景：一旦場景變化，使用Ajax傳送必要資訊(位置、進度等)至後端存取位置紀錄

闖關：頁面載入時讀取資料庫裡的暫存進度，以判定該關卡是否已通過及出口開啟進度

存檔：將暫存欄位的資料存至永存欄位

讀檔：將永存欄位的資料覆蓋暫存欄位

破壞：獨立特殊欄位紀錄總次數並儲存警告留言

留言板：使用Ajax使頁面持續刷新