雲林SONG

程式設計可以改變您的未來(Programming can change your future)。雲林SONG 全名為雲林軟體工程(SOftware eNGineering)，目標致力於軟體人才的培養並推廣開源軟體落實於資訊教育。程式設計的觀念是軟體產品的基礎，程式碼就像沙子一樣，要紮實，所建立出來的高塔才會穩固。本站也提供資訊教育相關的教學資源。 YunlinSONG stands for Yunlin SOftware eNGineering, offering tutorial for computer programming and promoting open-source software. Teaching resources in information technology education are provided here.

十二生肖的小遊戲

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

相信各位對十二生肖不陌生，也有很多人會背誦十二生肖：鼠、牛、虎、兔、龍、蛇、馬、羊、猴、雞、狗、豬。會單獨用國語或單獨用台語背誦出來應該有不少人吧？

不過若要國台語交替背誦出來時，又會是怎麼回事呢？

例如依照下面的指示，一字國語、一字台語的方式念念看，有兩種版本：
鼠、牛、虎、兔、龍、蛇、馬、羊、猴、雞、狗、豬。
國、台、國、台、國、台、國、台、國、台、國、台。

鼠、牛、虎、兔、龍、蛇、馬、羊、猴、雞、狗、豬。
台、國、台、國、台、國、台、國、台、國、台、國。

若念得很順時，請再加上英文版，十二生肖的英文如下：

鼠 ==> Rat	牛 ==> Ox	虎 ==> Tiger	兔 ==> Hare
龍 ==> Dragon	蛇 ==> Snake	馬 ==> Horse	羊 ==> Sheep
猴 ==> Monkey	雞 ==> Cock	狗 ==> Dog	豬 ==> Boar

於是念法可以為：
鼠、牛、虎、兔、龍、蛇、馬、羊、猴、雞、狗、豬。
國、台、英、國、台、英、國、台、英、國、台、英。

鼠、牛、虎、兔、龍、蛇、馬、羊、猴、雞、狗、豬。
台、英、國、台、英、國、台、英、國、台、英、國。

鼠、牛、虎、兔、龍、蛇、馬、羊、猴、雞、狗、豬。
英、國、台、英、國、台、英、國、台、英、國、台。

若是再加上日文的話，又會是什麼情況呢？
十二生肖的日文如下：

鼠 ==> ねずみ	牛 ==> うし	虎 ==> とら	兔 ==> うさぎ
龍 ==> たつ	蛇 ==> へび	馬 ==> うま	羊 ==> ひつじ
猴 ==> さる	雞 ==> とり	狗 ==> いぬ	豬 ==> いのしし

於是念法可以為：
鼠、牛、虎、兔、龍、蛇、馬、羊、猴、雞、狗、豬。
國、台、英、日、國、台、英、日、國、台、英、日。

鼠、牛、虎、兔、龍、蛇、馬、羊、猴、雞、狗、豬。
台、英、日、國、台、英、日、國、台、英、日、國。

鼠、牛、虎、兔、龍、蛇、馬、羊、猴、雞、狗、豬。
英、日、國、台、英、日、國、台、英、日、國、台。

鼠、牛、虎、兔、龍、蛇、馬、羊、猴、雞、狗、豬。
日、國、台、英、日、國、台、英、日、國、台、英。

以上的念法只是舉例，可以任意排列組合。

Java 遊戲程式設計：乒乓球遊戲 ( Java Game Programming: Ping Pong )

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

延續Java 遊戲程式設計：用鍵盤控制控制兩個長方形一文，增加分數與碰到玩家板子的偵測。

程式執行畫面：

有幾個可以改進的地方：
1. 畫面閃爍問題。
2. 碰撞偵測的方法。

程式碼：

使用離線版 WFduino 把玩 NodeMCU

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

本文所用到的軟體如下：
1. WFduino Offline
2. Google Chrome
3. Scratch 2 Offlline

以及一台Wifi AP。

集中在WFduino離線版的使用，不說明 Chrome 與 Scratch 的安裝方式。

首先到WFduino官網，點選 GET THE APP：

