文章

第一次用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:'Game', preload () {}, create() {}, …

線上使用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.filter(function(item,…

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="Enter" v-m…