---
# System prepended metadata

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

---

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

## 第三篇 簡易計算機

>藉由[**第二篇**](https://ithelp.ithome.com.tw/articles/10299201)已讓大家認識如何用```運算的積木``` 和 ```Javascript的語法```使輸入的數值自動做計算
>本篇會分享如何將```+ - * / 變成選單，像計算機一樣去計算 ```
>，並使用```積木```和```Javascript```帶領大家一步一步完成。

<br>

## 成品效果

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

```

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

* ###  使用積木
<br>

1.在類別中選擇擴展
![圖片](https://drive.google.com/u/0/uc?id=15mXW3h18_5A1ZJPbQri67hDq5AiufN4Z&export=download)

---
2.在搜尋框貼上連結```https://github.com/riknoll/arcade-custom-menu``` 點選項目即可擴展
![圖片](https://drive.google.com/u/0/uc?id=1QFngs9SxyqeEwz5tvtCSQoRt8s4th46M&export=download)

---
3.建立兩個變數後，並把```變數XXX設為0``` 與 ```詢問' '回答的數字 ```組合並放入``` 當啟動時 ```積木
![圖片](https://drive.google.com/u/0/uc?id=11NMCnvezHOyRvxeNYhyQ5loF5-yfw97C&export=download)

---
4.選擇擴展BlockMenu中的```show grid menu fullscreen with option``` 積木 放入到 "當啟動時" 積木中，並將fullsceen改成bottom half ，並將後面的陣列輸入``` + - * / ```
![圖片](https://drive.google.com/u/0/uc?id=1AVVJ26CkT4ZwYD0PzeavMTcqg0YILW0e&export=download)

---
5.選擇擴展BlockMenu中的```on menu option selected```積木，並將```如果()那麼()``` 積木放入裡面
![圖片](https://drive.google.com/u/0/uc?id=1S-F6YdshoIiESrvyw5MJ59ROoljHs3xF&export=download)

---
6.建立```( )=( )```積木在```如果()那麼()```積木上，然後將```on menu option selected```積木上的option移動到```( )=( )```積木第一個空格，第二個空格輸入"**+**"
![圖片](https://drive.google.com/u/0/uc?id=1kaPZcnMCddW2eb2WF5Cuo-IyHGbfOxC4&export=download)

---
7.在文字類別中選擇用```(" ")```積木，然後放入到```( )=( )```積木的第二個空格並輸入"**+**"
![圖片](https://drive.google.com/u/0/uc?id=16SaJWbowjkgwlSO-fYhY64U05VWlY2fx&export=download)

---
8.選擇擴展BlockMenu中的```close menu```放入```如果()那麼()```積木中，並建立一個名為answer的變數，然後將answer設為```變數a + 變數b```
![圖片](https://drive.google.com/u/0/uc?id=1EZbtxqYWrnWos7Hrv1DZWxpS7r-slmZe&export=download)

---
9.再放入```如果()那麼()否則()```積木在```如果()那麼()```積木中，然後再條件那一個放入```answer=0```，在```那麼()```中放入遊戲類別中```顯示提示''```  積木，第一個空格輸入"加法答案為"，第二個空格輸入為"0"
補充:詳細原因請參考[**第二篇**](https://ithelp.ithome.com.tw/articles/10299201)
![圖片](https://drive.google.com/u/0/uc?id=1bQ00IBJXz2CJEagi6dLPnXwFCOqAxW8a&export=download)

---
10.在```否則()```中放入```顯示提示''```積木，並在第一個空格輸入"加法答案為"，第二個空格則放入變數answer
![圖片](https://drive.google.com/u/0/uc?id=1uJGMbClwwU7y4yAwUFqE0MJyQMtqk_Xu&export=download)

---
11.在```如果()那麼()```積木中放入迴圈類別中```重複判斷false執行```積木，然後將控制器類別中的```A鍵被按住?```積木放入判斷格中，並將遊戲類別中```遊戲重設```積木放入執行格中，其他運算依此類推

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

---
* ### 使用JAVASCRIPT

1.建立三個變數並設為0，然後要求變數var1、var2會要求輸入長度為2的數值

```javascript=
let var1 = 0
let var2 = 0
let answer  = 0
var1 = game.askForNumber("", 2)
var2 = game.askForNumber("", 2)
```

2.建立選單的陣列
```javascript=
let var1 = 0
let var2 = 0
let answer  = 0
var1 = game.askForNumber("", 2)
var2 = game.askForNumber("", 2)
blockMenu.showMenu([
"+",
"-",
"*",
"/"
], MenuStyle.Grid, MenuLocation.BottomHalf)
```

3.blockMenu.onMenuOptionSelected(function (option, index) {}可以讀取選擇的選項(option或index)、 blockMenu.closeMenu()為關閉選單
```javascript=
let var1 = 0
let var2 = 0
let answer  = 0
var1 = game.askForNumber("", 2)
var2 = game.askForNumber("", 2)
blockMenu.showMenu([
"+",
"-",
"*",
"/"
], MenuStyle.Grid, MenuLocation.BottomHalf)

blockMenu.onMenuOptionSelected(function (option, index) {
    if (option == "+") {
        blockMenu.closeMenu()
    }
}
```

4.while(){}為一直重複判斷
```javascript=
let answer = 0
let var2 = 0
let var1 = 0
var1 = game.askForNumber("", 2)
var2 = game.askForNumber("", 2)
blockMenu.showMenu([
"+",
"-",
"*",
"/"
], MenuStyle.Grid, MenuLocation.BottomHalf)

blockMenu.onMenuOptionSelected(function (option, index) {
    if (option == "+") {
        blockMenu.closeMenu()
        answer = var1 + var2
        if (answer == 0) {
            game.splash("加法答案為", "0")
        } else {
            game.splash("加法答案為", answer)
        }
        while (controller.A.isPressed()) {
            game.reset()
        }
    }
    if (option == "-") {
        blockMenu.closeMenu()
        answer = var1 - var2
        if (answer == 0) {
            game.splash("減法答案為", "0")
        } else {
            game.splash("減法答案為", answer)
        }
        while (controller.A.isPressed()) {
            game.reset()
        }
    }
    if (option == "*") {
        blockMenu.closeMenu()
        answer = var1 * var2
        if (answer == 0) {
            game.splash("乘法答案為", "0")
        } else {
            game.splash("乘法答案為", answer)
        }
        while (controller.A.isPressed()) {
            game.reset()
        }
    }
    if (option == "/") {
        blockMenu.closeMenu()
        answer = var1 / var2
        if (answer == 0) {
            game.splash("除法答案為", "0")
        } else {
            game.splash("除法答案為", answer)
        }
        while (controller.A.isPressed()) {
            game.reset()
        }
    }
})
```
#### [完成範例連結](https://makecode.com/_HK3dMXADc5xL)


##### 作者:蔡宇倫