看來是比較低調的壹個團隊,網上的信息不多,主要集中在官微和知乎。整體感覺年輕活力,很有“編程”的極客範,比如下圖這樣的。
人人都是程序員:初識《編程貓》
萌死人不償命
官網
濃濃的卡通風,相信比較吸引主要受眾——小朋友。不過整體來說,畫面質感還有提升空間(可以考慮天天愛消除這種風格)。
人人都是程序員:初識《編程貓》
官網首頁
官網內容當然是以“編程教學”為核心,分為以下板塊:
首頁
創作:進入編程貓的代碼世界(需先登錄),這裏是我最喜歡的壹部分,下文再具體介紹。
代碼島:類似於“我的世界”的壹個頁面,但是沒有任何介紹,目前沒去研究如何使用。
編程貓熱點:即最近的新聞。
公開課:編程貓系統使用的常規操作,也是我收獲最大的壹部分,下文具體介紹。
精選作品、小說、部落、活動、最近作品:UGC內容的推薦。
人人都是程序員:初識《編程貓》
官網小說推薦.png
創作:同上
發現:主要是作品(用戶發布的編程作品)和部落(即編程社區)。
百科:問題討論、官方角色資料,還包括漫畫和小說。
素材:這裏提供了壹些可以用到編程中的素材,比如背景、角色、道具等。
學校:與學校合作的壹些介紹與接入。
下載:相關APP以及chrome的下載(系統運行需要chrome內核)
個人中心:用戶的主頁與信息,還包括代碼、小說等作品的管理。
壹個建議
編程貓官網應該歸類到內容(代碼/小說/漫畫)+學習社區,那麽主要用戶就是兩類:
創作者:主要需求是通過平臺創造內容,提升自己、收獲粉絲。偶爾需要學習知識,以及收集素材。
消費者:主要需求是消費這些內容(小遊戲/小說/漫畫)。偶爾需要泡社區、與創作者互動。
當然,對於真實用戶,是完全可以在兩種角色之間切換的。
基於以上兩點,再次整理如下:
“發現”中的“作品”是給消費者的(發現好作品),而“部落”又是給創作者的(發現好社區)。
“百科”中的“討論中心”是給創作者的(提問/答問),而“漫畫/圖書館”又是給消費者的(看漫畫/小說)。
“素材”是給創作者,“學校”是面向學校,這些都比較清晰。
所以不妨基於兩類用戶的特點,對板塊進行重新劃分。
面向消費者:主欄目是“發現作品”,下設子欄目:遊戲、漫畫、小說,每個欄目可以加上“我要創作”,來引導其成為創作者。
面向創作者:主欄目是“源碼社區”,下設子欄目:熱門源碼、討論、部落、素材。
(PS:百科中的“資料圖鑒”目前還未了解,暫不討論。)
公開課
這部分是我“入門”編程貓的關鍵,17個短視頻,看完妳也能輕松學會在編程貓“寫代碼”。
人人都是程序員:初識《編程貓》
編程主界面
每個視頻也是壹個小故事,比如《編程貓初見阿短》,“編程貓”就告訴“阿短”如何在屏幕內移動(設置“碰到邊緣即反彈”)
下面貼出我印象比較深的幾點:
1、初見阿短
動作—移到鼠標指針:角色跟隨鼠標移動
動作—面向鼠標:使角色面向鼠標方向
動作—碰到邊緣就反彈:使角色不再會走到屏幕之外
2、重復執行
控制—重復執行:使角色不斷重復執行某個動作
3、坐標
動作—移動到(X,Y):可以改變角色的坐標
4、廣播
很有意思的功能,可以理解為傳參,或者全局變量,可以讓壹個角色的動作對另壹個角色造成影響。
比如示例中通過點擊“禮帽”觸發動作“廣播:1”。然後對“動物”設置動作當收到“廣播:1”時,將自己設為可見。實現的是玩家點擊禮帽“變”出動物的效果。
位置在:”事件—當收到廣播/收到廣播時“。
5、如果
這裏演示了經典的if-else的寫法。整個函數在壹個循環體“重復執行”中。
遊戲很像前幾年流行的Flip Bird(哈哈當年我玩到過200多分),玩家按下鼠標時,角色往上跳壹下,然後慢慢下落。
那麽角色就包括3個動作,對應if的三個情況:
飛行/下落:鼠標按下時移動12px,否則向下移動3px
碰到障礙物:遊戲結束,停止腳本
碰到南瓜怪:闖關成功,退出循環
人人都是程序員:初識《編程貓》
經典的If-else
6、外觀
基本是結合之前幾課,實現了“人物進入飛船、飛船飛走”的動作。
拆解如下:燈光在1秒內亮起,並發送廣播”進艙“——人物接收到”進艙“,在1秒內隱藏,並發送廣播”出發“——飛碟收到廣播”出發“後閃燈、變小、改變坐標值
人人都是程序員:初識《編程貓》
Paste_Image.png
Tips:圖層順序是右側覆蓋左側
7、聲音
為角色添加造型與聲音(三頭龍的5個造型對應著5種不同的血量)
添加聲音很簡單,這裏壹個新方法是:兩個角色之間的信息交互是用另壹個的造型編號觸發,而沒有用“廣播”。
人人都是程序員:初識《編程貓》
三頭龍與勝利動畫
人人都是程序員:初識《編程貓》
利用角色編號來傳遞信息
8、畫筆
這裏提供了壹個簡單的畫筆工具,可以直接將屏幕變為壹個畫板。
代碼不復雜,重點是起筆/落筆的設置,如下
人人都是程序員:初識《編程貓》
畫筆設置
9、變量
本章稍微復雜,需要實現的效果是:鯉魚在河道不斷左右運動,玩家點擊後消失,並計分+1。
鯉魚的運動,可以這樣寫(註意碰到邊緣反彈,是可以設置旋轉模式的):
人人都是程序員:初識《編程貓》
呆鯉魚的運動
得分的計算,可以這樣寫(初始設置為0,每次點中呆鯉魚+1):
人人都是程序員:初識《編程貓》
得分計算
最後這裏有壹個鏈表。它設定了遊戲時間只有6秒鐘,根據玩家得分數來返回壹個“擊敗80%玩家”的信息。當然也是用於結束遊戲(腳本)的計時器。
人人都是程序員:初識《編程貓》
結束腳本與返回結果
10、克隆
這壹part,需要的效果是:在壹個固定高度,每秒在水平任意位置出現壹個飛鏢,並依此落下。使用的方法是“克隆”,代碼的解析如下。
設置角色“飛鏢”,將其隱藏,
每秒創建壹個自己的克隆體,克隆體移動到Y=500,X=隨機的位置
作為克隆體啟動時,不斷下落、旋轉
Tips:註意最後加上“如果碰到下邊緣就刪除自己”,相當於釋放內存,不然瀏覽器會悲劇。
人人都是程序員:初識《編程貓》
飛鏢的運動
練習作品
目前我在上面做了壹個飛機大戰,踩了幾個坑,不過也算是完成了。已實現的需求:
玩家鍵盤控制飛機的移動、發射子彈;
敵方飛機隨機從上空出現;
擊落敵機,得分+1;
被敵機撞到,生命值-1,獲得3秒無敵狀態回屏幕中央;
生命值將為0,遊戲結束。
人人都是程序員:初識《編程貓》
飛機大戰
壹些思考
圖形化界面,很容易上手。但是完成這個小作品也是非常有成就感(像程序員壹樣創造世界)。
代碼思維:比如“面向對象”的思維(將飛機、子彈、場景都視為對象),比如“清理內存”思維(克隆體壹定要有刪除機制),相信這些對小朋友的思維也很有啟發作用。
遇到困難的時候,我是回到公開課去看的,因為“百科”和社區(包括我加入了QQ群)能了解到的信息不多,就像FCC推崇的“Read-Search-Ask“,這部分的內容其實也有待完善。
比如作為新手,我需要的信息包括:編程界面各個功能的使用說明,常見場景(Read);能搜到壹些常見錯誤的解答(Search);可以學習和討論其他人的優秀作品(Ask)。這三點做好以後,相信能吸引更多人在這裏創作。
其實做為壹個開發者,有壹個學習的氛圍跟壹個交流圈子特別重要這裏我要推薦c++交流群:“648778840”,不管妳是小白還是大牛歡迎入住,大家壹起交流成長。小編會在群中不定期分享幹貨源碼,包括我精心整理的壹份c++零基礎教程。歡迎各位感興趣的的小夥伴。
學習思路:
人人都是程序員:初識《編程貓》
學習資料: