Scratch 第十四课-打地鼠游戏

于 2024-03-01 11:32:17 发布
阅读量1.2k 收藏 8
点赞数 17
分类专栏： scratch编程 文章标签： 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44010641/article/details/136391279
版权

第十四课-打地鼠游戏

  • 学习目标

这节课我们一起来做一款打地鼠游戏

  1. 如何画圆形以及如何使用复制粘贴功能
  2. 随机数在游戏中的实际应用
  3. 逻辑运算符与判断语句的使用
  • 程序设计

程序分析 ： 打地鼠游戏小朋友们都玩过，在多个洞里面随机伸出老鼠的头，我们拿着锤子把伸出头的老鼠砸下去，砸中就增加分数。通过分析，我们可以知道需要那些角色：锤子（锤子有砸下去和抬起来两种角色）、老鼠、有多个洞的背景。下面我们看看如何设计这些角色

  1. 锤子设计：锤子设计比较简单，只需要使用矩形工具，画出两个长方形，（颜色/和外框可以自己调整）按下图摆放好即可。

：

在画图的过程中，切记中心点一定要对齐（不只这一次啊，以后也要注意。）

。

我们做完了正常的锤子，还需要一个砸下去的锤子的状体，这个就比较简单的，我们只需要对这个锤子围绕中心点旋转一定角度

  1. 带洞口的背景图：随便找一个背景，在背景图上画一些黑色的洞口，这个比较简单，我就直接上个效果图。有不会的小朋友可以私信我！

  1. 引入地鼠角色，由于scratch平台没有地鼠造型，大家可以选择”squirrel”这个造型，选择完后，大家也可以给这个角色增加一个被打晕的造型，操作方式类似锤子的设计。自己研究下吧！

下面我们开始编程！

  1. 第一步我们先做锤子的程序，锤子是跟着鼠标指针移动，鼠标移动到哪里，锤子跟着到哪里，当按下鼠标的时候，锤子是砸下去的造型，然后马上再恢复正常的造型。代码片段如下：

  1. 下面开始做squirrel的程序，由于有6个洞口，我们需要复制出来6个squirrel角色，把squirrel摆放到看洞口的位置，并调整好大小。

地鼠是一会隐藏，一会显示，当被锤子打到的时候。就换造型，同时增加积  分，代码片段如下：画红框的地方着重理解下！

今天的课程就到这里了，细节的部分大家可以自己研究下，看看如何设计会更好玩些。

课后：这节课我们用了6个地鼠角色来设计的，想想如何只用一个地鼠角色来设计今天这款游戏！有兴趣的可以尝试下，我们也会在后面的课程中讲到！

