釘子戶大戰拆遷隊

ChatGPT

下面先給你 v2.0 Core 可直接運行版。

這一版目標：

✅ 不需要 Node.js ✅ GitHub 上傳即可跑 ✅ Cloudflare Pages 可部署 ✅ Phaser 3 ✅ PVZ 類 5 路塔防 ✅ 卡牌系統 ✅ 冷卻時間 ✅ 民意值資源 ✅ 居民防守 ✅ 拆遷隊 AI ✅ 子彈攻擊 ✅ Boss 波次 ✅ 勝負判定

使用 Phaser 3 是因為它專注 HTML5 2D 遊戲，適合瀏覽器遊戲；Sprite 動畫、Scene、Game Object 都是內建能力。Phaser+1

---

目錄

建立：

dingzihou-defense-v2/

├── index.html
├── style.css
└── game.js

---

1. index.html

<!DOCTYPE html>
<html lang="zh-HK">

<head>

<meta charset="UTF-8">

<meta name="viewport"
content="width=device-width, initial-scale=1.0">


<title>
釘子戶大戰拆遷隊 v2.0
</title>


<link rel="stylesheet" href="style.css">


<script src="
https://cdn.jsdelivr.net/npm/phaser@3.90.0/dist/phaser.min.js">
</script>


</head>


<body>


<h1>
🏠 釘子戶大戰拆遷隊 🚜
</h1>


<div id="game"></div>


<script src="game.js"></script>


</body>

</html>

---

2. style.css

body{

margin:0;

background:#222;

font-family:
Microsoft JhengHei;

text-align:center;

color:white;

}


h1{

font-size:32px;

}


canvas{

border:

4px solid #fff;

border-radius:15px;

}

---

3. game.js

完整核心：

const config={


type:Phaser.AUTO,


width:1000,

height:650,


parent:"game",


backgroundColor:"#7ec8ff",



scene:{

create,

update

}


};


new Phaser.Game(config);



let money=200;

let houseHP=100;


let defenders=[];

let enemies=[];

let bullets=[];


let moneyText;

let hpText;


let cards=[];



const lanes=[

150,
240,
330,
420,
510

];



// =====================
// CREATE
// =====================


function create(){


this.add.text(
20,
20,
"🏠 丁家祖屋",
{
fontSize:"30px"
});



moneyText=
this.add.text(
20,
60,
"",
{
fontSize:"22px"
});


hpText=
this.add.text(
20,
95,
"",
{
fontSize:"22px"
});



//道路


lanes.forEach(y=>{


this.add.rectangle(

500,

y,

900,

60,

0xffffff

);


});



//房子


this.add.rectangle(

80,

330,

100,

400,

0x995522

);



createCards(this);



//敵人生成


this.time.addEvent({

delay:2500,

loop:true,

callback:()=>{

spawnEnemy(this);

}

});


updateUI();


}


// =====================
// CARD SYSTEM
// =====================


function createCards(scene){


let data=[


{
name:"👴老人",
cost:50,
type:"old"
},


{
name:"👦熊孩",
cost:100,
type:"kid"
},


{
name:"🐶狗",
cost:150,
type:"dog"
}



];


data.forEach((c,i)=>{


let card=

scene.add.text(

700+i*90,

80,

c.name+
"\n$"+c.cost,

{

fontSize:"18px",

backgroundColor:"#333",

padding:10

}

);


card.setInteractive();



card.on(

"pointerdown",

()=>{


if(money>=c.cost){


money-=c.cost;


spawnDefender(

scene,

c.type

);


}



});



});

}



// =====================
// DEFENDER
// =====================


function spawnDefender(scene,type){


let lane=

Phaser.Math.Between(
0,
4
);



let y=lanes[lane];



let emoji={

old:"👴",

kid:"👦",

dog:"🐶"

}[type];



let obj=

scene.add.text(

200,

y,

emoji,

{
fontSize:"45px"
}

);



defenders.push({

obj,

lane,

hp:100,

damage:1


});

}



// =====================
// ENEMY
// =====================


