-
Notifications
You must be signed in to change notification settings - Fork 0
/
别踩白块(彩色版).html
156 lines (146 loc) · 5.69 KB
/
别踩白块(彩色版).html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="cssStyle(彩色版).css">
</head>
<body>
<div id="bigbox">
<ul style="display: none;">
<li class="row" id="row1"><a href="#"></a><a href="#"></a><a href="#"></a></li>
<li class="row" id="row2"><a href="#"></a><a href="#"></a><a href="#"></a></li>
<li class="row" id="row3"><a href="#"></a><a href="#"></a><a href="#"></a></li>
<li class="row" id="row4"><a href="#" id="aKey"></a><a href="#" id="sKey"></a><a href="#" id="dKey"></a></li>
</ul>
<div id="mask"> </div>
<input type="button" id="start" value="开始">
<div id="tipsBox" style="display: none">
<h1></h1>
<h2></h2>
<h3>已消除方块个数</h3>
</div>
</div>
<div id="failedBox" style="display: none;">
<h3></h3>
<h3>要再接再厉鸭!~</h3>
<p>( 点击任何地方重新开始挑战 )</p>
</div>
<script src="common.js"></script>
<script src="函数封装(彩色版).js"></script>
<script>
/**需求分析
* 1.先搭好架子(4*3)
* 2.当点击开始按钮后,从第一行开始出现随机黑块,每行只出现一个
* 3.每隔2秒,将原本行的黑块移动到下一行,第一行重新生成新的随机黑块,
* 3.1 当黑块移动到第四行时,按下对应的asd键,或鼠标点击都可以清除第四行的对应位置的黑块
* 4.如果在生成新的黑块前,没有清除第四行的黑块,则提示挑战失败
* 4.1如果按了或点击了除了第四行对应黑块的按键外的键,则提示挑战失败
* 5.当第四行消除后,立即将第一二三行代码下移,并生成新的第一行黑块
* 5.除了第四行的黑块,其余的黑块都是不能点击的
* 6.用一个计时器记录挑战时间,点击开始按钮后开始,每次失败时清空
*/
var ul = document.getElementsByTagName('ul')[0];
var row1 = id('row1');
var row4 = id('row4');
var rowList = ul.children;
var blockList = row1.children;
var timerID = null;
var aKey = id('aKey');
var sKey = id('sKey');
var dKey = id('dKey');
var start = id('start');
var mask = id('mask');
var tipsBox = id('tipsBox');
var sum = 0;
var hard = tipsBox.children[1];
var speed = tipsBox.children[2];
var hardLevel = 1;
var speedLevel = 1000;
var failedBox = id('failedBox');
var fTips = failedBox.children[0];
var isFailed = false;
var aList = ul.getElementsByTagName('a');
//改变tips框里的内容
hard.innerText = '难度: ' + hardLevel;
speed.innerText = '每 ' + speedLevel/1000 + ' 秒一个';
//点击开始按钮后执行动画,动画结束后开启定时器
start.onclick = function ( ) {
animateSlow(mask,{
width:312,
height:493,
borderRadius:0
},function ( ) {
ul.style.display = 'block';
ul.style.zIndex = 1;
tipsBox.style.display = 'block';
startTime();//点击按钮,遮罩层到达指定位置后,调用计时器函数
//获取按下的键的ascii码并转成对应键的字符串
//(这段代码原本放外面的,但是会产生一个问题:
// 动画未结束前按键的话就会触发失败提醒,但是计时器并不会停下,因此放里面)
document.onkeypress = function ( e ) {
//获取事件源的兼容性处理
e = e||window.event;
//判断是否已经失败(如已失败,不会再执行下面代码)
if (isFailed==true){
return;
}
//获取ascii码的兼容性处理
var key = e.keyCode||e.charCode||e.which;
//ascii码转成键字符串
key = String.fromCharCode(key);
//调用isKey函数判断按下的键是否为a,s,d键
if (key=='a'){
isKey(aKey);
}else if (key=='s'){
isKey(sKey);
}else if (key=='d'){
isKey(dKey);
}
start.value = sum;
level();
}
});
//点击按钮后让按钮禁用,并且鼠标样式改为默认
start.disabled = false;
start.style.cursor= 'default';
//同时执行开始按钮的移动动画
animateSlow(start,{
top:280,
left:106,
width:80,
height:80
},function ( ) {
start.value = '0';
start.style.fontSize = '30px';
});
}
//遍历所有行和所有格子,将所有格子的点击事件返回false,取消跳转
for (var i = 0;i<rowList.length;i++){
for (var j = 0;j<blockList.length;j++){
rowList[i].children[j].onclick = function ( ) {
return false;
}
}
}
//遍历并给第四行每一个格子并添加点击事件
for (var i = 0;i<blockList.length;i++){
row4.children[i].onclick = function ( ) {
//每次点击先清除上一次定时器
clearInterval(timerID);
if (this.className!='black'){//如果点击的格子没有black类,则弹出失败并清除定时器
clearInterval(timerID);
failed();
}else{//否则就清除上一次的定时器,执行一次下一行赋值函数,再调用定时器函数
clearInterval(timerID);
sum++;
start.value = sum;
next();
startTime();
level();
}
}
}
</script>
</body>
</html>