iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

Vite 出小蜜蜂~和卡比一起玩網頁遊戲開發! 系列

卡比將要嘗試製作一款來自 `Taito` 的經典遊戲,
_Space Invaders 小蜜蜂_

本系列適合已具備程式基礎的朋友,
曾經學習過以下技能的朋友,非常適合閱讀本系列!

- Javascript / Typescript (ES6+)
- Modern Web Development (React / Vue / Angular ...etc)
- Canvas / WebGL / pixi.js

參賽天數 1 天 | 共 19 篇文章 | 29 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day0] Vite 出小蜜蜂~和卡比一起玩網頁遊戲開發!

Day0 動機 Motivation 80 年代對卡比來說是個很特別的年代, 那個年代的音樂、影視、電玩深深地影響了卡比, 特別是那個遊戲剛發跡的年代, 極客...

2021-09-01 ‧ 由 HelloKayac 分享
DAY 1

[Day1] Vite 出小蜜蜂~前置準備 + 用程式畫 Pixel Art!

Day1 Setup 前置準備 工欲善其事,必先利其器。 此節會先準備現代開發中不可或缺的一些工具, Environment 環境 NodeJS Yar...

2021-09-03 ‧ 由 HelloKayac 分享
DAY 1

[Day2] Vite 出小蜜蜂~動畫 Animation!

Day2 Animation 動畫 動畫在遊戲中扮演非常重要的角色, 當繪製的角色在螢幕上動起來時,就像是角色活起來一樣。 卡比接下來想要跟大家分享這份喜悅!...

2021-09-04 ‧ 由 HelloKayac 分享
DAY 1

[Day3] Vite 出小蜜蜂~ Game Loop!

Day3 軟體架構 這邊卡比要介紹一個名詞, Software Architecture 軟體架構。 軟體架構 旨在如何更好的處理各個程式碼段落之間的溝通, 雖...

2021-09-05 ‧ 由 HelloKayac 分享
DAY 1

[Day4] Vite 出小蜜蜂~ Input Control 操作系統!

Day4 接下來卡比要是著操作 LaserCannon,讓他可以左右移動。 Input 在上個章節,卡比介紹了 GameLoop。 示意用 while (tru...

2021-09-06 ‧ 由 HelloKayac 分享
DAY 1

[Day5] Vite 出小蜜蜂~ Component 元件!

Day5 寫程式寫到一定的階段後,會開始發現,其實做出想要的功能並不困難。 真正難的,其實是如何寫出有彈性的程式碼以應對各種需求跟變化。 卡比接下來要做的,是在...

2021-09-07 ‧ 由 HelloKayac 分享
DAY 1

[Day6] Vite 出小蜜蜂~ Scene 場景!

Day6 Scenes 在 Web 的領域裡,一個網站會有頁面,像是 Main Page, Login Page, Dashboard ... etc。 Gam...

2021-09-08 ‧ 由 HelloKayac 分享
DAY 1

[Day7] Vite 出小蜜蜂~Shoot 射擊系統!

Day7 Shoot 是時候幫我們的 LaserCannon 裝上子彈了! Input 首先,當玩家按下 Space 時要發射 Laser, 所以我們要在 In...

2021-09-09 ‧ 由 HelloKayac 分享
DAY 1

[Day8] Vite 出小蜜蜂~撞擊檢測 Collision Detection!

Day8 Collision Detection 接下來我們要讓 Laser 打中敵人時,將敵人消滅。 Laser 要有辦法偵測到目前打中誰, 所以需要一個新的...

2021-09-10 ‧ 由 HelloKayac 分享
DAY 1

[Day9] Vite 出小蜜蜂~撞擊行為 Collision Behavior!

Day9 Collision Behavior 當 Laser 跟 Squid 相互撞擊時, 我們想要將 Squid 從場上移除。 我們需要一個 event 讓...

2021-09-11 ‧ 由 HelloKayac 分享