選擇所需要的版本，筆者是使用Windows x64版本：

解壓縮到任意的資料夾，先將 NodeMCU 接上電腦，然後執行 WFduino.exe (可按右鍵建立桌面捷徑)，點選NodeMCU板子的USB介面，此例為：IntegriSys S.A. COM3。

點選功能==>韌體更新==>ESP8266系列來更新NodeMCU的韌體：

更新中...

更新完成，此時請按下NodeMCU板子上的RST重置按鈕。

接著NodeMCU會嘗試建立連線，成功畫面如下，請記得IP，此例為 192.168.1.101。

先來控制NodeMCU上的LED燈，點選Scratch==>開啟範本==>基本

此時Scratch的積木程式畫面如下：

NodeMCU內建LED燈的腳位為0，所以修改程式積木的腳位為0：

點一下綠旗執行看看，LED燈應該會閃爍，接著要來用雲端積木，將雲端積木打勾，並記下IP，此例為 192.168.1.101。

可先用網頁的方式做測試，測試之前，可將NodeMCU與電腦斷開，直接供電(行動電源或USB電源供應)給NodeMCU，接著用Chrome開啟 http://192.168.1.101/gpio?0=1 ==>關閉LED燈與 http://192.168.1.101/gpio?0=0 ==> 開啟LED燈。

此時，NodeMCU上的LED燈會隨著網頁所給的0或1做變化。點選Scratch==>開啟範本==>全部

修改程式積木如下：

點一下綠旗試試。

此時Scratch就可以透過Wifi用無線的方式與NodeMCU通訊，這樣子是不是很棒呢？！

Webduino Blockly 編輯器如何在本機端運行

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

Webduino Blockly是網頁式的線上程式積木編輯器，採用JavaScript的語法，本文要說明如何在自己的機器上建立本機端的Webduino Blockly 編輯器。

所需軟體如下：
1. Python版本：2.7 (或 3.6)
2. Node.js
3. Browser瀏覽器：Google Chrome

底下是在安裝上述軟體的一些注意事項。

Python 安裝

記得勾選「Add Python 3.6 to PATH」

Node.js安裝

筆者是下載64-bit的安裝檔。

Chrome安裝

這部分使用預設的安裝選項即可。

下載Webduino Blockly程式碼

安裝完上述軟體後，到 https://github.com/webduinoio/webduino-blockly 下載程式碼的ZIP壓縮檔：

解壓縮後紀錄資料夾的路徑。筆者是在 E:\Download\webduino-blockly-gh-pages

接著從Windows的【開始】開啟命令提示字元

切換到webduino-blockly程式碼的資料夾，須根據Webduino Blockly程式碼解壓後的路徑來下指令，此處提供筆者所用的指令畫面做為參考：

e: 這個指令是用來切換到硬碟E槽。

cd 切換資料夾(change directory)

接著使用python內建的SimpleHTTPServer模組，

Python 2.7 指令為 python -m SimpleHTTPServer

Python 3.6 指令為 python -m http.server

接著用瀏覽器開啟 http://127.0.0.1:8000

大功告成，以上就會形成一個區域網路了。

筆者用一台筆電使用Wifi無線上網，用這台筆電當Webduino Blockly主機，就可以讓相同的Wifi區網中的平板電腦來使用Webduino Blockly了。

Scratch 3 變數與自訂積木

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

建立變數
點選程式積木區的資料，按下製作一個變數的按鈕，再輸入新變數的名稱。

變數的顯示方式

打勾會顯示變數內容。

有三種顯示方式：正常顯示、大型顯示、滑桿
在變數名稱上用滑鼠左鍵快速連點兩下也可以切換。

全域變數練習

Step 1：開新檔案，刪除貓咪角色。

Step 2：新增變數「吃到幾個水果」

Step 3：新增動物角色，並匯入音效。(可任選動物)

Step 4：新增食物角色，並匯入音效。(可任選食物與音效)

Step 5：設計動物角色程式積木。(下圖為參考，可自由設計)

Step 6：設計食物角色程式積木。(下圖為參考，可自由設計)

