---
# System prepended metadata

title: 第二週小組任務
tags: [JS 直播班 - 2021 秋季班]

---

---
tags: JS 直播班 - 2021 秋季班
---
# 第二週小組任務


:::success
### 小組討論

- 本週討論時間：10/20 (三) 20:00 -21:00
- 討論連結：[會議連結](https://meet.google.com/oap-vedx-ptt)
- 討論白板：[第二週討論區](https://whimsical.com/7VCBqfKufrhnrQ75rkgzWY)
- :::spoiler **組員參與名單**
    | 組員 |
    | -------- | 
    | Joy Cheng |
    | Aaron Tu |
    | Alvin |
    | Sam |
    | Debbie |
    | Kin Hei Shing |
    | Yumi |
    
    :::
- [討論紀錄](#線上討論截圖)

:::



## 問題
### 第一題 繪製與討論剪刀石頭布的邏輯

使用 [whimsical](https://whimsical.com/) 工具繪製剪刀石頭布的邏輯，回報時，請提供 whimsical 公開連結給助教檢視。助教會觀察您的邏輯是否都有滿足各種條件。

例如：
* 玩家 A 出剪刀：玩家 B 出石頭 = A 玩家輸
* 玩家 A 出剪刀：玩家 B 出布 = A 玩家贏
* 玩家 A 出剪刀：玩家 B 出剪刀 = 平手
* 玩家 A 出布：玩家 B 出布 = 平手

> 答：[**流程圖連結**](https://whimsical.com/7VCBqfKufrhnrQ75rkgzWY)

## 主線任務討論區
| Name   | Codepen網址 |
| ------ | ------- |
| Joy Cheng | [codepen](https://codepen.io/joycheng5432/pen/gOxaZog) |
| Aaron Tu | [codepen](https://codepen.io/aarontu/pen/LYjpYyg) |
| Han | [codepen](https://codepen.io/PeiHan/pen/PoKPzXZ) |
| Alvin | [codepen](https://codepen.io/Alvin20201116/pen/yLoOVLq) |
| Sam | [codepen](https://codepen.io/sam-hsu/pen/xxLZbjo) |

## 線上討論截圖
版本一程式碼
```jsx
let scissors = "剪刀";
let stone = "石頭";
let paper = "布";

let playerA = scissors;
let playerB = scissors;

if (playerA === playerB) {
  console.log("平手");
} else {
  if (playerA == scissors && playerB == paper) {
    console.log("Player A 獲勝");
  } else if (playerA == scissors && playerB == stone) {
    console.log("Player B 獲勝");
  } else if (playerA == stone && playerB == scissors) {
    console.log("Player A 獲勝");
  } else if (playerA == stone && playerB == paper) {
    console.log("Player B 獲勝");
  } else if (playerA == paper && playerB == stone) {
    console.log("Player A 獲勝");
  } else if (playerA == paper && playerB == scissors) {
    console.log("Player B 獲勝");
  }
}
```
版本一第2種寫法程式碼
```jsx
let playerA="布";
let playerB="剪刀";

if(playerA===playerB){
  console.log("平手");
}
else if(playerA==="剪刀"&&playerB==="布" ||playerA==="石頭"&&playerB==="剪刀"||playerA==="布"&&playerB==="石頭"){
  console.log("playerA玩家贏了");
}
else if(playerB==="剪刀"&&playerA==="布" ||playerB==="石頭"&&playerA==="剪刀"||playerB==="布"&&playerA==="石頭"){
  console.log("playerB玩家贏了");
}
```
版本二程式碼
```jsx
let playerA="布";
let playerB="剪刀";

if(playerA==="剪刀"){
  if(playerB==="剪刀"){
    console.log("平手");
  }else if(playerB==="石頭"){
    console.log("playerB贏了");
  }else{
    console.log("playerA贏了");
  }
}else if(playerA==="石頭"){
  if(playerB==="石頭"){
    console.log("平手");
  }else if(playerB="剪刀"){
    console.log("playerA贏了");
  }else{
    console.log("playerB贏了");
  }
}else if(playerA==="布"){
  if(playerB==="布"){
    console.log("平手");
  }else if(playerB==="剪刀"){
    console.log("playerB贏了");
  }else{
    console.log("playerA贏了");
  }
}
```


![](https://i.imgur.com/nzfGAgA.jpg)

</br>

![](https://i.imgur.com/4TMbcl9.png)

</br>

![](https://i.imgur.com/Rhzyw0R.png)


## 線上其他討論
| Title | Link |
|--|--|
|JavaScript 30|https://javascript30.com/|
|JavaScript 30 github|https://github.com/wesbos/JavaScript30|
|JavaScript 題目篇 - 新手 JS 地下城|https://www.udemy.com/course/js-underground/ |
|切版技術再升級！一課覆蓋 TailwindCSS + Vue3｜打造後台管理頁面 UI|https://hiskio.com/fundraising/620/about|
|Tailwind CSS|https://tailwindcss.com/|
|六角學院 Tailwind|https://youtu.be/k781fEhqzxI|
|六角前端大補帖|https://coggle.it/diagram/XJdj8UA5tjeIugda/t/%E5%85%AD%E8%A7%92%E5%89%8D%E7%AB%AF%E5%A4%A7%E8%A3%9C%E5%B8%96|
|成為網頁前端(frontend)工程師學習地圖|https://softnshare.com/frontend-developer/|
|Awesome GitHub Profile README|https://github.com/abhisheknaiidu/awesome-github-profile-readme|
|Codewars|https://www.codewars.com/|
## 前端地圖
![](https://i.imgur.com/UTnUEZA.jpg)