function spawnEnemy(scene){



let lane=

Phaser.Math.Between(
0,
4
);



let obj=

scene.add.text(

950,

lanes[lane],

"🚜",

{

fontSize:"50px"

});


enemies.push({

obj,

lane,

hp:100,

speed:0.03

});


}



// =====================
// BULLET
// =====================


function shoot(scene,d){



let b=

scene.add.text(

d.obj.x+40,

d.obj.y,

"💧",

{
fontSize:"25px"
}

);



bullets.push({

obj:b,

lane:d.lane,

damage:10

});

}


// =====================
// UPDATE
// =====================


function update(time,delta){



// 自動攻擊


defenders.forEach(d=>{


if(
time%1000<20
)

shoot(this,d);


});



// 子彈


bullets.forEach(b=>{


b.obj.x+=5;



enemies.forEach(e=>{


if(

b.lane==e.lane &&

Math.abs(
b.obj.x-e.obj.x
)<40

)

{


e.hp-=b.damage;


b.obj.destroy();


}


});

});



//敵人


enemies.forEach(e=>{


let blocked=false;


defenders.forEach(d=>{


if(

d.lane==e.lane &&

Math.abs(

e.obj.x-d.obj.x

)<50

){


blocked=true;


d.hp-=0.2;



}


});



if(!blocked)

{

e.obj.x-=e.speed*delta;

}



if(e.hp<=0)

{

money+=25;


e.obj.destroy();


}


if(
e.obj.x<80
)

{


houseHP--;


e.obj.destroy();


}



});



updateUI();


if(houseHP<=0)

{

alert(

"💥 祖屋被拆！遊戲失敗"

);


location.reload();

}


}



// =====================
// UI
// =====================


function updateUI(){


if(!moneyText)
return;



moneyText.setText(

"💰 民意值："+money

);


hpText.setText(

"🏠 祖屋："+houseHP+"%"

);


}

---

運行效果

現在已經有：

🚜
                ↓


🚜
----------------
👴        💧


🚜
----------------
👦        💧


🚜
----------------
🐶


🏠

玩法：

1. 點卡牌

2. 放居民

3. 居民自動攻擊

4. 拆遷車前進

5. 保護祖屋

---

GitHub 上線

直接：

git init

git add .

git commit -m "dingzihou v2"

git branch -M main

git remote add origin YOUR_REPO

git push -u origin main

Cloudflare Pages:

Framework:
None


Build command:
空白


Output:
/

---

下一階段 v2.1（推薦）

我會再加入：

真正 PVZ 等級：

🎴 卡牌

• 冷卻遮罩

• 卡牌灰化

• 拖曳放置

🎨 美術

生成：

assets/

background.png

oldman.png

worker.png

bulldozer.png

cards.png

🔊 音效

加入：

bgm.mp3
attack.wav
hit.wav
boss.wav

🤖 AI

加入：

• Cloudflare Workers AI

• AI 隨機生成拆遷隊

• 每日挑戰關卡

下一步可以直接生成 v2.1 完整 Sprite + Audio + GitHub Actions Cloudflare Pages 自動部署版。

User

網頁搜尋 生成 v2.1 完整 Sprite + Audio + GitHub Actions Cloudflare Pages 自動部署版

ChatGPT

我會把 v2.1 做成真正「可開源遊戲專案」結構，而不是單檔 Demo。

先說明設計：

• Sprite 使用 Phaser 3 spritesheet / texture atlas 系統，角色走路、攻擊、死亡都用 frame animation。Phaser 的動畫系統本身就是基於 Sprite Sheet Frame 播放。Phaser Docs

• 部署使用 GitHub Actions + Wrangler Pages Deploy，push 到 main 自動上 Cloudflare Pages。Cloudflare 官方提供 wrangler-action@v3 與 pages deploy 流程。GitHub+1

---

v2.1 專案結構

dingzihou-defense-v2.1/

├── index.html
├── style.css
├── game.js
├── config.js

├── assets/

│── sprites/
│   ├── oldman.png
│   ├── kid.png
│   ├── dog.png
│   ├── worker.png
│   ├── bulldozer.png
│   ├── boss.png
│   └── cards.png


│── audio/

│   ├── bgm.mp3
│   ├── click.wav
│   ├── shoot.wav
│   ├── hit.wav
│   ├── explosion.wav
│   └── boss.wav