Step 7：複製食物角色數個。

恭喜完成了，完一下此遊戲吧。

角色分身

將食物角色的程式修改如下：

建立自訂積木

在動物吃水果遊戲中是否有注意到有重複的程式積木呢？自訂積木可以讓重複的程式積木容易修改與管理。

按下更多積木中的製作一個積木按鈕，輸入新積木的名稱：隨機出現。

將重複的程式積木放到自訂積木中：

將食物角色的程式修改如下：

這樣的程式積木是否有更精簡了？

MIT App Inventor 2 健康體重BMI 範例 ( MIT App Inventor 2: Body Mass Index )

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

本文要來製作跟健康小有關係的App：計算BMI。首先要了解BMI是怎麼算來的。

BMI = 體重(以公斤為單位) / 身高²(以公尺^2為單位)

例如：一個70公斤的人，身高是170公分，則BMI為

70(公斤)/1.70²( 公尺²)= 24.22

體重正常範圍為 BMI=18.5～24

App的使用介面(User Interface)設計如下圖：

用了三個水平對齊(HorizontalArrangement：HorizontalArrangement1、HorizontalArrangement2、HorizontalArrangement3)版面配置(Layout)、五個標籤(Label：Label1、Label2、Label3、Label4、result)、兩個文字輸入框(TextBox：height、weight)、兩個按鈕(Button：computeBMI、clearData)。

而程式積木如下：

執行結果截圖：

試試看自己的BMI是否在正常範圍吧。

要學好數學你需要的是？

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

LOVE Equations：

要學好數學就是要愛數學(LOVE Math)，對數學有興趣。

以上圖形由http://www.quickmath.com/webMathematica3/quickmath/graphs/equations/basic.jsp所產生。

MIT App Inventor 2 你好 (Hello MIT App Inventor 2)

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

If you like this post, please click the ads on the blog or buy me a coffee. Thank you very much.

MIT App Inventor 2是一套網頁式開發Android App的環境，與 Scratch 一樣採程式積木的操作方式。使用MIT App Inventor 2需要有Google的帳號，此部分可參考：第一章學習App Inventor的準備工作或謝碧景老師製作的教學影片。

MIT App Inventor 2 is web-based environment for creating Android applications. It is similar to Scratch that use visual programming. A google account is needed for using MIT App Inventor 2. Please refer to Getting Started with MIT App Inventor 2 to prepare MIT App Inventor 2 environment.

環境建置好以後，就來拉一些積木來測試吧。
Well done. Let's making a simple project: "Hello"

建立新專案(Start New Project)：

使用滑鼠將Button、Label、TextBox個拖曳一個至網頁上的手機畫面(Screen1)：
Add three user interfaces "Button, Label, TextBox" to display screen(Screen 1):

接下來要設計按鈕的程式積木，點選畫面右上方的Blocks按鈕：
Click "Blocks" button to design the code blocks for "Button" user interface:

點選畫面左方的Button1，將when Button1.Click積木拖曳到右方的積木區：
Click "Button1" on the Blocks Component-Specific Drawers. Then, drag the when Button1.Click to Blocks Viewer.

仿照Button1的做法，將程式積木設計為如下：
The code for "Button1" is:

接著就可以使用模擬器來執行看看了：
Run the "Hello" project with a Emulator:

若不清楚如何執行App，請參考第三章 App Inventor 程式編譯與執行。
Please go to Setting Up App Inventor if you need any help.

C 語言中的 typedef

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

筆者覺得C語言中 typedef 用途可有：
1. 減少打字。
2. 增加程式碼可讀性。
3. 增加程式碼不可讀性。

例如下面程式碼就可以增加可讀性：

typedef struct Books {
   char title[50];
   char author[50];
   char subject[100];
   int book_id;
} Book;

在程式碼中用Book就可以代表一本書，並記錄書的作者、標題、分類、編號。

而下面的程式碼可以增加不可讀性：

typedef struct Books {
   char title[50];
   char author[50];
   char subject[100];
   int book_id;
} IAmNotABook;

