-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
344 lines (317 loc) · 8.64 KB
/
index.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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>1024</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="style.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script src="support1024.js"></script>
</head>
<body>
<div id="header">
<h2>1024</h2>
<a id="newgamebutton" href="javascript:newgame();">new game</a>
<p>score:<span>0</span></p>
</div>
<div id="grid-container">
<div id="grid-container-0-0" class="grid-cell"></div>
<div id="grid-container-0-1" class="grid-cell"></div>
<div id="grid-container-0-2" class="grid-cell"></div>
<div id="grid-container-0-3" class="grid-cell"></div>
<div id="grid-container-1-0" class="grid-cell"></div>
<div id="grid-container-1-1" class="grid-cell"></div>
<div id="grid-container-1-2" class="grid-cell"></div>
<div id="grid-container-1-3" class="grid-cell"></div>
<div id="grid-container-2-0" class="grid-cell"></div>
<div id="grid-container-2-1" class="grid-cell"></div>
<div id="grid-container-2-2" class="grid-cell"></div>
<div id="grid-container-2-3" class="grid-cell"></div>
<div id="grid-container-3-0" class="grid-cell"></div>
<div id="grid-container-3-1" class="grid-cell"></div>
<div id="grid-container-3-2" class="grid-cell"></div>
<div id="grid-container-3-3" class="grid-cell"></div>
</div>
<script type="text/javascript">
var board = new Array();
var score = 0;
$(document).ready(function(){
newgame();
});
function newgame(){
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
$("#grid-container-"+i+"-"+j).css("top",getPosTop(i,j))
$("#grid-container-"+i+"-"+j).css("left",getPosLeft(i,j))
}
}
// 初始化二维数组
for (var i = 0; i<4; i++) {
board[i] = new Array();
for(var j=0;j<4;j++){
board[i][j] = 0;
}
}
// 动态添加放置数字的格子
updateBoardView();
// 随机添加两个数字
//在随机两个格子生成数字2或者是4，位置也是随机的
generateOneNumber();
generateOneNumber();
}
function updateBoardView(){
// 先移除一下，防止第二次点击的时候添加而第一次点击添加的内容还在。
$(".number-cell").remove();
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
$("#grid-container").append("<div class='number-cell' id='number-cell-"+i+"-"+j+"'></div>");
// 初始化装数字的格子。相当于16个格子上每个都对应有一个数字，大小一样，开始的时候设置宽高都为0;当有数字的时候宽高就为100;
var theNumberCell = $("#number-cell-"+i+"-"+j);
if(board[i][j] == 0){
theNumberCell.css('width','0px');
theNumberCell.css('height','0px');
theNumberCell.css('top',getPosTop(i,j)+50);
theNumberCell.css('left',getPosLeft(i,j)+50);
}else{
theNumberCell.css('width','100px');
theNumberCell.css('height','100px');
theNumberCell.css("background",getBgColor(board[i][j]));
theNumberCell.css("color",getNumClolr(board[i][j]));
theNumberCell.css('top',getPosTop(i,j));
theNumberCell.css('left',getPosLeft(i,j));
theNumberCell.text( board[i][j] );
}
}
}
}
$(document).keydown(function(event){
switch (event.keyCode){
case 37: //left
// 向左移动 判断能不能向左
if(moveLeft()){
// 如果能向左移动，则向左移，然后随机生成一个数字2或者4
setTimeout("generateOneNumber()",200);
// 并且判断游戏是否结束
setTimeout("isGameOver()",300);
}
break;
case 38: //up
if(moveUp()){
setTimeout("generateOneNumber()",200);
setTimeout("isGameOver()",300);
}
break;
case 39: //right
if(moveRight()){
// 如果能向左移动，则向左移，然后随机生成一个数字2或者4
setTimeout("generateOneNumber()",200);
// 并且判断游戏是否结束
setTimeout("isGameOver()",300);
}
break;
case 40: //down
if(moveDown()){
setTimeout("generateOneNumber()",200);
setTimeout("isGameOver()",300);
}
break;
default :
break;
}
})
function moveLeft(){
if(!canMoveLeft(board)){
return false;
}else{
// 向左移动
// 判断能不能向左移动，判断依据：
// 1 移动到的位置是不是为空
// 2 移动的数字和左边的数字是不是相等
// 3 移动的数字到移动到的位置中间的路径是不是为空
for(var i=0;i<4;i++){
for (var j=1;j<4;j++) {
if(board[i][j] != 0){ // 不为0 则可能向左移动
for(var k=0;k<j;k++){ //第i行的所有元素，从第一列到第j列循环
// 判断第i行的第K列为空 并且第k列的左边没有遮挡的元素(障碍物)
if(board[i][k]==0 && noBlockCol(i,k,j,board)){
// move
showAnimate(i,j,i,k);
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
//
}else if(board[i][k]==board[i][j] && noBlockCol(i,k,j,board)){
// move
showAnimate(i,j,i,k);
// add
board[i][k] += board[i][j];
board[i][j] = 0;
continue;
}
}
}
}
}
setTimeout("updateBoardView()",150);
return true;
}
}
function moveRight(){
if(!canMoveRight(board)){
return false;
}else{
for(var i=0;i<4;i++){
for (var j=2;j>=0;j--) {
if(board[i][j] != 0){ // 不为0 则可能向左移动
for(var k=3;k>j;k--){ //第i行的所有元素，从第一列到第j列循环
// 判断第i行的第K列为空 并且第k列的左边没有遮挡的元素(障碍物)
if(board[i][k]==0 && noBlockCol(i,j,k,board)){
// move
showAnimate(i,j,i,k);
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
//
}else if(board[i][k]==board[i][j] && noBlockCol(i,j,k,board)){
// move
showAnimate(i,j,i,k);
// add
board[i][k] += board[i][j];
board[i][j] = 0;
continue;
}
}
}
}
}
setTimeout("updateBoardView()",150);
return true;
}
}
function moveUp(){
if(!canMoveUp(board)){
return false
}else{
for(var j=0;j<4;j++){
for(var i=1;i<4;i++){
if(board[i][j] !=0){
for(var k=0;k<i;k++){
if(board[k][j] == 0 && noBlockRow(k,i,j,board)){
showAnimate(i,j,k,j);
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}else if(board[k][j]==board[i][j] && noBlockRow(k,i,j,board)){
showAnimate(i,j,k,j);
board[k][j] *= 2;
board[i][j] = 0;
continue;
}
}
}
}
}
setTimeout("updateBoardView()",150);
return true;
}
}
function moveDown(){
if(!canMoveDown(board)){
return false;
}else{
for(var j=0;j<4;j++){
for(var i=2;i>=0;i--){
if(board[i][j] !=0 ){
for(var k=3;k>i;k--){
if(board[k][j] == 0 && noBlockRow(i,k,j,board)){
showAnimate(i,j,k,j);
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}else if(board[k][j]==board[i][j] && noBlockRow(i,k,j,board)){
showAnimate(i,j,k,j);
board[k][j] *= 2;
board[i][j] = 0;
continue;
}
}
}
}
}
setTimeout("updateBoardView()",150);
return true;
}
}
// 判断能不能向左移动，判断的依据是：
// 1 他的左边没有数字，
// 2 他的左边有数字但是和他相等
function canMoveLeft(board){
for(var i=0;i<4;i++){
// 注意：这里的j(列)是从1开始的，因为第一列就在最左边，是不能向左移动的。
for (var j=1;j<4;j++) {
if(board[i][j] != 0){
// 判断 当前board[i][j] 的元素的左边一个是不是为0或者是不是相等
if(board[i][j-1] == 0 || board[i][j-1] == board[i][j] ){
return true;
}
}
}
}
return false;
}
function canMoveRight(board){
for(var i=0;i<4;i++){
// 注意：这里的j(列)是从1开始的，因为第一列就在最左边，是不能向左移动的。
for (var j=2;j>=0;j--) {
if(board[i][j] != 0){
// 判断 当前board[i][j] 的元素的左边一个是不是为0或者是不是相等
if(board[i][j+1] == 0 || board[i][j] == board[i][j+1] ){
return true;
}
}
}
}
return false;
}
function canMoveUp(board){
for(var j=0;j<4;j++){
for(var i=1;i<4;i++){
if(board[i][j] !=0){
if(board[i-1][j] ==0 || board[i-1][j] == board[i][j] ){
return true;
}
}
}
}
return false;
}
function canMoveDown(board){
for(var j=0;j<4;j++){
for(var i=2;i>=0;i--){
if(board[i][j] != 0 ){
if(board[i+1][j] ==0 || board[i+1][j] == board[i][j] ){
return true;
}
}
}
}
return false;
}
function isGameOver(){
if( noMove() && nospace(board) ){
alert("Game Over")
}
}
// 判断能不能移动
function noMove(){
if(canMoveDown(board) || canMoveUp(board) || canMoveRight(board) || canMoveLeft(board)){
return false;
}else{
return true;
}
}
</script>
</body>
</html>