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 篇文章 | 30 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day10] Vite 出小蜜蜂~Function Composition!

Day10 接下來,要幫 Squid 也裝上 Laser,敵人的 Laser 跟我們的外觀是不一樣的,但是卡比希望可以利用原本已經寫好的 Laser 函式,減少...

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

[Day11] Vite 出小蜜蜂~ Enemy!

Day11 延續上一回,我們嘗試了 Function Composition 的技巧,這次來試試看將同樣的技巧用於 Enemy。 這樣做的目的是,接下來要導入...

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

[Day12] Vite 出小蜜蜂~ Spawn!

Day12 Level Design 接下來我們要開始設計關卡,小蜜蜂的關卡很單純,但是背後的心理卻很深奧。 不過卡比目前只需要完成基本的就行了,也就是將 En...

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

[Day13] Vite 出小蜜蜂~Memory Leak & Optimization!

Day13 目前做到這邊的大家應該會發現一些問題,在上一個章節,雖然我們成功產生了很多敵人,但是程式卻發生了 Memory Leak。 這就是這個章節的主題,程...

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

[Day14] Vite 出小蜜蜂~ Game Logic - Sequential Movement!

Day14 在 Space Invaders 的遊戲設計中,Enemy 的移動邏輯扮演了非常重要的角色,他為遊戲提供了難度,並隨著玩家每次擊殺 Enemy 增加...

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

[Day15] Vite 出小蜜蜂~隨機射擊 Randomly Shoot!

Day15 在 Space Invaders 的遊戲設計中,除了隨著不斷前進而產生的壓迫感之外,Enemy 的射擊也扮演了相輔相成的作用。 他讓遊戲內容不只是單...

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

[Day16] Vite 出小蜜蜂~ Text 文字!

Day16 接下來,卡比想要先去做 介面 (HUD),方便我們進入到計分系統的時候,可以順便驗證分數。 首先,我們讓畫面能夠渲染 文字。 Text 首先我們要增...

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

[Day17] Vite 出小蜜蜂~ 介面 (HUD)!

Day17 開始做 介面 (HUD),接下來都是用之前有實作過的技巧! Render 因為要調整 Text 的位置,我們需要調整一下 render。 funct...

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

[Day18] Vite 出小蜜蜂~ 位置校正 Position Adjustment!

Day18 接下來再進到分數系統之前,卡比要先進行位置的校正,使我們更接近原作。 Enemy 首先我們需要校正 Enemy 的位置,我們將每個整個 Enemy...

2021-09-28 ‧ 由 HelloKayac 分享