今天完成的事情：

1、学习了各师兄对任务四的一些感悟。

2、重温了断点调试、优化布局的方法。

3、写了一点任务四。

明天计划的事情：

1、理清整个逻辑关系。

2、写出关于天数的代码。

遇到的问题：

今天主要在看攻略，明天实践。

收获：

常用debug方法

1. 1. 断点调试
   断点调试时最基础的一个调试方法，在调试的过程中查看变量和函数的变化状态，这使得不可见的程序运行过程变得可视化。
   断点调试都在source选项卡中进行，所以放在下面一起来讨论。

2. 2. source选项卡：
   除了网络和DOM大部分的js调试都在source选项卡中进行。
   
   a. 上图source选项代码序列上的蓝色标签即为断点的标识，断点也显示在Breakpoint选项中，可以在Breakpoint选项卡中勾掉暂时不用的断点，后面再使用的时候可以再勾选，这样就不用再代码中翻来翻去迷失方向了。
   b.
   
   这几个小图标前两个和调试时页面的两个按钮相同， 分别是暂停/开始和单步；往右边两个向上向下的箭头意思是进入函数，和（执行完）跳出函数；后面的一个是忽略所有断点运行，这样被避免更改完之后，点掉所有断点执行一遍在挨个加断点的尴尬。
   c. watch窗口：
   点击“+”添加一个想要监视的变量，在整个调试过程中，这个变量会一直显示在这里，就不用在函数之间苦苦寻找，然后再“hover”上去显示它的值，非常适合全局变量的监视。
   d. Call Stack窗口：
   这个就是堆栈窗口，显示当前堆栈中的内容，一般为函数调用和对象。这里可以查看想要调用的函数是否被掉用。在被调用函数中打一个断点，Call stack窗口就就会显示当前堆栈中的函数，调用函数在下面，被调用函数在上面，用蓝色圆点标记。
   

3. 2、如果使用float布局，用margin进行布局调整，虽然可以自动换行，但是不能在页面内均匀分布，所以将所有的玩家编号单元放在一行内，设定margin，使用flex布局，然后使用space-between让元素自己在页面内部进行距离调整，然后使用flex-warp： warp；让元素自动换行，最终的页面布局就很理想。

4. 3、关于任务四，首先是要给所有玩家添加属性，设置初始属性为“alive”，为每个玩家编号单元增添一个click事件，使点击时选中的玩家（除杀手）可以将属性变为“dead”，这里既要考虑不能杀杀手，也要不能重复杀人或者多次杀人。

   cards[j].style.cursor = "not-allowed";

   为杀手添加“不可点击”属性（通过cursor：not-allowed；）