2014年12月31日 星期三

[小貓咪程式開發]精靈融合

兩個月前,我給Jimmy指派這個精靈融合的程式作業,大概解釋一下我的想法,剩下的設計實作就任由他發揮,Jimmy依據以往玩遊戲的經驗,設計許多的使用者介面切換動作,但是Scratch本身並不支援視窗、表格等UI元件,所以他自己從無到有花許多時間寫程式,由於Scratch廣播訊息不方便以中文命名,Jimmy直接以數字或字母命名訊息,整個程式架構夠複雜到讓小小年紀的他,體會到什麼是什錦麵或義大利麵式爛設計模式



這裡可以看完整的程式碼

為了達到程式效果,Jimmy大概用了超過40個以上的訊息廣播,除錯起來讓人眼花撩亂,不過對一個國小四年級小朋友來說,肯花時間有耐心地觀察十多個角色之間訊息傳遞, 實在難能可貴

精靈融合玩法,先按右上方綠旗,再按PLAY



鼠標移到左上方,有火系、水系、植物系目錄選項,先選擇火系精靈



這時出現的表格會列出所有火系精靈,目前的版本只列出兩種火精靈,接下來點選精靈



按MIX可融合兩種精靈



這是融合後的新精靈



按BOOK可瀏覽你有哪些新精靈



這個頁面花了好多時間除錯,未來如果有更多原始精靈,Jimmy鐵定要耗更多時間修改,他就會體會到什麼是什錦麵/義大利麵爛設計模式

2014年12月23日 星期二

戰鬥程式碼(CodeCombat),一款讓小朋友打怪得寶物順便學寫程式的好遊戲

戰鬥程式碼(CodeCombat),是code.org推動的"寫程式一小時"活動所推薦的遊戲網站

這是官方介紹文
"為什麼使用CodeCombat?

想學程式嗎? 你不需要課程。你需要的只是大量的時間去"玩"程式。

寫程式應該是有趣的。當然不是 「耶!拿到獎章了。」 的有趣, 而是 「媽我不要出去玩,我要寫完這段!」 般引人入勝。這是為甚麼CodeCombat被設計成多人對戰「遊戲」,而不是遊戲化「課程」。在你對這遊戲無法自拔之前,我們是不會放棄的─幫然,這個遊戲,將是有益於你的。

如果你要沉迷遊戲的話,就來沉迷CodeCombat,成為科技時代的魔法師吧!"
用這款遊戲教Jimmy小朋友編寫程式碼,擺脫單純教IDE工具過程的無聊沉悶,一般寫程式要時時注意的"眉眉角角",如少寫一個括號或逗號等文法錯誤,codeCombat很貼心的隨時提示,所謂的物件導向程式設計對資訊系學生可能是半學期的課程,可是在CodeCombat遊戲系統是自然而然的一件事,話不多說直接給它玩就對了

不需註冊直接按開始遊戲就可以玩,若過了幾關覺得好玩再註冊也不遲,註冊時會保留歷史紀錄



一開始要選擇遊戲主角,還有與遊戲互動的程式語言,我比較熟Javascript,所以就選它



遊戲的主角擁有的第一項裝備就是靴子,靴子這個物件有四個方法(method)可以使用,moveUp/上移, moveDown/下移, moveRight/右移, moveLeft/左移



第一關會提示初學者輸入moveDown,小朋友比較不習慣鍵盤輸入,建議直接複製貼上



如果熟悉鍵盤輸入的話,在程式編輯視窗輸入"this.",遊戲會自動帶出物件方法選單



很貼心的告訴玩家,正在輸入的方法有何作用,小朋友雖然看不太懂英文,多嘗試執行幾次其實也猜得出來



少打個分號;,遊戲也會告訴你修正程式,幫助玩家學習除錯,這對日後正式寫程式開發軟件很有助益



第一關總是很簡單,只要使用moveRight/右移 moveDown/下移, moveRight/右移三個方法,便能順利到達寶物所在,按下執行便能知曉你計畫的路線對不對?



闖關成功!!!



2014年11月1日 星期六

[小貓咪程式開發]3D錯視(Illusion)躲貓貓

隨著滑鼠移動,小喵咪會躲到柱子後方遠處 ,但是偶爾小喵咪跑到畫面上下某個範圍會穿幫,所以Jimmy小朋友必須會使用複雜的邏輯判斷x與y座標,讓小喵咪不得於踰越雷池一步

2014年10月16日 星期四