MarcoPage
关注
专栏目录
博客
第二十一课 Vue组件实用示例
11-15 307
本课主要介绍组件的一些小练习，通过这些小练习巩固下之前课程中的学习。2）结合methods组合示例。1）组件中值的双向绑定。
博客
第二十课 Vue组件中的data
11-10 319
Vue组件中的data是独立的，Vue官方不建议各单元互通数据，每个组件有各自的数据对象，类似于Vue示例中的data。data对象会为不同组件注册不同的数据，同结构不同的组件可以使用不同的独立数据。如果data数据的参数值是域外定义的公共数据，那么所有组件会共享数据。组件中的data必须是带有返回值的函数对象。以下每个按钮的点击，改变的是同一个数据模型。2）data数据独立。
博客
第十九课 Vue组件中的方法
11-06 295
组件中的方法拓展与实例对象中的方法拓展类似。
博客
第十八课 Vue中的JS组件模板和标签组件模板
11-04 344
Vue中的组件编写方式很多，这个应该算是Vue的缺点吧，本文将介绍Vue的其他组件的编写方式。这种方式比script组件高明不了多少，只是把JS换成了template标签。吐槽*非常奇怪的用法，通过JS标签生成组件，使用方式和。2）通过components进行拓展。2）通过components进行拓展。1）通过component进行拓展。1）通过component进行拓展。
博客
第十七课 component组件解析
11-02 333
我们可以通过在实例外部以component的方式拓展单个组件，当前方式需要在构建全局实例之前进行组件创建，不存在组件提升。components和methods类似，表示（组件）集合，我们也可以直接通过components进行组件拓展。如果组件涉及的DOM较多，必须要将所有DOM包裹在一个主DOM中，否则将报错。驼峰式命名在使用的时候，需要将调用的组件名转换成横杠式。3）通过components拓展组件。3）利用Vue对象进行生成。3）配合ES6模板语法使用。2）分离模板创建组件。
博客
第十六课 Vue中的组件
10-31 303
extend可以拓展组件模板，然后可以将extend拓展的模板班挂载到component上。Vue中可以自定义模板组件，组件的写法有很多种。4）将extend挂载到components上。3）将extend挂载到component上。1）在components上拓展组件。2）在component上拓展组件。6）template标签组件模板。5）JS组件模板语法。
博客
第十五课 Vue中的过滤器
10-30 278
new Vue({data: {},filters: {},})
博客
第十四课 Vue中的HTML及文本渲染
10-27 423
v-html指令可以在DOM中渲染新的子HTML DOM，Vue官方认为HTML渲染是不安全的，并不建议直接做HTML插入操作。v-text可以将字符渲染进DOM中。
博客
第十三课 Vue中的watch观察模式
10-26 245
watch用于监测数据的变化，如果发生变化会及时返回修改前和修改后的数据。
博客
第十二课 Vue中的事件修饰符
10-25 241
事件修饰符的使用场景较多，主要为了处理事件冒泡和默认事件等所带来的一系列问题。
博客
第十一课 Vue中的按键修饰符
10-21 215
test: 38new Vue({methods: {fun(){alert('按回车键的到的内容');})
博客
第十课 Vue中的多种事件绑定
10-20 311
1） focus (进入焦点)2）鼠标事件 - 鼠标经过。
博客
第九课 Vue中的v-bind指令拓展
10-18 395
【代码】第九课 Vue中的v-bind指令拓展。
博客
第八课 Vue中的v-bind指令
10-17 587
v-bind style 可以进行内嵌样式编写，属性值为字符，多属性用逗号分隔。动态绑定的class与原生class名不冲突，最终会合并成为一个。v-bind中的内容可以以{}运算符配合，进行简单的JS运算。动态修改的class名来源于data对象，而非手动给定。v-bind用于属性绑定，使得属性可以动态修改。4） v-bind绑定多class名。v-bind可以利用:作为简写方式。1） 动态切换class。
博客
第七课 Vue中的v-for遍历指令
10-15 415
v-for用于对象遍历（数组/JSON），渲染数据列表。2）遍历对象键/值对。
博客
第六课 Vue中的条件语句指令
10-13 359
v-if指令与v-show的功能在部分场景重叠，常用语条件判断。
博客
第五课 Vue中的显示隐藏指令
10-11 613
v-show用于显示或隐藏DOM元素，配合布尔值表示显示状态，使用场景较多。指令中也可以传入data参数。2）配合methods使用。1） 配合data使用。
博客
第四课 Vue中的v-model数据双向绑定
10-09 270
v-model用于非成对DOM的数据绑定({{}}模板数据绑定只适合成对标签)
博客
第三课 Vue中的方法的定义及事件绑定指令
10-08 308
方法定义通过Vue对象中的methods属性进行拓展1）基础示例new Vue({methods: {fun(){alert(1);})2）操作对象数据new Vue({data: {},methods: {fun(){alert(val);})
博客
第二课 Vue中的数据绑定
10-07 279
DOM标签通过大胡子语法绑定相应的属性值，直接将data对象中的属性名写入即可（参考基础示例）Vue构造函数内部拓展了内置数据对象data，所有数据放置在data对象内（参考基础示例）Vue中的数据绑定采用大胡子语法，即双{}进行数据绑定。模板（大胡子）中允许进行简单的JS运算。a) 不允许出现变量定义行为。b) 不允许出现条件判断语句。1）内置data对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值