今天完成的事
1，解决昨天天数信息显示不正确的的问题：
关键代码：（将其放入循环中，动态渲染页面展示信息）
for (let i=0; i < data; i++) {
$(".start-process").eq(i).hide();
$(".start-sign-box").eq(i).hide();
$(".main-game").append(`
<div class="main-start">
<div class="start-day"></div>
<div class="start-sign-box">
<div class="start-sign"></div>
</div>
<div class="start-process">
<div class="process-box">
<div class="process-one process-triangle">
<img src="image/moon.png">
<div>杀手杀人</div>
</div>
<div class="mt20 message-night"></div>
<div class="process-two process-triangle">
<img src="image/sun.png">
<div>亡灵发表遗言</div >
</div>
<div class="process-three process-triangle">玩家依次发言</div>
<div class="process-four process-triangle">全民投票</div>
<div class="mt20 message-daytime"></div>
</div>
</div>
</div>`);
$(".start-day").eq(data).text("第" + (data+1) + "天");
}
2，天数解决后，结果页的展示；
关键代码：
//确定玩家生存人数
var killerNum = 0;
var peopleNum = 0;
//取得玩家死亡信息记录对象json
var roleRecord_s = sessionStorage.getItem("recordStr");
var newRecord = JSON.parse(roleRecord_s);
//获取所有玩家的状态记录对象json
var roleStr_s = sessionStorage.getItem("rolestr");
var roleList_s = JSON.parse(roleStr_s);
//获取玩家记录对象json长度
var allRole=Object.keys(roleList_s).length;
var allRole2=Object.keys(newRecord).length;
//向html添加玩家剩余人数
for (let i=0; i < allRole; i ++) {
if (roleList_s[i]["role"] == "杀手" && roleList_s[i]["life"] == 1) {
killerNum += 1;
}else if (roleList_s[i]["role"] == "平民" && roleList_s[i]["life"] == 1) {
peopleNum +=1;
}
}
$(".surplus-killerNum").text(killerNum);
$(".surplus-peopleNum").text(peopleNum);
//向玩家展示每天的游戏情况记录
for (let i=0; i < allRole2; i++) {
$(".main-result").append(`
<div class="result-show">
<div class="result-days"></div>
<div class="result-night mt2"></div>
<div class="result-daytime mt2"></div>
</div>`);
//从玩家死亡记录json获取玩家序号
var data = newRecord[i]["days"];
var death_1 = newRecord[i]["night"];
var death_2 = newRecord[i]["daytime"]
//通过序号从玩家信息记录json中找到对应的身份
var identity_1 = roleList_s[death_1 - 1]["role"];
var identity_2 = roleList_s[death_2 - 1]["role"];
//写入取得的记录信息
$(".result-days").eq(i).text("第"+ data +"天");
$(".result-night").eq(i).text("黑夜：" + death_1 + "号被杀死了，真实身份是" + identity_1);
$(".result-daytime").eq(i).text("白天：" + death_2 + "号被投死了，真实身份是" + identity_2);
}
//点击重新开始游戏
$(".footer-restart, .header-home").click(function() {
sessionStorage.clear();
window.location.href = "page2.html";
});
3，为任务二新增通过加减点击功能；
4，对象函数的学习；
https://www.cnblogs.com/luoxuw/p/11440492.html
明天计划的事
1，为任务二到四添加更加清楚的注释，同时进行梳理；
2，为任务二到四添加其他部分跳转；
3，回答前面任务的深度思考；
遇到的问题
1，在函数外部调用函数内部的函数，因为作用域的限制，外部不能直接访问函数内部，然后找到了对象函数的方法解决作用域的问题，通过将对象函数将内部函数绑定到window上，然后就可以在函数外部该函数；
收获
1，使用对象函数成功调用内部函数：
window.onload=function () {
var elem1 = document.querySelector('input[type="range"]');
var elem2 = document.getElementById("players");
var elem3 = document.querySelector('.gamer-add');
var elem4 = document.querySelector('.gamer-sub');
values = document.querySelector('input[type="range"]').value;
//对象函数，让作用域绑定到window上，使得在外部可以访问该函数add()
elem3.add = function() {
values ++;
elem1.value = values;
rangeValue()
// console.log(values);
}
//对象函数，让作用域绑定到window上
elem4.sub = function() {
values --;
elem1.value = values;
rangeValue()
// console.log(values);
}
可以看到add（），sub（），在函数内部，但可以使用对象函数使得其可以被外部调用；
如果使用常用写法
function add () {
values ++;
}
function sub() {
values --;
}
要么无法访问其他函数内部，要么写在函数内部外部又无法调用；
而对象函数可以实现的依据
这样可以将函数当作对象属性一样操作，从而实现了从函数外部调用的特殊用法；
2，修改UI图图层文字信息：
①调节大小形状【点一下要编辑的文字图层，然后ctrl+t直接调整】
②编辑文字内容【双击文字图层中的" T " 注意是文字图层不是工具栏】
返回列表
评论