发表于： 2017-05-24 21:45:56
1 846
今天完成的事情：
1.完成了任务4全部的页面，还剩最后一个页面的结果展示剩一点点没写完，感觉任务4被我想的太难了，其实写完感觉真的很爽，一开始思路并不是很清晰，写着写着慢慢的思路就来了，得益于之前画的流程图，还是有点用的。
写的怎么样，代码说话（后期还会修改）：
流程页面：
//接收本地存储数据
var kill = document.getElementById("kill");
day = JSON.parse(localStorage.getItem("day")); //记录天数
var gamePlayer = JSON.parse(localStorage.getItem("gamePlayer"));//玩家对象数组
var visited = JSON.parse(localStorage.getItem("visited"));//用于判断是否已杀过人
var killer = JSON.parse(localStorage.getItem("killer")); //杀手的人数
var commoner = JSON.parse(localStorage.getItem("commoner")); //平民的人数
console.log(killer, commoner);
var x = JSON.parse(localStorage.getItem("x")); //平民已死亡的人数
console.log(x);
var y = JSON.parse(localStorage.getItem("y")); //杀手已死亡的人数
console.log(y);
//杀手晚上杀人
$(document).ready(function() {
if(visited === 1) {
$("#kill").css("color", "#a1a1a1"); //visited=1代表杀过人，杀手杀人按钮颜色变化
}
$(kill).click(function() {
if(visited === 1) {
alertMsg("今天你已经杀过人了", 1); //杀过人不能进去杀第二次
}
else {
location.href = "BRPG-kill.html";
$(this).css("color", "#a1a1a1");
}
});
});
//展示进行到第几天，day初始值为1
$(document).ready(function() {
if (day === 1) {
$("#day").text("第1天");
}
else {
$("#day").text("第" + day + "天");
}
});
//亡灵发言，visited=1代表已经完成了杀手晚上杀人流程，则可以发表遗言
$(document).ready(function() {
$("#death").click(function () {
if(visited === 1) {
alertMsg("请发表遗言", 1);
$("#death").css("color", "#a1a1a1");
}
else if(visited === 0) {
alertMsg("请按流程点击");
}
});
});
//玩家发言，visited=1代表已经完成了杀手晚上杀人流程，则可以发言
$(document).ready(function() {
$("#player").click(function() {
if(visited === 1) {
alertMsg("请依序发言", 1);
$("#player").css("color", "#a1a1a1");
}
else if(visited === 0) {
alertMsg("请按流程点击");
}
});
});
//投票，只有完成杀人流程后才能进入投票页面
$(document).ready(function() {
$("#vote").click(function() {
if(visited === 1) {
window.location.href = "BRPG-vote.html";
}
else if(visited === 0) {
alertMsg("请按流程点击");
}
});
});
//判断游戏是否结束，当杀手剩余人数为0或者平民剩余人数小于杀手人数时，游戏结束
if(killer - y ===0 || (commoner - x) < (killer - y)) {
if(confirm("游戏已经结束，是否要去结果页面查看？")) {
window.location.href = "BRPGresults-1.html";
}
}
杀手杀人页面：
var m; //声明一个变量用来取数组下标
var gameplayer = []; //创建一个空数组，用于后面创建初始的玩家对象数组
var gamePlayer; //声明一个变量用于存放变化了的玩家对象数组，与初始数组比只是P大小写不一样
//接收本地存储数据
var f = JSON.parse(localStorage.getItem("f")); //用于判断玩家对象数组是否变化
var visited = JSON.parse(sessionStorage.getItem("visited"));//判断是否杀过人
var impress = JSON.parse(localStorage.getItem("arr"));//玩家分配页面的数据
var x = JSON.parse(localStorage.getItem("x"));
console.log(x);
//创建杀手和平民的对象数组
for (var j = 0; j < impress.length; j++) {
if (impress[j] === "平民") {
gameplayer[j] = { };
gameplayer[j].num = j + 1; //玩家的序号
gameplayer[j].live = "life"; //玩家的生死状态，包括活着（life）、被杀死（death）、被投死（throw）三种状态
gameplayer[j].role = "平民"; //玩家当前的身份
}
else if (impress[j] === "杀手") {
gameplayer[j] = { };
gameplayer[j].num = j + 1;
gameplayer[j].live = "life";
gameplayer[j].role = "杀手";
}
}
// 将玩家分配页面保存的数据展示在页面上
$(document).ready(function() {
for (var i = 0; i < gameplayer.length; i++) {
var n = "<div class=\"degree\"> <div class=\"name\"><span class=\"vocation\">\
水民</span></div><div class=\"ordinal\"><span class=\"name_number\">1号</span></div> </div>";
$("#main").append(n);
var a = document.getElementsByClassName("name_number");
var b = document.getElementsByClassName("vocation");
var c = document.getElementsByClassName("name");
a[i].innerHTML = (i + 1) + "号";
b[i].innerHTML = gameplayer[i].role;
//如果未杀过人，玩家生死状态就未变化，f初始值为0
if(f === 0) {
gamePlayer = gameplayer; //为0就取初始状态的玩家对象数组
}
else {
gamePlayer = JSON.parse(localStorage.getItem("gamePlayer")); //不为0就取本地存储的变化了的玩家对象数组
}
//将被杀死和被投死的玩家展示在页面上
if(gamePlayer[i].live === "death" || gamePlayer[i].live === "throw") {
$(c[i]).css("background", "#a1a1a1");
}
}
//添加点击事件，使被点击元素发生颜色变化
var degree = $(".degree");
degree.click(function () {
$(".degree").css("color", "#000"); //当选择另一个玩家时重置上一个被选择的玩家的颜色
m = $(this).index() - 1; //获取当前元素的数组下标
//限制不能选择已死亡的玩家
if(gamePlayer[m].live === "death" || gamePlayer[m].live === "throw") {
alertMsg("他已经死了");
m = null; //用于点击了死亡玩家后清除下标
}
//选择平民玩家使颜色变化
else if (gamePlayer[m].role === "平民") {
$(this).css("color", "#ff0000");
}
//限制杀手不能自杀
else if (gamePlayer[m].role === "杀手") {
alertMsg("杀手不能自杀");
m = null; //用于点击了杀手玩家后清除下标
}
});
//限制未杀人就点击确定，如果m=null，说明未杀死任何平民玩家
$("#btn").click(function() {
if(m === null) {
alertMsg("请杀人后再点确定");
}
else {
window.location.href = "BRPG-flow.html";
gamePlayer[m].live = "death"; //改变被选择玩家的生死状态
localStorage.setItem("gamePlayer", JSON.stringify(gamePlayer));
visited = 1; //杀过人则visited=1，用于流程页面的判断使用,黑夜解密页面会重置为0
localStorage.setItem("visited", JSON.stringify(visited));
x = x + 1;
localStorage.setItem("x", JSON.stringify(x));
}
});
});
投票页面：
var m; //声明一个变量用来取数组下标
//接收本地存储数据
var day = JSON.parse(localStorage.getItem("day"));
var gamePlayer = JSON.parse(localStorage.getItem("gamePlayer"));
var x = JSON.parse(localStorage.getItem("x"));
console.log(x);
var y = JSON.parse(localStorage.getItem("y"));
console.log(y);
// 将玩家状态变化了的数据展示在页面上
$(document).ready(function() {
for (var i = 0; i < gamePlayer.length; i++) {
var n = "<div class=\"degree\"> <div class=\"name\"><span class=\"vocation\">\
水民</span></div><div class=\"ordinal\"><span class=\"name_number\">1号</span></div> </div>";
$("#main").append(n);
var a = document.getElementsByClassName("name_number");
var b = document.getElementsByClassName("vocation");
var c = document.getElementsByClassName("name");
a[i].innerHTML = (i + 1) + "号";
b[i].innerHTML = gamePlayer[i].role;
//将被杀死和被投死的玩家展示在页面上
if(gamePlayer[i].live === "death" || gamePlayer[i].live === "throw") {
$(c[i]).css("background", "#a1a1a1");
}
}
//添加点击事件，使被点击元素发生颜色变化
var degree = $(".degree");
degree.click(function () {
$(".degree").css("color", "#000"); //当选择另一个玩家时重置上一个被选择的玩家的颜色
m = $(this).index() - 1; //获取当前元素的数组下标
//限制不能选择已死亡的玩家
if(gamePlayer[m].live === "death" || gamePlayer[m].live === "throw") {
alertMsg("他已经死了");
m = null; //用于点击了死亡玩家后清除下标
}
else {
$(this).css("color", "#9932cc"); //选择活着的玩家使颜色变化
}
});
});
//限制未投票就点击确定，如果m=null，说明未投死任何活着的玩家
$("#btn").click(function() {
if(m === null) {
alertMsg("请投票后再点确定");
}
else {
window.location.href = "BRPG-decrypt.html";
gamePlayer[m].live = "throw"; //改变被投死玩家的生死状态
localStorage.setItem("gamePlayer", JSON.stringify(gamePlayer));
day = day + 1; //一天的流程结束，天数+1
localStorage.setItem("day", JSON.stringify(day));
//如果是平民，则平民死亡人数+1
if(gamePlayer[m].role === "平民") {
x = x + 1;
localStorage.setItem("x", JSON.stringify(x));
}
//如果是杀手,则杀手死亡人数+1
else {
y = y + 1;
localStorage.setItem("y", JSON.stringify(y));
}
}
});
明天计划的事情：
完成任务4剩下的，然后开始任务5的学习。
遇到的问题：
1.流程页面杀手杀过人之后还能再点进去杀人，我采取设置一个变量，初始值为0，如果杀人了就变为1，然后在黑夜解密页面进行重置为0，这样再进入新的一天就又可以点击进去杀人了。
2.对于玩家状态改变后展示到杀手杀人页面，但是因为初始状态是活着，一点进去就全部又复活了，我采用设置一个变量来判断玩家的生死状态是否改变过，如果是第一晚，那么就是未改变，初始值为0，展示初始玩家的数据；如果改变了，那么值为1，展示保存在本地浏览器的玩家数据。
收获：
写JS要敢于去尝试，要经常打断点，打日志才能找出问题
返回列表
评论