发表于: 2017-06-23 00:49:28
1 853
今天主要进行的还是任务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
收获
对如何查存储内容并且真对内容进行判断有了更深的认识
评论