前言
我年假放得有點久…我有在反省了XD! 現在讓這個挑戰繼續下去吧!我這陣子在練習vue專案時有接觸到一個新的框架vuetify.js，說實在有點類似bootstrap+materialize.css綜合體。你可以隱約地看到兩者的影子融合在一起。像是text-center、或是icons的一些使用方式。大體上來說我還蠻喜歡的，過幾天我會把我做好的todo-list放上去!
現在說一下為什麼這次的專案我會完全不使用任何框架或是套件，主要的原因是在於接觸了那些框架與套件後我再次的自覺到，所有的框架或是套件畢竟還是基於HTML/CSS/JS，加強這些基礎對我來說只有好處~!雖然是挺花時間的，我試著用vanilla.js做出之前的draggable list，差點沒折騰死我XD。
總之，之後我可能也會多放幾個vanilla.js做出的作品，回頭來看這些東西還是挺有趣的!
專案說明
基本上就是個非常簡單的hangman遊戲，比較特別的部分在於利用svg去作出圖像的效果而非使用canvas。我們看一下那個部分的程式碼。
<svg class="img-container" height="250" width="200">
<!-- the hanger -->
<line x1="60" y1="20" x2="140" y2="20"></line>
<line x1="140" y1="20" x2="140" y2="50"></line>
<line x1="60" y1="20" x2="60" y2="230"></line>
<line x1="20" y1="230" x2="100" y2="230"></line>
<!-- Head -->
<circle cx="140" cy="70" r="20" class="body-parts"></circle>
<!-- Body -->
<line x1="140" y1="90" x2="140" y2="150" class="body-parts"></line>
<line x1="140" y1="110" x2="170" y2="90" class="body-parts"></line>
<line x1="140" y1="110" x2="110" y2="90" class="body-parts"></line>
<line x1="140" y1="150" x2="170" y2="210" class="body-parts"></line>
<line x1="140" y1="150" x2="110" y2="210" class="body-parts"></line>
</svg>
可以注意到svg裡面的line元素與circle元素的設計邏輯，原則上line需要一個起點跟終點，而circle則是需要圓心座標與半徑長度，最後在外層的container設定style就可以看到你設計的圖像囉。
// style.css
.img-container {
fill: transparent;
stroke: white;
stroke-width: 4px;
stroke-linecap: round;
}
專案預覽
專案連結
github:https://github.com/windate3411/hangman
github page:https://windate3411.github.io/hangman/
Danny的學習紀錄 