今天主要进行的还是任务4的部分

1. 首先是昨天根据玩家状态判断玩家div是否可以点击

if (roles[j] == "杀手"||playerStatus[j].status == "dead"||playerStatus[j].status == "voted") {
    cards[j].style.background = "#c0c0c0";
    cards[j].style.cursor = "not-allowed";
}

原本是针对玩家状态写了对应css样式改变语句，实际应该抓取当前dom节点进行操作

设置玩家状态为“dead”被杀手杀死和“voted”被投票杀死两种状态，使用或运算，三个条件满足其中之一即可

2. 其次是杀手开始第二轮杀人的时候，js对应dom和玩家状态等的判断

第一个步骤是杀手杀掉除自身以外的任意玩家，然后进入投票环节，得票最高的玩家将会被投票杀死，此时判断游戏继续或是分出胜负，如果没有分出胜负，则会进入到下一轮杀手杀人

今天主要在杀手第二轮杀人开始时出现了一些问题

首先，在第一次杀人的时候，进入页面，动态生成玩家div，并且创建数组初始化玩家信息

var roles = JSON.parse(sessionStorage.getItem("playerRole"));
console.log(roles);
var roleStatus = [];

roles内包含的玩家身份，初始化信息

for (var i=0; i<roles.length; i++) {
    function  addUnit() {
        $(".row").append(
            '<div class="unit">' +
            '<div class="square">' +
            '<div class="identification">' + roles[i] +
            "</div>" +'<div class="number">' + (i+1) + '号' +
            '</div>' + '</div>' +
            '</div>'
        );
    }
    addUnit();
       roleStatus[i] = {};
        roleStatus[i].num = i+1;
        roleStatus[i].identity = roles[i];
        roleStatus[i].status = "alive";
        roleStatus[i].day = 1;
  }

最终在onclick触发，页面跳转的时候，储存所有信息

sessionStorage.setItem("playerStatus",JSON.stringify(roleStatus));

因此，在第二轮杀手杀人开始的时候，会需要经过杀人和投票之后的玩家状态信息，而经过第一轮之后的存储，已经不能直接针对roleStatus进行判断，所以，第一轮杀人之后，原有的一些判断语句会失效，并且需要将存储内容取出进行新一轮的判断

由于第一次给玩家状态初始化赋值，会使第二次载入页面的时候，sessionstorage内容被初始化过程重置，所以，针对两次的不同情况做出一些判断

if (sessionStorage.getItem("playerStatus")) {
    var playerStatus = JSON.parse(sessionStorage.getItem("playerStatus"));
} else {
    roleStatus[i] = {};
    roleStatus[i].num = i+1;
    roleStatus[i].identity = roles[i];
    roleStatus[i].status = "alive";
    roleStatus[i].day = 1;
}

如果没有存储内容，那么一定是第一次载入页面，可以进行初始化，如果是第二次载入页面，则直接将存储内容取出

if (roles[j] == "杀手") {
    cards[j].style.background = "#c0c0c0";
    cards[j].style.cursor = "not-allowed";
}

同理，为全部的杀手身份玩家设置禁止点击，其他的状态改变针对sessionstorage进行判断，如

if (sessionStorage.getItem("playerStatus")) {
    playerStatus[this.index].status = "dead";
} else {
    roleStatus[this.index].status = "dead";
}

明天的计划是收尾任务4

遇到的问题

动态生成玩家身份解密时，并不按照玩家死亡的先后顺序生成

if (playerStatus[i].status == "dead") {
    $(".container").append(
        "<p>" + playerStatus[i].num + "号玩家被杀死了，真实身份是" + playerStatus[i].identity + "</p>"
    );
    $(".date").append(playerStatus[i].day);
}
if (playerStatus[i].status == "voted") {
    $(".container").append(
        "<p>" + playerStatus[i].num + "号玩家被投票杀死了，真实身份是" + playerStatus[i].identity + "</p>"
    );
    $(".date").append(playerStatus[i].day);
}

分成了被杀手杀和被投票杀两种元素插入了container

收获

对如何查存储内容并且真对内容进行判断有了更深的认识