---
# System prepended metadata

title: 9/26 Arcade再進化-虛擬鍵盤的妙用(2)
tags: [2022 iThome 鐵人賽]

---

---
tags: 2022 iThome 鐵人賽 
title: 9/26 Arcade再進化-虛擬鍵盤的妙用(2)
AUTHOR: 蔡宇倫
---


## 第二篇 : 讓虛擬鍵盤做簡單運算
>本篇會延續[**第一篇**](https://ithelp.ithome.com.tw/articles/10294453)完成的進度繼續進行
>並介紹如何將`輸入的數值做計算`

<br>

### 成品效果

![圖片](https://drive.google.com/u/0/uc?id=1nHCQ8BqB7yMCPwhtjjewZ_uaY4cifhMy&export=download)

```

```
---
## 製作教學

* ###  使用積木

1. #### 首先再建立五個變數
補充:設第2個數值變數名為'**var2**'，四個顯示答案的內容變數名分別為 '**+**'、 '**-**' 、 **'*'** 、 '**/**'

![圖片](https://drive.google.com/u/0/uc?id=1jY8RpEUvdyhUBQuOJ0eYjL5-G21SqGWz&export=download)

---
2. #### 在"詢問____後回答的數字" 積木裡點選 "+" 輸入可以運算的位數

![圖片](https://drive.google.com/u/0/uc?id=1-UeBQ8p6eSgzZr1IzmKhu0kVX7xacaNc&export=download)

---
3. #### 對 "變數XXX設為0"積木複製，並將變數 "XXX" 改為第二個數值的名稱

![圖片](https://drive.google.com/u/0/uc?id=1ctN2kVP-0G8ct-nhjMZyrKCvLwZRJPsu&export=download)


---
4. #### 選擇使用 "變數'+'設為0" 積木，並從數學類別裡"( )+( )"積木移動到 '0' 空格內

![圖片](https://drive.google.com/u/0/uc?id=1jrXbb9IdN5_dj5Y6bYvLvbXsLh8EN-RB&export=download)

---
5. #### 從變數類別中將第一個數值" 變數'**XXX**' "積木放到"( )+( )"積木第一個空格中，"**var2**"則放入第二個空格，其他答案變數的積木依此類推。

![圖片](https://drive.google.com/u/0/uc?id=1uSKACz4Bv3h-DKcACfH1uqhfxHzJV8s7&export=download)

---
6. #### 選擇遊戲類別裡的 " 顯示提示'XXX' " 積木，並按下 '+' 

![圖片](https://drive.google.com/u/0/uc?id=1uXuMPahdSmVePW_8dMHU2rgAaQvVRdtE&export=download)

---
7. #### 在第一個空格中輸入"加法答案為" ，第二個空格則把"變數 '+' "積木放入裡面，其他答案變數的積木依此類推。

![圖片](https://drive.google.com/u/0/uc?id=1DDLdVrQaYSEzCYBPMnTHboAvCY5lu3DL&export=download)

---
8. #### 測試會發現答案如果為"**0**"將會不顯示

![圖片](https://drive.google.com/u/0/uc?id=1EmpKewF2KbzesfjYeIuGxbDkYbzuKIA1&export=download)

<br>

**所以這時需要加入邏輯類別中"如果(條件)那麼(做甚麼)否則(做甚麼)"積木，來進行作判斷**

![圖片](https://drive.google.com/u/0/uc?id=1hlEzAYychleaCQkG8bBk0nC6Bh_feGw2&export=download)

---
9. #### 將邏輯類別裡"( )=( )"積木放入 "如果(條件)那麼(做甚麼)否則(做甚麼)"  積木中 「條件」的空格中

![圖片](https://drive.google.com/u/0/uc?id=16W9-_Sy1HOADtm8SFK9DNjk30Ia2IGKN&export=download)

---
10. #### 將"( )=( )"積木中第一個空格放入"變數 '+' "積木
![圖片](https://drive.google.com/u/0/uc?id=1X66gBcQ3Kw90tREsroAfsVFFiBoyDjNs&export=download)

---
11. #### 將" 顯示提示'XXX' " 積木放入"如果(條件)那麼(做甚麼)否則(做甚麼)"  積木中  「那麼(做甚麼)」的空格中，並在後面空格輸入"0"

![圖片](https://drive.google.com/u/0/uc?id=1J8WGQQnzEYd1tBHVyvYYHy8iHKOyjB1w&export=download)

---
12. #### 將" 顯示提示'加法答案為' '變數+' "積木放入 "如果(條件)那麼(做甚麼)否則(做甚麼)"  積木中  「否則(做甚麼)」的空格中，其他答案變數的積木依此類推。

![圖片](https://drive.google.com/u/0/uc?id=1B3pAOONgTrnw9m9pQ2uJGjsM47WEE11W&export=download)

13. ### 最後會得到成品的效果

![圖片](https://drive.google.com/u/0/uc?id=1nHCQ8BqB7yMCPwhtjjewZ_uaY4cifhMy&export=download)

---
* ### 使用JAVASCRIPT

1. #### 使用js建立變數的語法`"let" + 變數名稱 = 初始值` ，來建立5個變數
```javascript=
let _var = 0      //輸入數值一變數
let var2 = 0      //輸入數值二變數

let add = 0       //加法答案變數
let minus = 0     //減法答案變數
let multiply = 0  //乘法答案變數 
let divided = 0   //除法答案變數
```

---
2. #### `forever(function(){})` 重複執行做什麼
```javascript=
let _var = 0      //輸入數值一變數
let var2 = 0      //輸入數值二變數

let add = 0       //加法答案變數
let minus = 0     //減法答案變數
let multiply = 0  //乘法答案變數 
let divided = 0   //除法答案變數

forever(function () {
    
})
```


---
3. #### `game.askForNumber("", 字元長度)` 為要求輸入
```javascript=
let _var = 0      //輸入數值一變數
let var2 = 0      //輸入數值二變數

let add = 0       //加法答案變數
let minus = 0     //減法答案變數
let multiply = 0  //乘法答案變數 
let divided = 0   //除法答案變數

forever(function () {
    _var = game.askForNumber("", 2)
    var2 = game.askForNumber("", 2)
})
```

---
4. #### 讓加減乘除答案變數去運算
```javascript=
let _var = 0      //輸入數值一變數
let var2 = 0      //輸入數值二變數

let add = 0       //加法答案變數
let minus = 0     //減法答案變數
let multiply = 0  //乘法答案變數 
let divided = 0   //除法答案變數

forever(function () {
    _var = game.askForNumber("", 2)
    var2 = game.askForNumber("", 2)
    add = _var + var2
    minus = _var - var2
    multiply = _var * var2
    divided =  _var / var2
})
```

5. #### `game.splash(" ")`為顯示提示內容，`if(){}else{}`為判斷答案是否為零
```javascript=
let _var = 0      //輸入數值一變數
let var2 = 0      //輸入數值二變數

let add = 0       //加法答案變數
let minus = 0     //減法答案變數
let multiply = 0  //乘法答案變數 
let divided = 0   //除法答案變數

forever(function () {
    _var = game.askForNumber("", 2)
    var2 = game.askForNumber("", 2)
    add = _var + var2
    minus = _var - var2
    multiply = _var * var2
    divided =  _var / var2
     if (add == 0) {
        game.splash("加法答案為", "0")
    } else {
        game.splash("加法答案為", add)
    }
    if (minus == 0) {
        game.splash("減法答案為", "0")
    } else {
        game.splash("減法答案為", minus)
    }
    if (multiply == 0) {
        game.splash("乘法答案為", "0")
    } else {
        game.splash("乘法答案為", multiply)
    }
    if (divided == 0) {
        game.splash("除法答案為", "0")
    } else {
        game.splash("除法答案為", divided)
    }
})
```

#### [完成範例連結](https://makecode.com/_3cgeLuCbELDm)


##### 作者:蔡宇倫