---
# System prepended metadata

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

---

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

## 第一篇 : 如何創建虛擬鍵盤
>本篇將介紹`如何建立虛擬鍵盤`。
>並帶領大家了解`虛擬鍵盤的應用`。
---
### 為何需要虛擬鍵盤?

* ### 方便性
虛擬鍵盤的出現讓我們可以實現更加方便的操作輸入，不用麻煩的使用有著實體按鍵的外接鍵盤。
![鍵盤](https://defzd6kpftjvs.cloudfront.net/upload/201211/20121119193433720.jpg)

* ### 耗損率
實體按鍵的減少，必然有助降低按鍵的耗損率，讓設備減少耗損。

<style>
        .a{
            display:flex;
            align-items: center;
            justify-content: center;
        }
</style>
    
<div class="a">
      
![](https://3.bp.blogspot.com/-uHnTZKMbL0E/UOY0fC7OAgI/AAAAAAAAL9E/uKNkt1Bjx-s/s1600/25.jpg)
    
![](https://www.blackhole.com.tw/images/30067550895_4d7436a1d1_b.jpg)

</div>

* ### 專注力
太多實體按鍵的控制會分散我們的注意力，虛擬按鍵可以讓我們更沉浸在螢幕裡的內容。

![](https://cdn1.techbang.com/system/images/503507/original/582b42f9901ab25c9d711c968c2e5f02.jpg?1550471538)

---

### 虛擬鍵盤在Arcade的應用

>你知道嗎?
>在Arcade中可以使用虛擬鍵盤，並且已有很多專案使用它。
>有了它，會讓你的Arcade遊戲更加精彩!

### 1. 猜字遊戲

![](https://drive.google.com/u/0/uc?id=1qvoSO7NLIhR1bjPxZ6-5vaI43cLXyhfY&export=download)

>根據文字敘述內容去推斷要輸入的文字，答對遊戲勝利，答錯損失一次機會，機會歸零則遊戲失敗。
#### [猜字遊戲連結](https://makecode.com/_YaPaWc3E7g0D)

### 2. 遊戲中取名字

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

>在角色扮演(RPG)或養成遊戲中經常出現，在遊戲開始之前會先對角色輸入名字後再開始。

#### [輸入姓名連結](https://arcade.makecode.com/31393-03412-94227-19662)

---

## 製作教學

* ###  使用積木

1. #### 首先點選建立專案

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

---
2. #### 為專案取檔名

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


---
3. #### 選擇使用迴圈類別的"重複無限次"積木，把"當啟動時"積木刪除

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

---
4. #### 從變數類別中建立一個變數(變數名稱可隨意取)

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

---
5. #### 選擇使用變數類別中"變數XXX設為0"積木，然後移動到"重覆無限次"積木裡面

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

---
6. #### 選擇使用遊戲類別中"詢問____後回答的數字" 積木，然後放到變數的積木裡

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

---
7. #### 最後會得到一個可以輸入並顯示的虛擬數字鍵盤
![圖片](https://drive.google.com/u/0/uc?id=1pmIAPLKEtsOpFLe-KXnGDBI3HhwHaODh&export=download)

---
* ### 使用JAVASCRIPT

1. #### 使用js建立變數的語法`"let" + 變數名稱 = 初始值` ，來給變數初始值
    * 補充: js可以建立變數的語法 "let"、 "var"、 "const"
```javascript=
let _var = 0
```
---
2. #### forever()在此為一直重複執行
```javascript=
let _var = 0
forever()
```
---
3. #### function(事件變數){做什麼事}
```javascript=
let _var = 0
forever(function() {
    
})
```
---
4. #### askForNumber('') 為要求輸入
```javascript=
let _var = 0
forever(function() {
    _var = game.askForNumber('')
})
```

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


##### 作者:蔡宇倫