飛躍死亡谷
連結至Scratch網站執行
進階體驗
飛越死亡谷(狂風版)
2021年11月16日 星期二
2021年10月19日 星期二
Scratch 程式與邏輯(四)：自訂函示積木與重複控制
自訂函示積木與重複控制
當程式中有一串固定連續的指令積木，會不斷被執行時，
可以將這一串積木做成函示積木，需要時再呼叫使用即可。
例如，在做曼陀羅圖案時，常以一個特定的圖案，連續環繞中心作圖。
此時，我們就可以將基本的圖形先設計成函示，
然後再改變不同的角度來作圖，即可完成一幅曼陀羅畫。
程式積木示例
程式範例
2021年10月18日 星期一
Scratch 程式與邏輯(三)：迴圈與滑鼠、按鍵控制
迴圈與滑鼠、按鍵控制
重複執行積木
讓程式不斷重複執行某個(些)積木(程序)，稱為迴圈。
迴圈可分為有限迴圈及無限迴圈。
練習作業～大眼蛙盯著你（妳）
素材下載
作品範例
完成大眼蛙盯著你的作業後，
你能不能自己設計出：大眼蛙不理你呢？
滑鼠按下偵測
在一些遊戲的設計上，可能會利用滑鼠或按鍵做為擊發或打擊的動作，
因為電腦在執行時的反應很快，所以在偵測滑鼠或按鍵被按下時，必須做些控制。
下面的程式可以參考。
練習作業～準星射擊
素材下載
作品範例1
作品範例2
PS.按鍵的偵測技巧，同滑鼠偵測。
2021年9月22日 星期三
無菸教育e化網-無菸煙知識大探索活動
無菸教育e化網-無菸煙知識大探索活動
活動網址：https://smartcreating.com/Smoke/index.php
活動內容如下：
(一)日期：即日起至110年11月5日止。
(二)參加對象：全市國小六年級學生。
(三)有奬徵答活動：透過闖關遊戲線上作答，第一關需達600分才可進第二關，第二關滿2000分即可參與抽獎活動。
(四)電腦繪圖：使用內建頁面彩繪稿，請發揮創意。
(五)得獎名單預訂於110年11月30日以前公布於該活動網頁或該局官網，主辦單位將另以電話通知領獎事宜。
相關問題請逕洽林先生（0928-931-101）或活動聯絡人林小姐（電話：2526-5394轉分機3161）。
2021年9月13日 星期一
2021年6月14日 星期一
手機程式設計——App Inventor II 點擊恐龍(含手耭連結測試)
手機程式設計——App Inventor II 點擊恐龍(含手耭連結測試)
MIT 行動學習中心已發表 App Inventor 2 (本文後簡稱 AI2)，
將其整合在網頁中即可使用，可說是與 Scratch 愈來愈像了。
將其整合在網頁中即可使用，可說是與 Scratch 愈來愈像了。
使用上非常簡單，只要連結到下列網址
http://ai2.appinventor.mit.edu/
http://ai2.appinventor.mit.edu/
再以google帳號(本校學生郵局帳號)登入即可。
登入後，我們就以科丁小學課本的程式範例，
～點到手抽筋～
來作一個開場練習。
在這個程式裡，我們要設計一隻能開口、閉口的恐龍，
當按了開始鈕後，在一定時間內（１０秒)，
恐龍被按壓時，會張口；放開按壓時，會閉口，
程式會自動記錄，在時間內，恐龍被按壓的次數。
在畫面編排中，我們用到了幾個基本元件，條列如下：
按鈕—＞開始按鈕
圖像—＞恐龍圖片（開口、閉口）
（文字）標籤—＞顯示次數及時間
比較特別的是，為了讓所有文字標籤能放在同一行，
我們在介面配置中，選用了水平配置，來達成這一目的。
最後，為了要有計時的功能，
我們再加入感測器元件中的計時器。
將上述元件依序排列後，調整各自必要的屬性及內容，
就完成如上圖中的畫面編排。
接下來，我們再根據程式運作需求，
繼續進行程式設計的內容。
程式主要可分成３大部分。
一、起始設定及開始按鈕
一開始，我們先設定２個全域變數：次數與時間
開始按鈕按下後，程式便開始執行
並將次數與時間的值，設給文字標籤
二、計時器運作時機
當時間變數 >０的情況下，計時器會啟動運作，並倒數計時（每次0.1秒）
當到時間變數＝０時，計時器停止作用。
三、點擊恐龍的判斷及反應
在時間範圍內，只要恐龍被點到，就會顯示開口圖像，
並且點擊次數會加１，一直到時間結束為止。
當程式設計完成後（或是在設計過程中），
如果我們想連接手機，測試一下成果，
你必須先在手機上安裝AI Companion的APP程式。
（Adroid系統—＞google play商店 ；iOS系統—＞apple store）
然後在ＡＩ２的設計畫面中，點選連線功能中的AI Companion選項
此時，電腦會顯示一個QRcod的連結圖，如下：
接著，我們就可以開啟手機上的AI Companion ＡＰＰ，
按Scan QR code，就可以執行我們所設計出來的手機程式了。
在執行過程中，如果有任何問題，都可以隨時修正，
修正完便可立即看到結果喔！非常方便。
如果程式已經設計完成，
我們就可以用下列的方式，來安裝到手機中。
或下載到電腦，再轉傳到手機裡安裝，如下。
那萬一，我們沒有手機可以測試怎麼辦？
那就請看下一篇手機模擬器的教學文吧！
2021年6月10日 星期四
手機程式設計——App Inventor II 模擬器安裝與執行
手機程式設計——App Inventor II 模擬器安裝與執行
當我們沒有手機用來測式編寫的APP Inventor應用程式時，
可以利用手機模擬器來測試。
要使用這個功能，你必須在你自己的電腦中安裝aiStarter這個模擬器。
你可以連結到下列網址，來下載
接著執行下載的安裝檔，按照安裝程序指示進行安裝。
安裝完後，會在電腦桌面上出現aiStarter這個模擬器的圖示。
以滑鼠點擊aiStarter執行，會出現如下畫面
把aiStarter畫面縮小(不要關閉，關閉就無法使用模擬器了）
開啟aiStarter後，當你在AppInventor II設計APP程式時，
就可以用模擬器的功能，來測試你的APP程式了.
模擬器執行時，需要等待一點時間，大約１～２分鐘，
這時請先不要做其他動作，靜待模擬器啟動完成。
在啟動過中，如果出現升級（更新）提示時，請依下列圖示操作：
按下確定升級後，請注意工作列上會出現另一個手機模擬器的程式
點開後，會出現模擬手機的畫面，請點選ＯＫ。
再點選Install
升級完成後，請點選Done。（不要選Open喔！）
升級完成後，再重置連線
然後再次開啟模擬器，就可以在模擬的手機上，執行你的APP程式了。
APP成功模擬畫面如下：
提醒一下：在手機模擬器上輸入資料，要用模擬上的手機輸入功能，
不是在電腦鍵盤上操作喔！
如果，手機模擬器無法正常運作，
則請先關閉aiStarter，再重新啟動aiStarter。
然後重複模擬器的升級動作，或重置連線後再試試。
有關這個ＢＭＩ計算的APP程式的教材，是參考科丁小學的課本改編而成，
教材連結如下：
教材連結如下：
有興趣的同學，趁著畢業後的空閒時間，
好好來試試吧！說不定你就是未來的APP設計師喔！
2021年6月9日 星期三
電腦基本運作：程式語言
電腦基本運作：程式語言
電腦的運作，必須靠程式語言來溝通。
程式語言是一種用來與電腦溝通的「演算法」。
所謂「演算法」是指：
由一連串的指令，來告訴電腦如何採取行動。
更精確來說，是一連串指示電腦的動作跟順序的系列安排。
在理解演算法之前，我們先來看看底下這個簡單的遊戲。
遊戲目標：交換黑棋和白棋的位置
遊戲規則一：每個棋子可以滑動至相鄰的空格內。
遊戲規則二：也可跳過相鄰的棋子至下一個空格。
如果這盤棋要由你（妳）來指揮電腦下，
你要如何來下指令呢？
底下這兩群指令，你會選用哪一個？
★２號格白棋移到３號格內
★４號格黑棋跳到２號格內
★白棋移一格
★黑棋跳一格
你（妳）覺得哪群指令比較適合來指揮電腦運作呢？
如果你還不曉得怎麼分，再試試看下面這兩個：
【逃生門緊急使用步驟】
1. 拉開蓋子
2. 將門把推到開啟位置並鬆手
3. 向外把門推開
【飛機洗手間使用規則】
＊禁止吸煙
＊禁止飲食
＊當安全帶警示燈亮起時請勿使用洗手間
比較好的指令是能讓人（或電腦）一步一步的執行動作，
這就是我們上面所提到的「演算法」。
演算法告訴你如何一步一步執行任務，
而不是只是告訴你什麼可以做，什麼不能做。
因此「演算法」是在談論「如何」做，而不是做「什麼」。
人類的語言，常常存在著模擬兩可的狀況，
但電腦的程式語言，則要具體精確，不能有模糊空間。
程式語言基本上可分為：
1. 低階「機器碼（machine code）」和
2. 「高階語言（high-level languages）」。
以這兩種程式語言來說，
電腦真正「看」得懂的，只有機器碼。
機器碼是一種非常簡單的語言，它只使用兩種字母：0 和 1。
因此機器碼中的所有字都是由 0 和 1 組成的序列，
例如，00000100 可能代表一個字，而 10101010 代表的意思就完全不同。
在這裡順便介紹一個概念—位元組(byte)
在電腦普遍使用的初期，電腦每次能處理的位元數，是8位元(bits)。
因此，我們把８位元(bits)合成１個位元組(byte)。
當時的電腦也因而被稱成８位元電腦。
隨後由於電腦中央處理器技術的進步，
慢慢的又發展到１６位元，３２位元，甚至現在到達６４位元的運算單位。
高階程式語言，是一種為了讓人類比較容易理解而設計的語言，
比較接近人類語言的用法。例如：
10 INPUT name '輸入姓名
20 PRINT "Hello," name '輸出 Hello + 姓名
30 FOR i = 1 to 10 '重覆執行10次, i 計數從 1 到 10
40 PRINT i '輸出 i 的值
50 NEXT '執行下一次循環
60 END '結束
或是
void main(void) {
int inv=0; /*計數用變數*/
double sum=0; /*計算總和*/
float Data; /*輸入值存在Data變數*/
do {
printf("輸入實數:"); /*在螢幕上顯示字串*/
scanf("%f", &Data); /*由鍵盤輸入數值*/
sum = sum + Data; /*將輸入值加到sum */
inv = inv+1;
} while(inv < 5); /*若inv小於5，繼續執行*/
printf( "平均值= %f ",sum/5.0); /*印出平均值*/
printf( "\n"); /*換行*/
}
這樣一來，人們在進行程式設計時，可以用較直覺的方式來進行，
但是這些高階語言電腦是看不懂的，
所以必須要透過一個編譯器（Compilers）或直譯器（interpreter），
將高階語言先轉換（翻譯）成低階機器碼，
再由電腦根據機器碼來運作執行程式。
雖然高階語言比起機器碼更人性化，
但在編輯上，仍然可能因拼錯語法或指令，
造成程式執行的錯誤。
因此，最近又有積木式的程式語言發展出來，
像我們六年級所學的Scratch 3.0 及 AppInventor II，就屬於這一類。
積木式的程式語言，基本上都可以轉換成高階語言，
一樣藉由編譯器，再轉為機器碼。
一個完整的演算法（或稱程式），
其實就是一組用來完成某件工作的有程序和指令，
也因此它涵蓋了以下兩件事：
1. 必須被執行的動作方式
2. 動作必須要遵循的順序
任何演算法都可以用這三種程序寫出來：
順序（Sequence）、
選擇（Selection）、
迭代（Iteration）。
一、順序：包含一連串先後順序動作，例如：
【緊急逃生門開啟】
1. 拉開蓋子
2. 推槓桿打開艙門
3. 將門往外推
底下有個著名的遊戲—農夫過河，也能來體驗一下順序的重要性。
有個農夫帶著心愛的狐狸，去市場買了一隻活雞和一條玉米。
回家時必須搭乘小竹筏渡河。
小竹筏很小，最多只夠讓農夫和他所帶的一項物品或動物乘坐。
而且只有農夫才能控制竹筏航行。
但農夫碰到了一些問題：
1.雞會找機會偷吃玉米，狐狸也伺機想吃雞。
2.如果農夫與狐狸和雞同時在場(同在岸邊或竹筏上)，動物就不敢造次。
3.如果農夫遠離了動物(農夫和動物分別在岸邊或竹筏上)，有機會時，
雞肯定會把玉米吃掉，而狐狸也會吃雞。
那麼，農夫要如何安排渡河，才能讓這三項都完整無缺的渡河到家呢？
這個問題，先留給同學們來嘗試解題，先不公佈答案。
同學們可以把解題的步驟與程序寫下來，
看看你總共用了多少個步驟，來幫農夫解決這個難題。
你會發現動作的選項與順序，是很重要的。
【疫情警戒三級的停、復課選擇】
如果 疫情警戒降為二級 (條件)
那麼 學校就復課，學生回校上課。 (條件為真)
否則 繼續停課，學生進行線上學習。 (條件為假)
在選擇的條件裡，有時不只有單一條件，
這時我們就會用到邏輯判斷 and(且) 、or(或)來作真假的運算，
例如：
【疫情警戒三級時違規罰則】
如果 人在街上 且 未戴口罩 （需兩個條件均符合才成立)
那麼 依傳染病防治法，裁罰3千元以上1萬5千元以下罰鍰。
否則 未違規，不予裁罰。
如果 室內群聚超過5人 或 室外群聚超過10人 (兩個條件只要一個符合即成立)
那麼 依傳染病防治法，處新台幣6萬元以上、30萬元以下罰鍰。
否則 未違規，不予裁罰。
三、迭代：在程式中，重複性的工作是非常重要的一環，
「重複」這檔事，又就叫作迴圈（loop）或遞迴。
當我們下達「重複」指令時，須設定「終止條件」，
否則重複執行的程式會永不停止。
底下以兩個例子，來說明「重複」語法。
例如：
【撲克牌重複抽牌遊戲一】
重複抽牌直到抽中紅心A為止
如果 抽中紅心A
那麼 停止抽牌。
否則 繼續抽牌。
【撲克牌重複抽牌遊戲二】
重複抽１０張撲克牌
將 每次抽中的點數加總。
第一種狀況，可稱為條件控制迴圈（Sentinel-controlled loops），
第二種狀況，可稱為計數控制迴圈（Counter-controlled loops）。
條件控制迴圈可視實際執行的情況，決定重複執行的次數；
而計數控制迴圈，則事先就已律定好重複執行的次數。
至於要採用哪一種迴圈，則取決於重複執行的需要。
以上是我們簡單介紹有關程式設計的基本概念，
實際上，真正程式設計所需的知能，還不止上面這些。
有興趣的小朋友，可以利用畢業後的空閒時間，
多利用 Scratch 3.0 或 AppInventor II 來進行練習，
對你將來的各項學習，都會很有幫助的。
隨堂測驗網址
2021年5月31日 星期一
電腦基本運作：圖像表示法
電腦基本運作：圖像表示法
在電腦的運算裡，除了數字之外，還會處理圖像。
但其實，我們所看到的文字，在電腦裡是被視為圖像的。
那麼電腦是如何來處理圖像的呢？
我們先來了解電腦的發展過程。
最早的電腦，不像現在這麼多彩多姿。
就跟電視一樣，最早剛發明出來時，只是黑白的。
早期的黑白電視機
１９８１年代ＩＢＭ個人電腦（黑底螢幕，綠色字）
這種黑白電視，或是雙色的螢幕，
其實只是螢幕顯示的像素，亮或不亮的作用而已。
所謂的「像素」，就是我們把電腦螢幕細分成許許多多的小格子。
每個最小的格子，就是１個「像素」。
在黑白螢幕中，每個小格子就是一顆小燈泡，
它的情況只有暗或亮兩種情況，
若以二進位來記錄，暗可用０表示，亮可用１來表示。
例如，以英文字母ａ這個字來看：
如果白色視為不亮，黑色視為亮，
（注意：若真實的螢幕上，不亮時是黑色，亮時是白色或其他顏色）
（我們為了模擬紙本及列印的狀況，故本文均把白底視為不亮，黑點視為亮燈）
接下來，我們就用矩陣圖卡，
來模擬一下電腦在儲存圖像時的狀態吧！
PS.你也可以連線到下列連結，直接用8x8矩陣操作.
５ｘ６矩陣圖卡(每張圖卡約2cm x 2cm，一面空白，一面塗色)
請大家先練習排出一個英文小寫字母ａ，如下圖：
英文字母ａ點陣圖（最左邊那排圖卡，是備用的)
那麼ａ這個字母（圖像)，用數字來表示，有如下方式：
請小朋友們練習一下，英文大寫字母G，
要如何表示？
|
圖像 |
二進位表示法 |
簡化十進位表示法 |
|
|
０１１００ |
1,2,2 |
|
１００１０ |
0,1,2,1,1 |
|
|
１００００ |
0,1,4 |
|
|
１０１１１ |
0,1,1,3 |
|
|
１００１０ |
0,1,2,1,1 |
|
|
０１１００ |
1,2,2 |
若反過來，給你（妳）簡化的十進位表示法，
你能畫出圖像嗎？（更厲害的，不需畫圖像，直接轉換出二進位表示法)
|
圖像 |
二進位表示法 |
簡化十進位表示法 |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
以上我們所用的圖像，都是最原始的黑白圖像。
每一個像素只有亮或不亮，兩種狀況，
所以每個像素可用１個ｂｉｔ（位元)來儲存。
例如：在上面5 x 6的矩陣圖像中，我們只要用３０bits就可以存完。
那如果我們用８ｘ８的矩陣來繪製黑白圖像，
那所需要的儲存位元數，總共需要６４bits。
了解到這邊後，我們再進一步來模擬一下，
如果這個螢幕不是黑白的，而是彩色的呢？
|
|
|
 |
 |
