vlambda博客
学习文章列表

和开发任何⼀款软件⼀样，上来第⼀件事肯定不是直接写代码，⽽是 设计，如果缺乏设计规划，最后代码只会越写越乱，更何况breakout也不是 ⼀个逻辑很简单的游戏软件。磨⼑不误砍柴⼯，在我们开始⽤RxJS编写代 码实现breakout之前，⾸先来计划⼀下如何来做。因为我们使⽤的是RxJS，我们确定这个游戏会以⽹页应⽤的形态存 在，接下来，就看这个⽹页应⽤如何实现，先回答这⼏个问题：·程序的输⼊是什么？·程序的输出是什么？·如何根据输⼊产⽣输出？接下来，就来探索这⼏个问题特定于breakout游戏的答案。1.输⼊ 在breakout中，玩家能够操纵的就是底部的球拍，所以玩家的输⼊就是 键盘上的左右⽅向键。这个游戏的操纵并不复杂，玩家按下左⽅向键，球 拍向左侧移动；玩家按下右⽅向键，球拍就向右侧移动。如果⽤RxJS来实现，很⾃然会想到构建⼀个Observable对象，来源就 是⽹页DOM中的按键操作，⽽且，我们只关⼼左右两个⽅向键。虽然还没 有开始写代码，但是可以肯定，代码中会⽤上fromEvent这个操作符。既然游戏界⾯中球拍的位置由⽤户按键决定，⽽⽤户按键数据存在于 Observable对象中，那么，肯定也可以根据按键数据的Observable对象产⽣ 代表球拍位置的Observable对象。除了玩家的输⼊，驱动游戏进度还有⼀个因素就是时间，即使⽤户不 做任何操作，游戏中的那个弹球会移动，撞到球拍或者墙体会反弹，这些 都可以认为有⼀个“时钟”在驱动游戏的进度。为了实现这个功能，可以想 象，游戏中肯定需要⽤interval这个操作符产⽣⼀个控制节奏的Observable 对象，每隔⼀段很短的时间产⽣⼀个数据，这个数据会驱动弹球重新计算 ⾃⼰的位置，会引发计算来判断弹球是不是和球拍、墙体或者砖块发⽣