發表於 更新於 分類於 Disqus：

本作品大致製作完成，但在縮放視窗時，物件大小有誤；文章短期內不會更新。

這次的挑戰比較特別。
我看了這次直播的影片：《HTML5 Canvas 遊戲開發超入門#2》 X 《THE F2E 2nd》，覺得 Mike 老師介紹的 Phaser 遊戲框架很方便有趣，影片介紹也很詳盡，適合跟著做；所以嘗試用 Phaser 來製作這次的內容，也因此選了六角的設計稿。
雖然大部分是跟著直播影片做的，但因為直播介紹的跟設計稿的內容有點不同，所以我還是依據設計稿將細節調整過。

作品

Lynn 的 F2E 2nd 作品列表 / 第五關： 90 秒挑戰遊戲

閱讀全文 »

發表於 分類於 Disqus：

本作品更新的進度到刻完第一個版面。
短期內不會進行更新。

挑戰前兩關時都有遭遇到同樣的問題：

  • 對 JavaScript 不夠熟悉，為了查詢各種語法花費非常多時間。
  • 不熟悉用原生語法做 SPA ，對各種 DOM 元素開開關關感覺很冗長。
  • 寫文章時發現程式可以有更好的寫法，又回頭改程式，再改示意圖、截圖，來來回回寫不完。
  • 一邊惡補線上課程，作課程的作業，一邊做 F2E ，無法很專心在某個觀念。

被太多雜工拖慢進度之後感覺很疲乏，久了對於關卡也不那麼期待。
加上一直有想要趕快學 Vue.js ，幾番掙扎後決定把重心往 Vue 移動， F2E 則做到排版為止。
每篇挑戰文章會在最前面註記挑戰的進度。

作品

Lynn 的 F2E 2nd 作品列表 / 第三關： MP3 Player

閱讀全文 »

發表於 分類於 Disqus：

本文為觀看六角學院「JavaScript 入門篇 - 學徒的試煉」的筆記。
由於前半段章節為程式基本觀念，所以只會紀錄一些關鍵字。

本文使用不少 Codepen 嵌入區塊，瀏覽器可能會很卡，請讓它跑XD"

Visual Studio Code

使用 VScode 作為開發環境，其內建 JS 的 Emmet 。
如果希望撰寫 JavaScript 時能有 HTML 或其他語言的快捷效果，可以到 File > Preference > Setting > Extensions > Emmet > setting.json 中加上下面的設定：

1
2
3
4
5
6
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "vue-html": "html",
  "plaintext": "jade"
}

六角的介紹影片：VSCode 介紹 - 編譯 Sass、除錯、插件介紹

閱讀全文 »

發表於 分類於 Disqus：

昨天付款買了六角學院的「使用 HTML、CSS 開發一個網站」跟「掌握 Git & Github 程式時光機」，今天收到連結了很雀躍～
學員有專屬的社團，裡面還整理了各種階段文章跟討論，覺得很棒。
跟免費課程不同的地方是，HTML的課程旁邊可以開逐字稿，可以直接看逐字稿跳進度很方便！
畢竟之前全端的課已經寫了不少HTML跟CSS，有很多地方得跳過，但光只有影片的話，可能會跳過不該跳掉的細節，所以覺得這個功能很貼心ˊˇˋ

以下就繼續一邊看影片一邊寫筆記。

閱讀全文 »