发表于: 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>")

}



返回列表 返回列表
评论

    分享到