以上還顯示出來一件事：程式碼是人創作出來的，若程式碼的作者不想讓其他人看得懂，Coder是有辦法惡搞的。(筆者當然不鼓勵這種行為！)

在Visual Stduio C++ 2015 Community 中的機率分布函數

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

本文主要說明C++可以使用機率中的 Probability Distribution Function (PDF)，不會對這些理論做說明，請自行研究機率理論。要舉的例子為常態分布。因為MSDN上有現成的例子，所以筆者直接引用：

C++

// compile with: /EHsc /W4
#include <random> 
#include <iostream>
#include <iomanip>
#include <string>
#include <map>

using namespace std;

void test(const double m, const double s, const int samples) {

    // uncomment to use a non-deterministic seed
    //    random_device gen;
    //    mt19937 gen(rd());
    mt19937 gen(1701);

    normal_distribution<> distr(m, s);

    cout << endl;
    cout << "min() == " << distr.min() << endl;
    cout << "max() == " << distr.max() << endl;
    cout << "m() == " << fixed << setw(11) << setprecision(10) << distr.mean() << endl;
    cout << "s() == " << fixed << setw(11) << setprecision(10) << distr.stddev() << endl;

    // generate the distribution as a histogram
    map<double, int> histogram;
    for (int i = 0; i < samples; ++i) {
        ++histogram[distr(gen)];
    }

    // print results
    cout << "Distribution for " << samples << " samples:" << endl;
    int counter = 0;
    for (const auto& elem : histogram) {
        cout << fixed << setw(11) << ++counter << ": "
            << setw(14) << setprecision(10) << elem.first << endl;
    }
    cout << endl;
}

int main()
{
    double m_dist = 1;
    double s_dist = 1;
    int samples = 10;

    cout << "Use CTRL-Z to bypass data entry and run using default values." << endl;
    cout << "Enter a floating point value for the 'mean' distribution parameter: ";
    cin >> m_dist;
    cout << "Enter a floating point value for the 'stddev' distribution parameter (must be greater than zero): ";
    cin >> s_dist;
    cout << "Enter an integer value for the sample count: ";
    cin >> samples;

    test(m_dist, s_dist, samples);
}

程式執行時，需要輸入平均值(mean)、標準差(stddev)與樣本數，這樣子就可以產生Normal Distribution的樣本。

除了常態分佈外，從MSDN可查到其他的分佈函數說明：https://msdn.microsoft.com/en-us/library/bb982398.aspx#distributions。

離線版Blockly程式積木編輯器

若您覺得文章寫得不錯，請點選文章上的廣告，來支持小編，謝謝。

本文所用的軟體如下：
1. Python版本：2.7.12 (也可用其他版本的Python來執行程式積木所產生的程式碼)
2. Browser瀏覽器：Google Chrome

此程式積木編輯器為修改Google所提供的Blockly程式。提供下面功能：

免安裝。
即時看到程式積木的程式碼。
可看到程式積木的網頁執行結果。
可以XML格式儲存程式積木。
可讀取XML格式的程式積木。
可儲存所產生的程式碼，有JavaScript、Python、Lua。

程式碼壓縮檔：https://drive.google.com/file/d/1ElSq1Jh0Urln8OmpYh6XhkRCyeLPBcb7/view?usp=sharing，感謝陳會安老師的協助，修正中文以及減少壓縮檔的大小(此外陳老師也提供了blockly版的fChart：http://hueyanchen.myweb.hinet.net/)。下載後，將壓縮檔解壓縮，開啟Blockly程式積木.html檔案：

可看到如下網頁：

黃色圓形：可將程式積木的程式碼儲存到電腦裡。

例如將下面程式積木：

儲存成Python語言後，可用IDLE(Python GUI)軟體來執行：

藍色圓形：可直接執行程式積木。

紫色圓形：讀取XML格式的程式積木。

綠色圓形：以XML格式儲存程式積木。

此外提供可以將積木給隱藏起來版本下載處，示範影片如下：

若有任何疑問請至 https://www.facebook.com/yunlinsong/ 留言。