[Hero Of UnderGround 地下城] — 12F Puzzle 拼圖

發表於 更新於 分類於 ， ， 文章字數： 2.1k 所需閱讀時間 ≈ 2 分鐘

成果 & 程式碼

Demo： 傳送門

Code Source： 點我

Introduction & 前言

在前陣子得知 The F2E — 前端修練精神時光屋 之後剛好發現今年即將舉辦第二屆的切版大賽(？！)想想地下城好像還剩下幾樓，就想著看開賽前能完成多少是多少了，順便當練習。

這次拼圖有點免強做出來，原本打算再複習一下 Webpack 跟 Vue.js ，結果發現有些眉眉角角還需要修改呀。

12F大魔王 — 拼圖

Summary & 摘要

由於JS地下城每個BOSS的弱點都不一樣，每一層都要由弱點去進行攻略，本次BOSS的弱點有四項。

  1. 【特定技術】可用 JS 框架，當然你想用原生 JS，也是 ok 的。

  2. 【特定技術】在設計稿上，總計有三個介面。

  3. 【特定技術】前端之碑審核時，會特別注重「遊戲體驗」

  4. 【書寫能力】請寫篇部落格，描述你在做此關時，「所遇到的瓶頸，以及你是如何克服的」

關於畫面

其實到雙數樓層後，畫面一直都是基本要求，看了十個人就會有十個不同的切版方式，你還是需要找到自己最好用也最好明白的方式去切。

這次的拼圖對自己來說算是第一次嘗試實作的功能，所以就先到處爬爬文，整理完之後發現有兩條路可以走。

  1. HTML5 新增的 draggable

  2. 使用 addEventListener 去處理

個人是選擇前者去使用，因為基本會用到的功能都差不多有了，直接加在 HTML 的 Element 上即可。

今日主角 拖曳

前人種樹

這邊需要先感謝 HuiyuLiz 大神的文章，看完大神推薦的兩位大大神影片後其實這樓基本上都能解決了。

分別是 Drag & Drop With Vanilla JS

還有 鼻孔哥JS案例-拼图游戏

draggable 有什麼好料？

其實照著影片看完，先了解到你會用到的幾個 draggable 屬性就可以了。首先在你要拖曳的地方加上 draggable = true，然後加上下方的事件。

1
2
3
4
5
ondragstart --> 拖曳開始時發生
ondragover  --> 拖曳經過時發生
ondragleave --> 拖曳離開目標區域時發生
ondragend   --> 拖曳停止時發生(放開滑鼠)
ondrop      --> 拖曳停止時發生(放開滑鼠)

在HTML的DOM上直接加上去就不用再 addEventListener 一次，然後從最上面開始添加。

首先 ondragstart 抓起時我們必須讓原本殘留在原地的圖片消失，就必須加上 CSS disable:none ，但是這時候原本的圖片會直接消失，必須加上 setTimeout 來防止。

1
setTimeout(() => (e.target.className += " invisible"), 0);

接下來我們必須用到 ondragover 幫我們加上 hover 的效果，但是因為我們的 ondrop 事件會被 ondragover 事件不斷發生給卡住，所以這邊必須在 ondragover 事件裡面加上 e.preventDefault() 來防止事件不斷產生，然後可以再透過 ondragleave 事件來取消 hover 的樣式。

hover 事件

最後我們必須透過 ondrop 來判斷你丟的拼圖是不是正確位子，這邊我使用拼圖 ID 最後一個數字和拼圖格子上的 ID 最後一個數字來比對，正確就加上發光的 CSS 。

這邊還可以用 DataTransfer.setData() 的方式來傳遞 ID 值，不過在使用前我已經用陣列去判斷哪個地方已經完成了所以沒用到，不過算是又學了一個新的方法。

最後因為扔下拼圖的時候我必須去除掉 display:none 的 CSS 樣式，但是我把去除樣式寫在 ondrop 裡沒有反應，最後加在 ondragend 上才有反應，這邊還需要去研究一下為什麼會這樣。

Conclusion & 結論

這次拼圖關卡也拖了好久的時間，不過每次打王就會學到新的技能，這才是最重要的。( 雖然這次偷懶很多地方，要改的地方也很多…

最近總結一下自己學了一這陣子的程式發現不管學程式也好，學其他東西也是，都會在你剛開始的時候覺得自己學什麼都好快而且收穫滿滿，那個感覺也超棒，但是在一段時間後會發現自己突然卡住了，而且發現好多事情你突然發現不是那麼簡單，挫折感會挺重的。我想是因為剛開始什麼都不會，所以學什麼都快，但是因為碰到的都是基礎層面，所以一段時間後就會發現你了解的越多，你不懂的也越多。但是我們往往都是在感覺突破不了的時候突然突破了會發現自己成長好多，現在的自己就像是卡住一樣，我想是時候好好想想並規劃自己接下來該怎麼走了。

最後除了繼續努力之外還是要列出檢討的地方，然後希望 F2E 開賽前還有時間朝下一關繼續加油，完畢。

  • JS

  • 邏輯

  • 文筆

  • 體重

我的其他範例

  • Hero Of UnderGround — 地下層系列

    Demo & Blog：點我

Vue系列 —

  • [Vue Notes] — Vue-Cli #1 初次見面

    Blog：點我

CSS系列 —

  • [CSS Notes] — 談談CSS模組化

    Blog：點我

參考網站