[小貓咪程式開發]從影分身中找到小喵咪本尊

由於Scrath 2多了幾個處理分身(clone)的指令積木,這些指令用的好的話,其實可以大幅簡化程式邏輯及裁撤冗餘角色,為了讓Jimmy小朋友熟悉角色影分身的用法, 所以構想了讓小喵咪擁有卡通火影忍者鳴人的影分身能力,一開始持球的小喵咪是本尊,隨後出現的小喵咪其實都只是同一角色的影分身而已,只要滑鼠能點到本尊的話 ,不管畫面出現多少影分身,馬上如同夢幻泡影般立即消失


這裡可以看完整的程式碼 , 小喵咪本尊的程式碼其實是很簡單的

2014年10月14日 星期二

[小貓咪程式開發]分身克隆實驗,文數字輸入

由於Scrath 2多了幾個處理分身(clone)的指令積木,這些指令用的好的話,其實可以大幅簡化程式邏輯及裁撤冗餘角色,為了讓Jimmy小朋友熟悉角色影分身的用法, 所以構想了一般程式開發常用到文數字輸入的為題目,不管鍵盤輸入後畫面出現多少字,其實都只是同一角色的影分身而已

滑鼠先按一下綠旗並移至程式畫面,便可以輸入文數字


這裡可以看完整的程式碼

2014年10月9日 星期四

自己的全像圖(Holograms)自己刮

只要準備一張黑色塑膠片、一只圓規及一張簡單的幾何圖畫,就能創造屬於自己的全像圖,你相信嗎?

詳細解釋原理及製作過程的網站在此
ps.親自實驗的心得,在大太陽底下觀看才有最佳效果

2014年9月26日 星期五

用Scratch開發的《Flappy Bird--浩呆鳥》

《Flappy Bird--浩呆鳥》是一款玩法簡單卻需要耐心才能過關,很適合大人小孩一起來玩的小遊戲,有人已經寫好Scratch版本的Flappy Bird,整個程式架構可以說麻雀雖小五臟俱全,裡頭有遊戲開發的所需的基本要素,喜歡玩遊戲的大小朋友不妨花點時間閱讀程式碼,嘗試看看擴充遊戲的邏輯,應該會有不少收穫

請按空白鍵,便能操控遊戲
這裡可以看完整的程式碼

2014年9月19日 星期五

[小貓咪程式開發]甲蟲飼育遊戲


Jimmy這個暑假以來很熱衷養甲蟲,所以這次的小喵咪程式題目就是甲蟲飼育遊戲,將平日飼養甲蟲的心得作為開發程式的靈感來源!!!

2014年7月16日 星期三

【Jimmy暑假機器人程式探索4】簡易NXT顏色英文教學器

很簡單的程式題目,要Jimmy小朋友寫程式讀取顏色感應器偵測值,並將數值翻譯為對應的顏色英文單字,顯示在NXT的小螢幕上,作品完成後,Jimmy便迫不及待地找目標測試囉!!!

2014年7月12日 星期六

【Jimmy暑假機器人程式探索3】可愛又滑稽的毛毛蟲

最近看到元生國小機器人社團--毛毛蟲車,看來非常簡單又可愛,很適合Jimmy小朋友組裝,剛好拿來測試馬達轉動指令,Jimmy測試了許久,後輪只要動力或角度太大,常常會踢到前輪而摔跤,相反前輪衝太快就會一字馬的屁股跌坐在地上
這是我們參考的毛毛蟲車

2014年7月7日 星期一

【Jimmy暑假機器人程式探索2】向左走向右走兩個碰撞感應器當按鈕

這次的題目,是運用兩個碰撞感應器作為按鈕,控制NXT機器人向左向右,重點是讓Jimmy小朋友學會使用邏輯控制積木判讀感應器回傳的數據,而碰撞感應器超簡單只回傳兩個值,1與0代表感應器有按或沒按兩種狀態。Jimmy注意到我的迴圈控制積木的中文命名很囉唆,但是為了讓他對指令積木的用途能立即理解,目前我還是傾向讓積木中文名稱保持又臭又長的命名方式,讓整段程式碼閱讀起來可以很清楚順暢

【Jimmy暑假機器人程式探索1】繞著正方形磁磚走一回

