任务三十五：听指令的小方块（三）

任务三十五：听指令的小方块（三）

面向人群：

有一定JavaScript基础

难度：

中等

重要说明

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

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

任务目的

• 练习JavaScript在DOM、字符串处理相关知识
• 练习对于复杂UI，如何进行数据机构建模

任务描述

• 如图，命令输入框由input变为textarea，可以允许输入多条指令，每一行一条
• textarea左侧有一列可以显示当前行数的列（代码行数列），列数保持和textarea中一致
• 当textarea发生上下滚动时，代码行数列同步滚动
• 能够判断指令是否合法，不合法的指令给出提示（如图）
• 点击执行时，依次逐条执行所有命令
• 对于GO，TRA以及MOV指令增加可以移动格子数量的参数，例如
  • GO 3：向当前方向前进三格
  • TRA TOP 2：向屏幕上方平移两格
  • MOV RIG 4：方向转向屏幕右侧，向屏幕的右侧移动四格

任务注意事项

• 实现功能的同时，请仔细学习JavaScript相关的知识
• 请注意代码风格的整齐、优雅
• 代码中含有必要的注释
• 建议不使用任何第三方库、框架

任务协作建议

• 如果是各自工作，可以按以下方式：
  • 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
  • 各自完成任务实践
  • 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
  • 相互讨论，最后合成一份组内最佳代码进行提交
• 如果是分工工作，可以按以下模块分工：
  • 带有多行标示的程序输入框
  • 新的指令解析及指令合法性判断

在线学习参考资料

• JavaScript入门篇
• MDN JavaScript