发表于: 2017-06-21 23:16:28
1 1025
一、今天完成的事:
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>")
}
评论