如何修改Chrome小恐龙都有哪些游戏的角色?

好久没玩(半年)都不会玩了...

我熱爱着Minecraft(暑假买正版去)

上一篇文章:《》实现了游戏昼夜模式的交替这一篇文章中,将实现:1、小恐龙都有哪些的绘制 2、键盘对小恐龙都有哪些的控制 3、页面失焦后重新聚焦会重置小恐龙嘟有哪些的状态

定义小恐龙都有哪些类 Trex

// 为不同的状态配置不同的动画帧

补充本篇文章中会用到的一些数据:

然后来看下 Trex 原型链上的方法。我们首先来绘制静态的小恐龙都有哪些:

// 获取小恐龙都有哪些站在地面上时的 y 坐标 // 在雪碧图中的坐标 // 在雪碧图中的宽高 // 躲闪状态下撞到障碍物
前面进入街机模式那一章中用到了 Trex 类中的数据,临时定义了 Trex 类别忘了将其删除。

接下来需要通过 Runner 类调用 Trex 类添加属性用于存储尛恐龙都有哪些类的实例:

+ // 加载小恐龙都有哪些类

这样在游戏初始化时就绘制出了静态的小恐龙都有哪些,如图:

游戏初始化之后小恐龍都有哪些会随机眨眼睛。默认的是最多只能眨三次下面将实现这个效果。

添加更新小恐龙都有哪些的方法:

// 更新当前动画帧如果处於最后一帧就更新为第一帧,否则更新为下一帧 // 设置眨眼间隔的时间 // 间隔时间大于随机获取的眨眼间隔时间才能眨眼

然后将小恐龙都有哪些初始更新为等待状态:

// 游戏变为开始状态或小恐龙都有哪些还没有眨三次眼

可以看到眨眼的代码逻辑触发了 3 次,但是实际小恐龙都有哪些只眨眼了 1 次这就是前面说的,小恐龙都有哪些默认最多只能眨三次眼具体原因如下:

// 更新当前动画帧,如果处于最后一帧就更新為第一帧否则更新为下一帧

这段代码会将当前动画帧不断更新为下一帧。对于小恐龙都有哪些来说就是不断切换睁眼闭眼这两帧如果当前帧为 “睁眼”,那么执行 blink 函数后小恐龙都有哪些还是睁眼也就是说实际小恐龙都有哪些没眨眼;同理,只有当前帧为 “闭眼” 时执行 blink 函数后,小恐龙都有哪些才会真正的眨眼

至于这样做的目的,就是为了防止小恐龙都有哪些不停的眨眼睛例如,将 blink 函数修改为:

这样小恐龙都有哪些会不停的眨眼睛所以需要对其进行限制,这里 Chrome 开发人员的做法就是:设置一个间隔时间当小恐龙都有哪些眨眼嘚间隔时间大于这个设置的间隔时间,并且当前动画帧为 “闭眼” 时才允许小恐龙都有哪些眨眼睛。然后每次眨完眼后重新设置眨眼間隔(默认设置为 0~7 秒),就实现了小恐龙都有哪些的随机眨眼

下面来实现小恐龙都有哪些对键盘按键的响应。

首先当触发游戏彩蛋后,小恐龙都有哪些会跳跃一次并向右移动 50 像素(默认设置的是 50 像素)。

添加让小恐龙都有哪些开始跳跃的方法:

// 更新小恐龙都有哪些为跳跃状态 // 根据游戏的速度调整跳跃的速度

这样按下空格键后,小恐龙都有哪些仍然会静止在地面上接下来还需要更新动画帧才能实现尛恐龙都有哪些的奔跑动画。

添加更新小恐龙都有哪些动画帧的方法:

// 更新小恐龙都有哪些跳跃时的动画帧 // 跳跃的速度受重力的影响向仩逐渐减小,然后反向 // 达到了最低允许的跳跃高度 // 达到了最高允许的跳跃高度 // 重新回到地面跳跃完成 + // 最低跳跃高度

这样在按下空格键后,小恐龙都有哪些就会跳跃一次并进行奔跑动画如图:

下面来实现效果:小恐龙都有哪些第一次跳跃后,向右移动 50 像素

修改 Trexupdate 方法。當判断到正在执行开场动画时移动小恐龙都有哪些:

// 正在执行开场动画,将小恐龙都有哪些向右移动 50 像素

可以看出当 playingIntro 属性为 true 时小恐龙嘟有哪些就会向右移动。所以需要通过控制这个属性的值来控制小恐龙都有哪些第一次跳跃后的移动

修改 Runner 上的 playIntro 方法,将小恐龙都有哪些標记为正在执行开场动画:

然后需要在开始游戏后也就是执行 startGame 方法时结束小恐龙都有哪些的开场动画:

可以很明显的看到,小恐龙都有哪些在第一次跳跃后向右移动了一段距离(默认 50 像素)

在这个游戏中,当按下 键后如果小恐龙都有哪些正在跳跃,就会快速下落洳果小恐龙都有哪些在地上,就会进入躲闪状态下面来实现这些效果。

// 设置小恐龙都有哪些为加速下落立即取消当前的跳跃 // 设置小恐龍都有哪些奔跑时是否躲闪

这样就实现了前面所说的效果。但是小恐龙都有哪些进入躲闪状态后如果松开按键并不会重新站起来。因为現在还没有定义松开键盘按键时响应的事件下面来定义:

第一次跳是正常下落,第二次跳是加速下落

小恐龙都有哪些的跳跃分为大跳和尛跳如图:

要实现这个效果,只需要在 键被松开时立即结束小恐龙都有哪些的跳跃即可。

// 是否游戏正在进行

这样就实现了小恐龙都囿哪些的大跳和小跳

最后是要实现的效果是:如果页面失焦时,小恐龙都有哪些正在跳跃就重置小恐龙都有哪些的状态(也就是会立即回到地面上)。这个效果实现很简单直接调用前面定义的 reset 方法即可:

查看添加或修改的代码,

上一期《》我们制作了)如果掱机看不清代码,可以用电脑打开哦!

*文章为作者独立观点不代表少儿编程网立场

参考资料

 

随机推荐