发表于: 2017-03-31 09:49:43
2 1267
今天完成的事情:理顺了任务四的逻辑,并完成任务四的基本内容。任务五《HTTP协议入门》知识储备。
明天计划的事情:关于cookies,sessionStorage和localStorage三种浏览器储存数据的方法的小课堂的准备,任务5的知识储备,复习Nginx的配置方法并启动一个本地http服务
遇到的问题:
任务四总体思路难点总结:
loading页:
思路:图片展示,
http-equiv="refresh" content="4
设置页面自动跳转。
难点:页面倒计时效果:
var time = 3; //时间,秒
var i = 0;
function last() {
document.all.enter.innerHTML = time - i;
i++;
}
setInterval(last,1000);//剩余时间设置了一个定时器,一秒一次执行一次,time依次减一。
身份设置页:
思路:
关联输入框,滑块,+-按钮并设置输入数字的范围,并获取这个数字,按照游戏要求获得杀手的数量,将杀手和平民的数组合并并将数组的顺序打乱后输出,之后用.innerHTML向对象插入内容。此处设计一个参数传递,选用sessionStorage本地存储数据()传参。
难点:
打乱生成杀手平民身份时候的用到了乱序数组这个概念:
var shuffle = function(v){
for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
return v;
}就是每次从已知数组随机一个数,然后将数组的最后一个值 赋值给前面随机到的数的位置上,然后将长度-1,再从原数组下标-1的数组中随机。 运算次数就是数组长度,这个方法效率最高,需要理解最好。
身份信息展示页:
思路,这个页面在获得之前传递来的身份信息之后,根据按钮点击的次数,来控制页面信息的显示和隐藏来实现效果,元素的显示和隐藏用JQ的
.toggle()
属性方便实现。
难点:本页面分别使用了原生JS写法和引入Jqurey的写法,注意理解jqurey
$('#playerRole')
可以直接获取节点,而不需要声明,但是jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是jquery对象,它不能使用js中的dom方法。所以,如果jquery对象要使用标准的dom方法,就需要进行对象转换。
法官日记页:
思路:获取数据,使用"+"进行字符串拼接,输出结果
杀人页&投票页:
思路:和法官页一样输出身份牌之后,并为之前获得的数组里的元素添加对象,包括身份、号码、状态等,,标记杀手牌为灰色不可点击,为剩下的每个身份牌添加一个onclick事件,点击后改变身份牌的颜色,以及存活状态。
投票页与杀人页一样,需要注意的是标记之前所有已经死亡的玩家状态为灰色且不可点击(包括被杀死和被投票死)。
难点:因为后面游戏结果统计需要,此页面需要为身份数组里添加一个day对象,记录玩家死亡的天数,存活玩家则+1.
for (var m = 0; m < Status.length; m++) {
if (Status[m].status == 'alive') {
Status[m].day++;
console.log(Status[m].day);
statusAll = JSON.stringify(Status);
sessionStorage.Status = statusAll;
console.log(statusAll);
}
}
解密页
思路:这个页面不仅要展示之前的游戏流程,还需要判断游戏结束的条件,(杀手数=平民数:杀手胜;杀手数<平民数:平民胜;死亡玩家数是偶数:进入杀人页,其余情况:进入投票页)。
难点:输出游戏过程的时候,由于我的思路是按照存活状态依次输出已经死亡的玩家信息,这样就导致输出的信息是按照编号排列,今天尝试按照标记的天数属性(day)来排列输出。
评论