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

## 第三篇 簡易計算機

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

<br>

## 成品效果


---
## 製作教學

* ### 使用積木
<br>

1.在類別中選擇擴展

---
2.在搜尋框貼上連結```https://github.com/riknoll/arcade-custom-menu``` 點選項目即可擴展

---
3.建立兩個變數後，並把```變數XXX設為0``` 與 ```詢問' '回答的數字 ```組合並放入``` 當啟動時 ```積木

---
4.選擇擴展BlockMenu中的```show grid menu fullscreen with option``` 積木 放入到 "當啟動時" 積木中，並將fullsceen改成bottom half ，並將後面的陣列輸入``` + - * / ```

---
5.選擇擴展BlockMenu中的```on menu option selected```積木，並將```如果()那麼()``` 積木放入裡面

---
6.建立```( )=( )```積木在```如果()那麼()```積木上，然後將```on menu option selected```積木上的option移動到```( )=( )```積木第一個空格，第二個空格輸入"**+**"

---
7.在文字類別中選擇用```(" ")```積木，然後放入到```( )=( )```積木的第二個空格並輸入"**+**"

---
8.選擇擴展BlockMenu中的```close menu```放入```如果()那麼()```積木中，並建立一個名為answer的變數，然後將answer設為```變數a + 變數b```

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

---
10.在```否則()```中放入```顯示提示''```積木，並在第一個空格輸入"加法答案為"，第二個空格則放入變數answer

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


---
* ### 使用JAVASCRIPT

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

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

2.建立選單的陣列

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()為關閉選單

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(){}為一直重複判斷

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)

##### 作者:蔡宇倫