├── .github/

│── workflows/

│   └── cloudflare-pages.yml


└── README.md

---

1. 美術 Sprite 設計

oldman.png

尺寸：

512 x 128

4 frame：

+---------+---------+---------+---------+
| idle    | walk    | attack  | hurt    |
+---------+---------+---------+---------+

Frame:

{
frameWidth:128,
frameHeight:128
}

---

worker.png

拆遷工：

512x128

動畫：

idle
walk
attack
dead

---

bulldozer.png

Boss：

1024x256

Frame:

normal
move
attack
destroy

---

2. AI 生成 PNG Prompt

可以用 Midjourney / SDXL / Flux：

老人

cute Chinese cartoon old man,
tower defense game character,
2010 flash game style,
big head small body,
funny expression,
holding wooden stick,
sprite sheet,
4 animation frames,
transparent background,
high quality 2D game asset

拆遷工

cartoon demolition worker,
Chinese construction helmet,
funny villain character,
tower defense enemy,
sprite sheet animation,
transparent PNG,
flash game style

Boss 推土機

cartoon bulldozer boss,
Chinese real estate developer theme,
funny evil expression,
tower defense game,
sprite sheet,
transparent background

---

3. game.js v2.1 核心

加入：

• Sprite

• Audio

• Animation

• Card cooldown

const config={

type:Phaser.AUTO,

width:1000,

height:650,


physics:{
default:"arcade"
},


scene:{

preload,
create,
update

}


};


new Phaser.Game(config);



let money=200;

let hp=100;


let defenders=[];

let enemies=[];



function preload(){


this.load.spritesheet(

"oldman",

"assets/sprites/oldman.png",

{
frameWidth:128,
frameHeight:128
}

);


this.load.spritesheet(

"worker",

"assets/sprites/worker.png",

{
frameWidth:128,
frameHeight:128
}

);



this.load.audio(

"bgm",

"assets/audio/bgm.mp3"

);


this.load.audio(

"shoot",

"assets/audio/shoot.wav"

);



}



function create(){


this.sound.play(
"bgm",
{
loop:true
}
);



this.anims.create({

key:"oldman-idle",

frames:

this.anims.generateFrameNumbers(

"oldman",

{
start:0,
end:3
}

),

frameRate:6,

repeat:-1

});



this.anims.create({

key:"worker-walk",

frames:

this.anims.generateFrameNumbers(

"worker",

{
start:0,
end:3
}

),

frameRate:8,

repeat:-1

});


}

---

4. 卡牌系統

新增：

const cards=[


{
name:"老人",
cost:50,
cooldown:5000,
sprite:"oldman"
},


{
name:"熊孩",
cost:100,
cooldown:8000,
sprite:"kid"
},


{
name:"看門狗",
cost:150,
cooldown:12000,
sprite:"dog"
}


];

---

5. 真正 PVZ 式 Cooldown

卡牌灰化：

function cooldown(card){


card.setAlpha(0.4);


setTimeout(()=>{


card.setAlpha(1);


},5000);


}

效果：

正常

[ 👴 ]

↓

使用

[ █████ ]

↓

完成

[ 👴 ]

---

6. 音效系統

class AudioManager{


constructor(scene){

this.scene=scene;

}



shoot(){

this.scene.sound.play(
"shoot"
);

}



hit(){

this.scene.sound.play(
"hit"
);

}



}

---

7. GitHub Actions

建立：

.github/workflows/cloudflare-pages.yml

內容：

name: Deploy Game


on:

 push:

  branches:
   - main



jobs:


deploy:


 runs-on:

  ubuntu-latest


 permissions:

  contents: read

  deployments: write



 steps:


 - uses:
    actions/checkout@v6



 - name:
    Cloudflare Pages Deploy


   uses:
    cloudflare/wrangler-action@v3


   with:


    apiToken:

     ${{ secrets.CLOUDFLARE_API_TOKEN }}


    accountId:

     ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}


    command:

     pages deploy . 
     --project-name=dingzihou-defense

GitHub

---

8. Cloudflare 設定

Pages Project：

Name:

dingzihou-defense


