文章搬遷搬遷~~
因為自己弄了HEXO將來文章會放到那，這裡將停止更新，而文章也會慢慢更新到那裏去，歡迎大家來看與指教。 網址:https://donggualemon.github.io/
這個網誌中的熱門文章
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'); } 這樣就能在任何的元件中可以拿到想要的數據，但如果是父子元件則不建議使用。
文章搬遷搬遷~~
因為自己弄了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...
留言
張貼留言