一、今天完成的事：

1.之前实现的杀人页面逻辑有问题，更改逻辑后正常，可以将玩家状态和背景色同时改变和清除；

2.完成杀人后回传到流程页面时，将杀死的玩家信息显示出来；

3.根据流程当前背景色来判断玩家是否按照流程点击，并提示玩家按照流程点击；

4.将玩家点击后的流程背景色改变并保存，下次返回该页面的时候将点击过的流程颜色改变；

二、明天的计划：

1.继续任务4

三、遇到的问题：

1.之前的杀人逻辑有问题，导致一次可以更改多个玩家的状态，询问师兄后发现逻辑有问题，更改后正常；

2.根据流程背景色判断玩家是否按照流程点击的时候，发现结束游戏后，流程状态没有恢复为正常的颜色，查看后发现没有清除sessionStorage导致；

四、收获：

1、JS中缓存sessionStorage和清除sessionStorage的方法：

如果不手动清除的话，只能关闭浏览器来清除，刷新无法清除sessionStorage浏览器缓存

var b1 = JSON.parse(sessionStorage.getItem("b1"));

sessionStorage.removeItem("b1");  //手动清除浏览器缓存

2、杀手初次杀人界面，需要确保只能改变当前点击的水民的背景色和生死状态：

第一次点击的时候，先将当前点击的水民颜色为和状态更改，并将当前的数组下标赋值给一个之前定义的变量：

var allPeople = $(".role-name");

var lastNum;

$(allPeople[this.index]).css("background-color","red");

allPlayers[this.index].status = "die";

lastNum = this.index;

console.log(allPlayers);

3、当杀手想更换杀死的水民的时候，根据之前的下标来判断之前点击的是哪个水民，并将他的状态和颜色还原，再根据this.index将当前点击的水民状态改变；

if (lastNum != undefined){

$(allPeople[lastNum]).css("background-color","#f5c97b");

   allPlayers[lastNum].status = "live";

}

4、提示用户需要按照流程图来点击操作的实现方式是，将之前的流程的颜色异或（||），根据其结果提示用户按照流程操作；

var b = $("#a3").css("background-color");

var c = $("#a1").css("background-color");

var d = $("#a2").css("background-color");

if (b == "rgb(153, 153, 153)" || c == "rgb(36, 167, 198)" || d == "rgb(36, 167, 198)") {

alert("请按照顺序点击！")

5、杀手杀人后返回流程界面，需要将杀手杀死的水民显示到当前页面，用jquery的after属性动态添加即可，需要注意变量和标签的添加方式不同：

if (statu[i] == "die") {

$("#a1").after("<p class='die-color'>" + (i+1) + "号被杀死 ，" + (i+1) + "号是" + allPlayers[i].id + "</p>")

}