題目出的很簡單,因為我也才做好幾個馬達指令而已,用Blockly做中文指令真的有點小麻煩,不過讓NXT機器人繞著地板磁磚走一圈,也夠Jimmy小朋友來回測試修正忙了許久,Jimmy處理機器人轉彎不是運用兩個馬達一快一慢,而是一馬達保持前進而另一個馬達後退,感覺上不是很流暢,但是有達到基本要求,過關!!!

2014年6月24日 星期二

Blockly NXC for my Mindstorms NXT

很久沒有接觸Blockly,有些生疏了,Jimmy小朋友前陣子也學過一些NXC,趁暑假快來臨,將NXC比較常用的指令轉為Blockly積木,讓小朋友有個充實的暑假^ ^

2014年6月4日 星期三

Lightbot跳格子機器人

Lightbot跳格子機器人,這是在code.org的"Hour of Code,一小時學電腦程式"計畫中提供的小遊戲,小朋友可透過反覆修改指令測試破解關卡,一些很難三言兩語向小朋友解釋清楚的函式與遞迴觀念,玩個幾次後便能心領神會

2014年5月15日 星期四

如何在Linux上編譯NXC並透過USB下載到樂高Mindstorms NXT

  1. 增加名為legonxt的群組.命令列視窗輸入如下指令
    sudo addgroup legonxt
  2. 將你的帳號加入legonxt群組.
    sudo adduser YourUserName legonxt
  3. 建立檔名為45-legonxt.rules的文字檔.檔案內容如下
    # NXT brick
    SUBSYSTEM=="usb", ATTRS{idVendor}=="0694", ATTRS{idProduct}=="0002", SYMLINK+="legonxt-%k", GROUP="legonxt", MODE="0666"
  4. 複製此檔到 /etc/udev/rules.d.
    sudo cp 45-legonxt.rules /etc/udev/rules.d
  5. 重開機後將NXT連上電腦的USB槽,應該會看到目錄/dev會出現一個檔案
    /dev/legonxt-x-y
    x與y值會依你插入的USB port而定
  6. 下載nbc-1.2.1.r4.tgz並解壓縮
  7. 編譯程式並將執行檔透過USB載入NXT
    nbc -d -S=usb program.nxc
  8. 也可以在wine上執行bricxcc IDE編輯並編譯程式碼,再透過上個步驟載入NXT
以上資料參考自這裡這裡

2014年4月19日 星期六

[小貓咪程式開發]簡單的加密解密程式

這個簡單的加密解密程式課程歷經好幾週,課程內容對Jimmy來說極其無聊,上課時常假裝"度辜"對我表示抗議,可是Jimmy學習多年的小喵咪程式,若不趕快踏出理解迴圈運作這痛苦的一步,永遠是自我感覺良好的原地踏步

這隻程式需將輸入的字串轉存到S陣列清單,然後將S陣列內容逐項查字母表,再將字母表查到的下一筆內容置換到S陣列清單,這會大量使用到陣列及索引值及迴圈等程式技巧,而且藉由將程式邏輯分拆為多塊函式積木逐漸開展實作,讓Jimmy小朋友每次回到課程上時,都能藉由模仿微調上次完成的函式積木,在有限的時間內完成任務

請按空白鍵,接著輸入你要加密的字串
這裡可以看程式碼

2014年3月6日 星期四

沒學過程式的你,也能用程式積木寫個《Flappy Bird--浩呆鳥》

這是code.org新推出的程式課程,學過Scratch小喵咪程式的Jimmy,很快地就通過十個關卡的考驗,輕鬆將程式碼完成,還問我有沒有其他的課程可以玩

2014年2月22日 星期六

[小貓咪程式開發]轉輪盤遊戲

Jimmy的新作,轉輪盤遊戲,程式碼請看這裡
滑鼠先按一下程式畫面裡的button,再輸入數目字猜猜看

2014年2月12日 星期三

[小貓咪程式開發]磅秤

三年級的Jimmy學過重量及角度的概念,所以我出個模擬磅秤的程式題目,讓Jimmy學習不同單位的轉換,一開始Jimmy將輸入的重量直接當作指針轉動的角度,執行結果當然與預期不符,此時便可教導jimmy如何換算比例求得正確的角度

滑鼠先按一下程式畫面,再按空白鍵可輸入重量

2014年1月23日 星期四

凱史免費能源可樂瓶實驗

透過小女孩的可樂瓶實驗解說,可知凱史的免費能源人人皆可在家中複製,等哪天電價高貴到平民百姓用不起時,就是自由能源大行其道之日,不過要供應110V的電源需要用到幾個可樂瓶啊?