Build:

none


Output:

/

GitHub Secrets：

加入：

CLOUDFLARE_API_TOKEN

CLOUDFLARE_ACCOUNT_ID

---

9. README.md

# 🏠 釘子戶大戰拆遷隊


HTML5 Tower Defense Game


## Features


- Phaser 3
- Sprite Animation
- Card System
- Audio
- Boss Fight
- Cloudflare Pages


## Deploy


git push main


automatic deploy

---

v2.1 完成後遊戲流程

開場動畫

↓

選卡牌

↓

收集民意值

↓

部署居民


👴 👦 🐶


↓

拆遷隊 Wave 1


👷 👷 🚜


↓

Boss

🏢 地產商


↓

勝利解鎖新角色

---

下一步我建議做 v2.2：真正可玩的完整版：

加入：

1. 🖼️ 我幫你生成完整 20 張 PNG Sprite Prompt（可直接丟 AI 生圖）

2. 🎵 免費可商用音效來源整理

3. 🏆 30 關 Campaign 系統

4. 💾 LocalStorage 存檔

5. 📱 PWA 手機安裝版

6. 🤖 Cloudflare Workers AI 自動生成每日關卡

這樣就會接近一個真正可以放到 benhoweb.com/game 的商業小遊戲。

User

幫我生成完整 20 張 PNG Sprite Prompt

ChatGPT

我會按照 Phaser 3 v2.1 架構設計 Sprite，所有角色都採用 Sprite Sheet（透明 PNG），方便直接放入：

assets/sprites/

Phaser 3 的動畫就是基於 Sprite Sheet Frame 播放，因此每張 PNG 我會規劃固定 frame size，方便 generateFrameNumbers() 載入。Phaser Docs+1

美術方向：

2010 Flash 塔防懷舊 + 中國漫畫 + PVZ 卡通比例 + 香港舊樓元素

避免直接複製植物大戰殭屍，做成原創 IP。

---

統一 AI 生圖設定（所有 Prompt 加在最後）

以下每張圖都建議追加：

2D tower defense game asset,
cute cartoon style,
2010 flash browser game style,
Chinese comic humor,
big head small body,
clean black outline,
bright colors,
transparent background,
PNG sprite sheet,
game ready asset,
no text,
no watermark,
consistent character design,
orthographic front view

---

01. 遊戲背景

檔案：

background_city.png

尺寸：

1920x1080

Prompt：

Chinese old residential neighborhood,
Hong Kong urban village,
old apartment buildings,
construction area,
demolition trucks in distance,
funny cartoon tower defense background,
sunny day,
playful atmosphere,
layered game background,
2D side view

用途：

• 遊戲主場景

• 視差背景

---

02. 丁家祖屋

檔案：

house.png

尺寸：

256x512

Prompt：

old Chinese village house,
traditional tiled roof,
cute cartoon house character,
windows with funny face,
defensive building,
tower defense game object,
front view,
damaged and repaired versions,
sprite variations

動畫：

idle
damage1
damage2
destroy

---

03. 丁老爺子（坦克）

檔案：

oldman.png

Sprite:

8 frames
128x128/frame
1024x128

Prompt：

cute Chinese grandfather warrior,
white hair,
holding wooden walking stick,
angry funny expression,
defensive tower character,
walking animation,
attack animation,
hurt animation,
8 frame sprite sheet

Frames:

0 idle
1 idle
2 walk
3 walk
4 attack
5 attack
6 hurt
7 victory

---

04. 丁媽媽（資源生產）

檔案：

mother.png

Prompt：

cute Chinese housewife character,
middle aged woman,
holding cooking pot,
warm smile,
producing energy coins,
tower defense game unit,
animation sprite sheet,
8 frames

技能：

掉落民意值

---

05. 熊孩子（遠程）

檔案：

kid.png

Prompt：

funny Chinese child hero,
school kid,
wearing backpack,
shooting water gun,
cartoon tower defense character,
playful expression,
attack animation,
sprite sheet

---

06. 看門狗

檔案：

dog.png

Prompt：

cute Chinese village dog,
angry barking,
guard dog defender,
jump attack animation,
funny cartoon style,
tower defense unit,
sprite sheet

