任务二十六：行星与飞船（一）

任务二十六：行星与飞船（一）
面向人群：
有一定JavaScript基础，希望学习或加强面向对象编程及设计模式相关知识的同学
难度：
中等

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

  • 练习JavaScript面向对象设计
  • 实践一些基础的设计模式

任务描述

  • 如图（打开查看），创建一个虚拟宇宙，包括一个行星和飞船
  • 每个飞船由以下部分组成
    • 动力系统，可以完成飞行和停止飞行两个行为，暂定所有飞船的动力系统飞行速度是一致的，比如每秒20px，飞行过程中会按照一定速率消耗能源（比如每秒减5%）
    • 能源系统，提供能源，并且在宇宙中通过太阳能充电（比如每秒增加2%，具体速率自定）
    • 信号接收处理系统，用于接收行星上的信号
    • 自爆系统，用于自我销毁
  • 每个飞船的能源是有限的，用一个属性来表示能源剩余量，这是一个百分比，表示还剩余多少能源。
  • 能源耗尽时，飞船会自动停止飞行
  • 飞船有两个状态：飞行中和停止，飞船的行为会改变这个属性状态
  • 飞船的自我销毁方法会立即销毁飞船自身
  • 行星上有一个指挥官（不需要在页面上表现出其形象），指挥官可以通过行星上的信号发射器发布如下命令
    • 创建一个新的飞船进入轨道，最多可以创建4个飞船，刚被创建的飞船会停留在某一个轨道上静止不动
    • 命令某个飞船开始飞行，飞行后飞船会围绕行星做环绕运动，需要模拟出这个动画效果
    • 命令某个飞船停止飞行
    • 命令某个飞船销毁，销毁后飞船消失、飞船标示可以用于下次新创建的飞船
  • 你需要设计类似如下指令格式的数据格式 
    			{
				id: 1,
				commond: 'stop'
			}
  • 指挥官通过信号发射器发出的命令是通过一种叫做Mediator的介质进行广播
  • Mediator是单向传播的，只能从行星发射到宇宙中，在发射过程中，有30%的信息传送失败（丢包）概率，你需要模拟这个丢包率，另外每次信息正常传送的时间需要1秒
  • 指挥官并不知道自己的指令是不是真的传给了飞船，飞船的状态他是不知道的，他只能通过自己之前的操作来假设飞船当前的状态
  • 每个飞船通过信号接收器，接受到通过Mediator传达过来的指挥官的广播信号，但因为是广播信号，所以每个飞船能接受到指挥官发出给所有飞船的所有指令，因此需要通过读取信息判断这个指令是不是发给自己的

任务注意事项

  • 实现功能的同时，请仔细学习JavaScript相关的知识
  • 相关信息发送、接受等，建议在控制台中输出
  • 指挥官下达销毁飞船指令后，默认在指挥官那里就已经默认这个飞船已经被销毁，但由于有信息传递丢失的可能性，所以存在实际上飞船未收到销毁指令，而指挥官又创建了新的飞船，造成宇宙中的飞船数量多于创建的4个上限。
  • 任务说明中的各种数值说明只是参考，可能存在不合理性，可以自行设定
  • 实现各种功能、模块时，不需要生搬硬套设计模式，但希望你就设计模式相关知识进行学习，并进行合理的借鉴运用
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 允许使用jQuery等库，但不建议使用React、Angular等框架

任务协作建议

  • 如果是各自工作，可以按以下方式：
    • 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
    • 各自完成任务实践
    • 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
    • 相互讨论，最后合成一份组内最佳代码进行提交
  • 如果是分工工作（推荐），可以按以下模块切分
    • 样式实现
    • 飞船类
    • 行星及指挥官
    • Mediator

在线学习参考资料

posted @ 2016-03-24 21:17  huansky  阅读(270)  评论(0)  编辑  收藏  举报