文章搬遷搬遷~~
因為自己弄了HEXO將來文章會放到那，這裡將停止更新，而文章也會慢慢更新到那裏去，歡迎大家來看與指教。 網址:https://donggualemon.github.io/
發表文章
第一次用Phaser.js做2D遊戲
因為參加F2E精神時光屋活動的直播讓我知道了Phaser.js，也讓我著手用來做了小遊戲。 Phaser2是利用Pixi.js為基底製作，而3是完全隔離出來的，而且蠻容易上手，我相信很適合做些小遊戲來玩玩。 官方連結 這次我做了一個外太空飛船閃躲障礙物的小遊戲。(感謝精神時光屋的UI設計投稿者) 閃躲障礙物透過鍵盤控制 假如受到物理碰撞死掉 非常簡單又上手的小遊戲 大家可以玩玩看，雖然沒有弄得更完整。 連結 而這篇文章大概算是紀錄而已，所以沒有詳細的教學，之後如果有時間或更深入研究在來寫教學文章。(然後做遊戲圖片超重要，希望人人都有設計師!!) 先去官方網站clone或用CDN引入lib~~ 然後建立個index.html吧，並在body部分引入所需的js <body> <div id="app"></div> <script src='./lib/phaser.min.js'></script> <script src='./js/index.js'></script> </body> 而div區塊的id是妳phaser.js config上設定來layout canvas的部分。 在我們的index.js來開始使用phaser吧 const config={ type: Phaser.AUTO,//type有Canvas and WebGL AUTO則是有WebGL就用WebGL width: 1200,//設定你要layout的寬度就像做canvas height: window.innerHeight,//設定高度 parent: 'app',//妳要layout區塊的id scene: [GameStart],//場景做變換或呈現所要用的 } const game = new Phaser.Game(config) //宣告遊戲物件 這樣妳就能看到有畫面啦~~一個黑色場景的canvas。 接下來我們要布置GameStart的場景。 const GameStart={ key:'Ga
線上使用Gitlab CI
最近因為要引入CI/CD所以研究了一下CI/CD，各種工具百百種 Travis CI Circle CI..... 不過因為公司用Gitlab做版控，所以研究好用又方便不用當輪子業者的線上Gitlab CI。 為了減省人力成本和時間，會使用自動化測試與部屬，而Gitlab就有內建CI/CD的功能，只要commit跟push之後便會自行進入CI流程，把執行結果告訴使用者看有沒有成功或測試時發生錯誤，來達到自動測試的功能，這篇只是粗淺的說一下，畢竟自己也是小菜雞做個筆記。 以下為小解說: 一開始我們在自己專案的地方增加一個檔案，建議在練習的時候可以把流程建在branch，這樣出問題比較好救(誤 須建立一個 .gitlab-ci.yml 的檔案讓系統知道這檔案拿來做CI的。 這時候底下就是用來寫CI的流程啦~~~~是不是很簡單(但寫起來很難QQ) 大概的形式長這個樣子，不過還是要看每個人的配置，上面只是粗淺的格式表達，可以去Gitlab官網查詢 按這裡。 寫完之後存起來我們就能到左邊的slid bar的CI/CD裡去看我們寫的配置。 可以看到狀態等等，而每次的commit push都會自動進入這個環節。 在job區可以看到運行流程與發生問題的地方，供使用者查詢與知會。 這就是個粗淺的Gitlab CI介紹啦~~還是有更深入的區塊，像是結合docker AWS等等還是很多複雜的東西，所以各位加油啦!!小弟要更深入研究，假如有開竅什麼在與大家分享。
EventBus用來呼叫兄弟組件。
我們可以透過props、emit來溝通父子元件，而event bus則是溝通同層組件，但由於太常使用會造成元件複雜化、維護困難，所以當專案龐大時還是請使用Vuex哦!! 那我們來看看怎麼用event bus吧~ 創建一個bus.js來當作橋梁，當要使用時再呼叫。 import Vue from 'vue' export default new Vue() 這樣我們就創造出了一個新的vue的實例。再我們需要的地方做引入。 import bus from './bus.js' 接著我們在要發送資訊或要呼叫事件的地方，做一個中樞廣播動作。 export default { methods: { doSomething: function() { bus.$emit('Event', { msg: 'Test.' }); } } } 在任何想要接收訊息的地方去做接收的動作。 created(){ bus.$on('Event',data=>{ this.myname=data; }) }, beforeDestroy: function() { // [銷毀監聽事件] // 最好在组件銷毀前，清除 Event 所有監聽 // 如果要指定哪個監聽對應方法，就需要傳入第二個參數(對應$on設定的方法) bus.$off('Event'); } 這樣就能在任何的元件中可以拿到想要的數據，但如果是父子元件則不建議使用。
PR(Partial Reconfiguration) AES&DES&TripleDES
專題結束啦~~而我的PR和kernel driver也已經順利完成，只是很 懶得更新 是太忙哈哈，而且步驟繁雜與困難，所以應該不會寫出大家有興趣可以找我討論一下。 放個流程圖。大概是醬PR則是在Block Design去做。
Vue Todo_List 小實作新增功能與發現問題
在上一篇的Todo_List完成了，編輯和刪除還有新增的功能，這次準備新增篩選的功能，有全部事項、已完成事項、未完成事項。 但在新增這些事項時發現一些問題，然後順利解決了所以就紀錄一下😀 有3個篩選的功能，所以必須多3個選取按鈕。 這裡就不多說啦就3個radio button。 直接進入怎麼篩選的程式嗎吧! <li v-for="(item,index) in filtertext" :key="item.uuid" :class="{finished:item.isFinished}"> 將原本in items改成filtertext，將要把filtertext放入computed做處理。 <input :checked="showall" :class="{show:showall}" click="show1" name="show" type="radio">全部 <input :checked="showend" :class="{show:showend}" click="show2" name="show" type="radio">已完成 <input :checked="showing" :class="{show:showing}" click="show3" name="show" type="radio">未完成 新增了3個radio button然後綁定checked這樣能獲取狀態。 computed:{ filtertext(){ if(this.showall==true){ return this.items; } if(this.showend==true){ return this.items.filt
Vue Todo_List 小實作
寫Vue一陣子了，但蠻少發文的所以來介紹一點小實作，經典又簡單的todolist，有輸入、刪除、編輯、已完成的功能。 主要學習點: V-for的使用。 資料的雙向、單向綁定。 V-if的簡單使用。 事件觸發的綁定。 那就先來做個樣板吧!! <template> <div id="app"> <input/> <ul> <li v-for="(item,index) in items" :key="index" :class="{finished:item.isFinished}"> <span>{{item.label}}</span> </ul> </div> </template> <script> export default { data () { return { items: [ { label: 'read books', isFinished: false }, { label: 'eat dinner', isFinished: true } ], } } } </script> <style> .finished { text-decoration: line-through; } </style> 這樣的樣子會呈現這樣，單純的輸入與一開始的內容。 透過V-for來列出我們物件裡面的資料，並透過V-bind綁定class並與style配合劃掉已完成的事項，非常簡單就做出單純的layout。接下來我們要輸入文字並添加事項囉! <input class="addtext" @keyup.enter=&