---

07. 鄰居大叔

檔案：

neighbor.png

用途：

後期解鎖角色

Prompt：

Chinese neighbor uncle,
holding frying pan,
funny angry face,
street fighter cartoon style,
tower defense hero,
sprite animation

---

08. 志願者大媽團

檔案：

grandma_team.png

Prompt：

group of Chinese elderly women,
holding banners and umbrellas,
funny protest team,
cartoon tower defense characters,
multiple animation frames,
sprite sheet

技能：

減速敵人

---

09. 普通拆遷工

檔案：

worker.png

尺寸：

128x128/frame
8 frames

Prompt：

cartoon demolition worker,
construction helmet,
orange vest,
holding hammer,
funny villain expression,
tower defense enemy,
walking animation,
attack animation,
sprite sheet

Frames:

walk
walk
attack
attack
hurt
dead

---

10. 電鑽隊

檔案：

drill_worker.png

Prompt：

cartoon demolition worker,
holding giant electric drill,
fast enemy character,
funny villain,
tower defense game enemy,
sprite sheet animation

能力：

快速移動

---

11. 搬磚工

檔案：

brick_worker.png

Prompt：

funny construction worker,
carrying bricks,
slow heavy enemy,
cartoon tower defense style,
sprite sheet

能力：

高血量

---

12. 推土機

檔案：

bulldozer.png

尺寸：

256x256

Prompt：

cute cartoon bulldozer,
construction machine enemy,
big angry eyes,
demolition theme,
tower defense boss unit,
multiple animation frames,
transparent PNG

---

13. 地產商 Boss

檔案：

developer_boss.png

Prompt：

funny Chinese real estate developer boss,
business suit,
holding contract papers,
evil cartoon smile,
tower defense boss character,
large character,
sprite animation

技能：

召喚拆遷隊

---

14. Boss 巨型推土機

檔案：

mega_bulldozer.png

Prompt：

giant cartoon bulldozer boss,
red eyes,
massive construction machine,
final boss,
tower defense game,
epic cartoon style,
sprite sheet

---

15. 子彈（水球）

檔案：

water_ball.png

Prompt：

cute blue water projectile,
cartoon game bullet,
glossy effect,
transparent PNG,
multiple animation frames

---

16. 爆炸效果

檔案：

explosion.png

Prompt：

cartoon explosion effect,
yellow orange smoke,
comic style,
game VFX sprite sheet,
transparent background,
8 frames animation

---

17. 民意值圖示

檔案：

public_support.png

Prompt：

cute heart and people icon,
public support meter,
cartoon UI game icon,
gold glowing effect,
transparent PNG

---

18. 卡牌 UI

檔案：

cards.png

Prompt：

tower defense game card interface,
Chinese cartoon style,
wooden frame,
cute fantasy UI,
empty card slots,
upgrade buttons,
transparent PNG

---

19. 金幣 / 資源

檔案：

coins.png

Prompt：

cartoon coins,
Chinese lucky coin design,
gold shiny,
game resource icon,
sprite animation,
transparent PNG

---

20. 勝利動畫

檔案：

victory_effect.png

Prompt：

cartoon celebration effect,
fireworks,
confetti,
happy villagers,
tower defense victory screen,
sprite animation,
transparent PNG

---

AI 生圖尺寸建議

類型	尺寸
人物	128x128/frame
大型 Boss	256x256/frame
背景	1920x1080
UI	512x512
特效	256x256

---

Sprite Sheet 命名規範

建議：

oldman_idle_01.png
oldman_walk_01.png
oldman_attack_01.png

worker_walk_01.png

boss_attack_01.png

方便未來改用：

• Phaser

• Spine

• DragonBones

• Aseprite

---

下一步我建議做 v2.2：

我可以繼續生成：

「20 張 Sprite 的 Aseprite Frame Layout + Phaser Animation JSON」

包括：

oldman.json
worker.json
boss.json
cards.json

直接：

this.load.atlas()
this.anims.createFromAseprite()

即可播放動畫。Phaser Docs

這一步完成後，《釘子戶大戰拆遷隊》就會從 Demo 變成真正遊戲製作流程。