基于上个任务，继续进行改进

任务描述

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

任务描述

• 根据之前的任务，对于正方形的移动增加相应动画，包括移动和旋转
• 每个指令的执行时间是1s（可以自己调整）
• 增加新的指令如下：
• GO：向蓝色边所面向的方向前进一格（一格等同于正方形的边长）
• TUN LEF：向左转（逆时针旋转90度）
• TUN RIG：向右转（顺时针旋转90度）
• TUN BAC：向右转（旋转180度）
• TRA LEF：向屏幕的左侧移动一格，方向不变
• TRA TOP：向屏幕的上面移动一格，方向不变
• TRA RIG：向屏幕的右侧移动一格，方向不变
• TRA BOT：向屏幕的下面移动一格，方向不变
• MOV LEF：方向转向屏幕左侧，并向屏幕的左侧移动一格
• MOV TOP：方向转向屏幕上面，向屏幕的上面移动一格
• MOV RIG：方向转向屏幕右侧，向屏幕的右侧移动一格
• MOV BOT：方向转向屏幕下面，向屏幕的下面移动一格

整体思路

在上一篇中是通过页面元素实现的最终效果，下面尝试用canvas的方式实现。

这里需要两个canvas进行叠加，一个用来绘制底层的棋盘背景，另一个用来绘制小方块。

首先是HTML代码:

<div id="canvas_box">
    <canvas id="canvas_bg" width="441" height="441">A drawing of table</canvas>
    <canvas id="canvas_square" width="40" height="40">A drawing of table</canvas>
</div>

任务目的

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

任务描述

• 实现一个类似棋盘的格子空间，每个格子用两个数字可以定位，一个红正方形的DOM在这个空间内，正方形中的蓝色边表示这是他的正面，有一个input输入框
• 可以通过键盘对方块下达指令，按下按钮后，使得正方形做相应动作
• 回车或者空格:向蓝色边所面向的方向前进一格（一格等同于正方形的边长）
• ←：向左
• →：向右
• ↑：向右
• ↓：向下
• 移动不能超出格子空间

任务目的

• 加强对JavaScript的掌握
• 熟悉常用表单处理逻辑
• 学习如何模块如何设计，不同模块间如何尽量解耦

任务描述

• 实现以JavaScript对象的方式定义表单及验证规则

• 表单配置参考示例如下：（不需要一致，仅为参考）

  {

  label: '名称',                    // 表单标签
  type: 'input',                   // 表单类型
  validator: function () {...},    // 表单验证规
  rules: '必填，长度为4-16个字符',    // 填写规则提示
  success: '格式正确',              // 验证通过提示
  fail: '名称不能为空'               // 验证失败提示
  

  }

• 基于该配置项，实现一套逻辑，可以自动生成表单的展现、交互、验证
• 使用你制作的表单工厂，在一个页面上创建两套样式不同的表单