---
tags: 109-1, task
---

# 電機週遊戲

## Repo

- [2020 電機週遊戲 repo](https://github.com/NTUEEInfoDep/2020NTUEEWeekGame)

## Resources

- [An Example .io Game (repo)](https://github.com/vzhou842/example-.io-game?fbclid=IwAR061_dsMndxhigruwewlpbtMx48hR2NL29rsbB3CWoRuMR906lpXMPtfSg)
- [How to Build a Multiplayer (.io) Web Game, Part 1](https://victorzhou.com/blog/build-an-io-game-part-1/?fbclid=IwAR061_dsMndxhigruwewlpbtMx48hR2NL29rsbB3CWoRuMR906lpXMPtfSg)
- [How to Build a Multiplayer (.io) Web Game, Part 2](https://victorzhou.com/blog/build-an-io-game-part-2/)
- [2019 電機週遊戲 repo](https://github.com/NTUEEInfoDep/yEEtshen)

## 10/05

* 須知
* 沒有回合制
* 角色設定思考天能
*
* [x] 前後：發射無角度限制～
* [x] 前端：要有勝利、再來一次畫面
* [ ] 前端：選角色傳後端！
<!-- * [ ] -->
* [ ] 前、後：WASD控制視角
* [x] 前、後：QE控制發射角度
* [ ] 前、後：空白鍵控制力度（PIXI力量條）
<!-- * [ ] 後端：地圖資料 map-data.json -->
* [ ] 後端：地圖三個要隨機
* [ ] 後端：子彈冷卻期（平衡角色特性）
* [x] 後端：沒有移動限制

## 9/11 開會

### TODO：

- [x] 要大家在討論的時候一邊紀錄會議記錄 (可以講慢一點)
- [x] 決定要做啥遊戲
- [ ] 決定遊戲名稱
- [x] 創repo
- [x] 決定要用什麼畫圖套件 (預設PIXI)
- [x] 帶看code，教怎麼執行，可能要順便講一些語法例如socket, async, Promise，教PIXI？
- [x] 教解git conflict, branch, merge, rebase？(教觀念，EX：commit要小)
- [ ] 分配工作
- [ ] 沒來的自行看會議記錄，第一次部聚時補帶看code (可考慮帶全部的人一起看當作教學)

### 會議記錄：
#### 做啥遊戲：
總召：
1. 簡單闖關，1~3 min闖完關給他優惠卷
2. 1p1 pk，配對系統 (現場2~4台電腦)
3. 希望跟主題 tEnEt 的概念（倒轉）

可以開房間 and 隨機配對
也可以多對多，但現場要可以1對1

Candidate:
- [ ] 雙人打架（一直打，看誰先死掉）
- [ ] doodle jump
- [x] 彈彈堂 (丟東西遊戲，回合制)**

結論：
回合制丟東西遊戲（參考彈彈堂）

#### 遊戲名稱
Candidate:
- [ ] tEnET
- [ ] radar
- [ ] 乂煞氣a tEnEt a氣煞乂
- [ ] 猴子打架
- [ ] 乂tEnEt乂

#### new repo *2020NTUEEWeekGame*
* Check if you are in [this](https://github.com/orgs/NTUEEInfoDep/) github orgnization.
* 沒在裡面的話要講

#### 語法簡單教學

##### PIXI
Learning:
https://github.com/kittykatattack/learningPixi
Example:
https://pixijs.io/examples/#/demos-basic/container.js

##### Front, Back End Concept
* Front End：
* 負責畫出圖案、動畫、發出音效等
* 接收後端傳來的座標及其他資訊，畫出圖案和動畫
* 傳使用者操作(鍵盤或滑鼠)給後端
* 使用的語法是 import / export
* Back End：
* 負責處理遊戲的座標等主邏輯
* 接收來自前端的動作指令，計算座標並回傳給前端
* 處理網路連線等問題(例如配對系統)
* 使用的語法是 require / module.exports

##### Arrow function
* check out this [page](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

##### Socket

* check out this [page](https://socket.io/get-started/chat/)

##### Promise

* check out this [page](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise)

##### Async/Await

* [async](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/async_function)
* [await](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/await)

## 2020-09-18部聚討論

* [ ] 角色
* 4~6個
* 每回合左右移動，左右鍵
* 發射角度力道：
* 傳力道
* 傳角度
* [ ] 地圖
* [ ] 配對
* 指定（房間 socket room）
* shortid （套件)
* 隨機
* 後端遊戲邏輯 & 前端溝通

名字|分組|細項
:-:|:-:|:-:
呂以德|前端|
鐘郁翔|前端|
周軒羽|前端|
吳詩昀|前端|美宣
徐楷程|中端|
陳宏恩|後端|
林郁敏|後端|
楊登堡|後端|
楊宗賢|後端|

#### 預計完成事項

* [ ] 角色
* [ ] 名稱
* [ ] 樣式
* [ ] 屬性
* [ ] 地圖
* [ ] 圖片
* [ ] 房間
* [ ] 指定
* [ ] 隨機

#### 問題與討論

* [ ] 一間房間有多少玩家？

## 進度驗收
### 9/25 能玩的遊戲
詳細：
- 前端：
- 能夠顯示 (pixi) 後端傳入的遊戲資料
- 能夠將使用者輸入傳到後端
- 動畫、角色、地圖等等的美宣雛形
- 後端：
- 接收使用者輸入進行遊戲 (前端還沒刻完，先用模擬的)
- 回傳玩家、子彈座標
- 房間組測試

9/25

前端：
1. 畫地圖：呂，吳
2. 力道控制 方向控制：周
3. pixi render 遊戲畫面物件：鐘
4. 美化圖片：吳

後端：
1. player 四個角色多型：林
2. camera mode (跟隨角色)：陳
3. 角色移動的範圍，角色的傾斜角度：楊登堡
4. 串接：楊宗賢，徐

<h1 style="color:red">
死線： 10/18

電機週遊戲
即將大成功
</h1>

# 共筆移入區

>
> * After
> `git clone https://github.com/NTUEEInfoDep/2020NTUEEWeekGame`,
> `cd 2020NTUEEWeekGame`,
> run `npm install`
> * Go to [127.0.0.1:3000](http://localhost:3000)
> * Read about ESLint and Prettier
>
>
> ## 2020-09-20
>
> ### After `git clone`
>
> * Remember to `npm install` .
>
> ### ESLint
>
> * Check out its [website](https://eslint.org/) or
> * Some tutorials: [en](https://voidcanvas.com/brief-tutorial-on-eslint/) / [zh.1](https://ithelp.ithome.com.tw/articles/10213146) / [zh.2](https://wcc723.github.io/tool/2017/11/09/coding-style/) / [zh3](https://larrylu.blog/improve-code-quality-using-eslint-742cf1f384f1)
>
> ## 2020-09-18
>
> ### JavaScript
>
> * Arrow Function
> * 可以當 function input 的 handler
> ```
> function (a) {
> return a + 100;
> }
>
> (a) => {
> return a + 100;
> }
>
> (a) => a + 100;
>
> a => a + 100;
> ```
>
> ### PixiJS
>
> * **請注意**版本問題：目前最新版為第五版，範例所使用之第四版與其語法有差異
> * `PIXI.Container` 這個物件是一個群組的概念
> * throttle/debounce 自己查
>
> ### jQuery
>
> * `$(#sth)`跟`document.getElementById(sth)` 是一樣的東西呦～(the former is the syntax of jquery)
>
> ### SocketIO
>
> *
>
> ### shortid
>
> * check out this [page](https://www.npmjs.com/package/shortid)
>
> ## HTML
>