|
黑白 1bit |
8色 3bits |
256色 8bits |
高彩 16bits |
各類彩色示意圖
8 色：每個像素占 3 位元 ( bits )，可顯示 8 種顏色。（適合教學練習）
16 色：每個像素占 4 位元 ( bits )，可顯示16 種顏色。（適合簡易繪圖）
256 色：每個像素占 8 位元 ( bits )，可顯示 256 種顏色。（適合卡通圖片）
高彩：每個像素占16 位元 ( bits )，可顯示 65536 種顏色。（適用自然景物）
全彩：每個像素占 24 位元 ( bits )，可顯示 16777216 種顏色。
全彩螢幕
接下來，我們就來模擬一下 彩色(8色) 的圖像操作！
PS.這時我們的圖卡就不夠用了,請連線到下列連結，直接用8x8矩陣(彩色版)來操作.
請小朋友們練習，下方圖卡要如何表示？
|
圖像 |
十進位表示法 |
|
 |
１３４０ |
|
７０２６ |
|
|
５１６２ |
各位同學試著算算看，上面這個４ｘ３的８色矩陣，
需用多少個ｂｉｔ（位元）來儲存呢？
每個像素需用３bits來儲存，
總共需要３ｘ１２＝３６（bits)
如果是前面那個５ｘ６矩陣的話，
那就需要３ｘ３０＝９０（bits)
而現在的電腦，在顏色的處理上，至少都用到高彩，甚至是全彩了。
接下來，我們來介紹一下，目前電腦在儲存圖片的幾個常用的格式。
一、點陣圖（.bmp .gif .jpg .png）
.bmp→Windows點陣圖（全彩），使用無失真的資料壓縮。
.gif→圖形交換格式（256色），網路上廣泛使用，支援動畫圖像，失真壓縮。
.jpg→聯合影像專家小組格式（全彩）。使用失真壓縮，可設定壓縮比。
.png→可攜式網路圖片（全彩）。無失真壓縮。可存成背景透明圖。
二、向量圖（.ai .svg）→放大不失真
.svg→基於XML的向量圖格式。(較通用)
.ai→Adobe Illustrator使用的向量格式。
底下有幾個情況，請你判斷適合用什麼圖形檔案格式來儲存？
|
圖片需求 |
適用格式 |
|
卡通動畫 |
.gif |
|
大自然的風景照片 |
.jpg 或 .png |
|
去背的人像圖片 |
.png |
|
模型設計圖 |
.ai 或 .svg |
各位小朋友，我們今天的課程就到此結束。
接下來，就請到隨堂測驗區，來檢驗一下你今天的學習成果吧！
加油，ＧＯ！
隨堂測驗網址
訂閱：
文章 (Atom)