编程猫代码岛入门教程视频(编程猫nemo代码岛)

http://www.itjxue.com  2023-03-04 18:58  来源:未知  点击次数: 

有人了解编程猫吗?

产品宣传

看来是比较低调的一个团队,网上的信息不多,主要集中在官微和知乎。整体感觉年轻活力,很有“编程”的极客范,比如下图这样的。

人人都是程序员:初识《编程猫》

萌死人不偿命

官网

浓浓的卡通风,相信比较吸引主要受众——小朋友。不过整体来说,画面质感还有提升空间(可以考虑天天爱消除这种风格)。

人人都是程序员:初识《编程猫》

官网首页

官网内容当然是以“编程教学”为核心,分为以下板块:

首页

创作:进入编程猫的代码世界(需先登录),这里是我最喜欢的一部分,下文再具体介绍。

代码岛:类似于“我的世界”的一个页面,但是没有任何介绍,目前没去研究如何使用。

编程猫热点:即最近的新闻。

公开课:编程猫系统使用的常规操作,也是我收获最大的一部分,下文具体介绍。

精选作品、小说、部落、活动、最近作品: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++零基础教程。欢迎各位感兴趣的的小伙伴。

学习思路:

人人都是程序员:初识《编程猫》

学习资料:

有人了解编程猫吗

产品宣传

看来是比较低调的一个团队,网上的信息不多,主要集中在官微和知乎。整体感觉年轻活力,很有“编程”的极客范,比如下图这样的。

人人都是程序员:初识《编程猫》

萌死人不偿命

官网

浓浓的卡通风,相信比较吸引主要受众——小朋友。不过整体来说,画面质感还有提升空间(可以考虑天天爱消除这种风格)。

人人都是程序员:初识《编程猫》

官网首页

官网内容当然是以“编程教学”为核心,分为以下板块:

首页

创作:进入编程猫的代码世界(需先登录),这里是我最喜欢的一部分,下文再具体介绍。

代码岛:类似于“我的世界”的一个页面,但是没有任何介绍,目前没去研究如何使用。

编程猫热点:即最近的新闻。

公开课:编程猫系统使用的常规操作,也是我收获最大的一部分,下文具体介绍。

精选作品、小说、部落、活动、最近作品: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++零基础教程。欢迎各位感兴趣的的小伙伴。

学习思路:

人人都是程序员:初识《编程猫》

学习资料:

怎么用编程猫制作夜空

相信很多小朋友都曾经在自己的内心想象过,如果自己拥有翅膀或者超能力,能够像小鸟和超级英雄们一样,自由的在天空飞翔,那是多么美妙的一件事情。

今天猫叔就教大家利用Scratch软件中现有的素材,做一只会飞行的“喵咪”,帮大家实现童年时的小愿望,怎么样啊

本节内容

本节课动画

思路:

通过画面大家可以看出,咱们今天的故事其实就是通过建筑物、大树、云朵快速向后移动,让小猫看起来像在向前飞翔。

演出道具:

演出背景:

(可自行调整颜颜色)

猫叔逻辑分析时间

第一步:搭建舞台背景,请出演出道具。点击按钮,选择一个系统自带的纯色背景和猫咪形象。

第二步:让小猫动起来,并说出“飞行时间”。

?

这里想要让小猫动起来,就需要我们选择至少两个不同的小猫造型。

然后编写小猫的代码让小猫动起来,并说出“飞行时间”。

如果你想要将“飞行时间”这个声音加入游戏视频中,只需要先录好音频并上传到软件库中,最后在程序中加入播放声音的程序就可以了哦。

第三步:加入房子、大树、白云等移动的背景物,让小猫的飞行看起来更真实。

这些素材都在角色库中,大家像添加小猫时一样,点击按钮选择对应形象就可以了。

不过比较赞的是,Scratch软件中有将这些角色统一打包的造型,咱们只需选择一个,就获得了一套的使用素材,无需一个一个进行添加!

下面咱们就开始让房子向后动起来:

房子的程序

大树和白云的运动轨迹和房子同理,所以咱们只需要在将房子的程序分别复制到大树和白云上,然后根据实际情况调整具体数值和位置就可以了哦!

大树的程序

白云的程序

但是在编写程序之前,我们会发现大树和白云的形象在画面中可能会过大,所以需要调整他们的大小:在造型中选中该造型进行适当的缩小就可以了。

第四步:加入音乐,使视频播放起来更加舒服。

大家可以先下载好自己想要的音乐直接上传,然后在任一角色添加以下程序就可以了。

当这些都做完之后,咱们的小猫就已经可以在空中飞起来了!试着运行一下吧:

今日重点

咱们今天的课程,需要明确知道scratch的知识点:舞台的坐标系。掌握scratch舞台中坐标的最大值与最小值 X(-240,240) Y(-180,180)。

(责任编辑:IT教学网)

更多