# Proj. Fighting

<style>
/* 整個文檔 */
body {
font-family: Arial, sans-serif;
background-color: #F5F5F5; /* 背景色柔和淺灰 */
color: #8D58CC; /* 文字顏色深灰 */
margin: 0;
padding: 0;
}

/* 標題 */
h1, h2, h3, h4, h5, h6 {
color: #AB8CD0; /* 標題文字顏色深灰 */
}

/* 鏈接 */
a {
color: #c08cff; /* 鏈接顏色主調 */
text-decoration: none;
}

a:hover {
color: #DCBFFF;
text-decoration: underline; /* 鼠標懸停時顯示下劃線 */
}

/* 段落 */
p {
line-height: 1.5; /* 行高1.5倍 */
}

/* 按鈕 */
button, input[type="submit"], input[type="reset"] {
background-color: #DCBFFF; /* 按鈕背景色主調 */
color: #FFFFFF; /* 按鈕文字顏色白色 */
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}

button:hover, input[type="submit"]:hover, input[type="reset"]:hover {
background-color: #B899FF; /* 鼠標懸停時按鈕背景色變深 */
}

/* 區塊 */
.block {
background-color: #FFFFFF; /* 區塊背景色白色 */
border: 1px solid #DCBFFF; /* 區塊邊框顏色主調 */
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}

/* 列表 */
ul, ol {
margin: 0;
padding: 0;
}

li {
margin-bottom: 5px;
}

/* 表格 */
table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid #DCBFFF; /* 表格邊框顏色主調 */
padding: 8px;
text-align: left;
}

th {
background-color: #DCBFFF; /* 表頭背景色主調 */
color: #FFFFFF; /* 表頭文字顏色白色 */
}
</style>

>[color=#DCBFFF] Demo: https://yan-930521.github.io
Source Code: https://github.com/yan-930521/yan-930521.github.io
Folloe me on instagram: https://www.instagram.com/dev.tw.sakura/

## 目錄
[TOC]

## 主旨
>[color=#DCBFFF] 像素風格的2D格鬥遊戲
- 平台：電腦
- 類型：格鬥
- 特色：沒有特色
- 操作：鍵盤
- 風格：像素
- 目標：能玩

## 遊戲機制
### <font color="#DCBFFF">【按鍵控制】</font>
- w
跳躍，有二段跳，於特定毫秒後接受觸發
- a / d
向左移動 / 向右移動

### <font color="#DCBFFF">【技能列表】</font>
#### Sprint - 衝刺
>[color=#DCBFFF] 在120毫秒內，移動6次，每次移動10個像素的距離
- 拖曳著 黃 -> 綠 -> 藍 的殘影特效
- 移動期間，透明度下降

#### BlueFireBall - 幽藍爆炎
>[color=#DCBFFF] 續力一秒後，在100毫秒內，總共10次，每次都給火球一個0.5大小的力
- 藍色粒子特效

## 開發相關
### <font color="#DCBFFF">【軟體相關】</font>
- 網頁框架: [React](https://react.dev/)
- 物理引擎: [Matter.js](https://brm.io/matter-js/)
- 繪圖引擎: [Pixi.js](https://pixijs.com/)
- Document: [Link](https://github.com/yan-930521/yan-930521.github.io/blob/main//docs/modules.md)
- 檔案結構: [Link](https://github.com/yan-930521/yan-930521.github.io/blob/main//watch.md)