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
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewprot" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>扫雷</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background-color: #333;
}
#wrapper{
width: 900px;
height: 480px;
border: 1px solid #ccc;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
}
#wrapper>ul>li{
float: left;
box-sizing: border-box;
width: 30px;
height: 30px;
border: 1px solid #ccc;
text-align: center;
line-height: 30px;
-webkit-user-select: none;
font-weight: bold;
border-radius: 5px;
background-color: darkgray;
}
#reset{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: salmon;
position: fixed;
left: 50%;
top: 10px;
transform: translateX(-50%);
text-align: center;
line-height: 50px;
color: #333;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="ul">
<li class="row1 col1"></li>
<li class="row2 col1"></li>
<li class="row3 col1"></li>
<li class="row4 col1"></li>
<li class="row5 col1"></li>
<li class="row6 col1"></li>
<li class="row7 col1"></li>
<li class="row8 col1"></li>
<li class="row9 col1"></li>
<li class="row10 col1"></li>
<li class="row11 col1"></li>
<li class="row12 col1"></li>
<li class="row13 col1"></li>
<li class="row14 col1"></li>
<li class="row15 col1"></li>
<li class="row16 col1"></li>
<li class="row17 col1"></li>
<li class="row18 col1"></li>
<li class="row19 col1"></li>
<li class="row20 col1"></li>
<li class="row21 col1"></li>
<li class="row22 col1"></li>
<li class="row23 col1"></li>
<li class="row24 col1"></li>
<li class="row25 col1"></li>
<li class="row26 col1"></li>
<li class="row27 col1"></li>
<li class="row28 col1"></li>
<li class="row29 col1"></li>
<li class="row30 col1"></li>
<li class="row1 col2"></li>
<li class="row2 col2"></li>
<li class="row3 col2"></li>
<li class="row4 col2"></li>
<li class="row5 col2"></li>
<li class="row6 col2"></li>
<li class="row7 col2"></li>
<li class="row8 col2"></li>
<li class="row9 col2"></li>
<li class="row10 col2"></li>
<li class="row11 col2"></li>
<li class="row12 col2"></li>
<li class="row13 col2"></li>
<li class="row14 col2"></li>
<li class="row15 col2"></li>
<li class="row16 col2"></li>
<li class="row17 col2"></li>
<li class="row18 col2"></li>
<li class="row19 col2"></li>
<li class="row20 col2"></li>
<li class="row21 col2"></li>
<li class="row22 col2"></li>
<li class="row23 col2"></li>
<li class="row24 col2"></li>
<li class="row25 col2"></li>
<li class="row26 col2"></li>
<li class="row27 col2"></li>
<li class="row28 col2"></li>
<li class="row29 col2"></li>
<li class="row30 col2"></li>
<li class="row1 col3"></li>
<li class="row2 col3"></li>
<li class="row3 col3"></li>
<li class="row4 col3"></li>
<li class="row5 col3"></li>
<li class="row6 col3"></li>
<li class="row7 col3"></li>
<li class="row8 col3"></li>
<li class="row9 col3"></li>
<li class="row10 col3"></li>
<li class="row11 col3"></li>
<li class="row12 col3"></li>
<li class="row13 col3"></li>
<li class="row14 col3"></li>
<li class="row15 col3"></li>
<li class="row16 col3"></li>
<li class="row17 col3"></li>
<li class="row18 col3"></li>
<li class="row19 col3"></li>
<li class="row20 col3"></li>
<li class="row21 col3"></li>
<li class="row22 col3"></li>
<li class="row23 col3"></li>
<li class="row24 col3"></li>
<li class="row25 col3"></li>
<li class="row26 col3"></li>
<li class="row27 col3"></li>
<li class="row28 col3"></li>
<li class="row29 col3"></li>
<li class="row30 col3"></li>
<li class="row1 col4"></li>
<li class="row2 col4"></li>
<li class="row3 col4"></li>
<li class="row4 col4"></li>
<li class="row5 col4"></li>
<li class="row6 col4"></li>
<li class="row7 col4"></li>
<li class="row8 col4"></li>
<li class="row9 col4"></li>
<li class="row10 col4"></li>
<li class="row11 col4"></li>
<li class="row12 col4"></li>
<li class="row13 col4"></li>
<li class="row14 col4"></li>
<li class="row15 col4"></li>
<li class="row16 col4"></li>
<li class="row17 col4"></li>
<li class="row18 col4"></li>
<li class="row19 col4"></li>
<li class="row20 col4"></li>
<li class="row21 col4"></li>
<li class="row22 col4"></li>
<li class="row23 col4"></li>
<li class="row24 col4"></li>
<li class="row25 col4"></li>
<li class="row26 col4"></li>
<li class="row27 col4"></li>
<li class="row28 col4"></li>
<li class="row29 col4"></li>
<li class="row30 col4"></li>
<li class="row1 col5"></li>
<li class="row2 col5"></li>
<li class="row3 col5"></li>
<li class="row4 col5"></li>
<li class="row5 col5"></li>
<li class="row6 col5"></li>
<li class="row7 col5"></li>
<li class="row8 col5"></li>
<li class="row9 col5"></li>
<li class="row10 col5"></li>
<li class="row11 col5"></li>
<li class="row12 col5"></li>
<li class="row13 col5"></li>
<li class="row14 col5"></li>
<li class="row15 col5"></li>
<li class="row16 col5"></li>
<li class="row17 col5"></li>
<li class="row18 col5"></li>
<li class="row19 col5"></li>
<li class="row20 col5"></li>
<li class="row21 col5"></li>
<li class="row22 col5"></li>
<li class="row23 col5"></li>
<li class="row24 col5"></li>
<li class="row25 col5"></li>
<li class="row26 col5"></li>
<li class="row27 col5"></li>
<li class="row28 col5"></li>
<li class="row29 col5"></li>
<li class="row30 col5"></li>
<li class="row1 col6"></li>
<li class="row2 col6"></li>
<li class="row3 col6"></li>
<li class="row4 col6"></li>
<li class="row5 col6"></li>
<li class="row6 col6"></li>
<li class="row7 col6"></li>
<li class="row8 col6"></li>
<li class="row9 col6"></li>
<li class="row10 col6"></li>
<li class="row11 col6"></li>
<li class="row12 col6"></li>
<li class="row13 col6"></li>
<li class="row14 col6"></li>
<li class="row15 col6"></li>
<li class="row16 col6"></li>
<li class="row17 col6"></li>
<li class="row18 col6"></li>
<li class="row19 col6"></li>
<li class="row20 col6"></li>
<li class="row21 col6"></li>
<li class="row22 col6"></li>
<li class="row23 col6"></li>
<li class="row24 col6"></li>
<li class="row25 col6"></li>
<li class="row26 col6"></li>
<li class="row27 col6"></li>
<li class="row28 col6"></li>
<li class="row29 col6"></li>
<li class="row30 col6"></li>
<li class="row1 col7"></li>
<li class="row2 col7"></li>
<li class="row3 col7"></li>
<li class="row4 col7"></li>
<li class="row5 col7"></li>
<li class="row6 col7"></li>
<li class="row7 col7"></li>
<li class="row8 col7"></li>
<li class="row9 col7"></li>
<li class="row10 col7"></li>
<li class="row11 col7"></li>
<li class="row12 col7"></li>
<li class="row13 col7"></li>
<li class="row14 col7"></li>
<li class="row15 col7"></li>
<li class="row16 col7"></li>
<li class="row17 col7"></li>
<li class="row18 col7"></li>
<li class="row19 col7"></li>
<li class="row20 col7"></li>
<li class="row21 col7"></li>
<li class="row22 col7"></li>
<li class="row23 col7"></li>
<li class="row24 col7"></li>
<li class="row25 col7"></li>
<li class="row26 col7"></li>
<li class="row27 col7"></li>
<li class="row28 col7"></li>
<li class="row29 col7"></li>
<li class="row30 col7"></li>
<li class="row1 col8"></li>
<li class="row2 col8"></li>
<li class="row3 col8"></li>
<li class="row4 col8"></li>
<li class="row5 col8"></li>
<li class="row6 col8"></li>
<li class="row7 col8"></li>
<li class="row8 col8"></li>
<li class="row9 col8"></li>
<li class="row10 col8"></li>
<li class="row11 col8"></li>
<li class="row12 col8"></li>
<li class="row13 col8"></li>
<li class="row14 col8"></li>
<li class="row15 col8"></li>
<li class="row16 col8"></li>
<li class="row17 col8"></li>
<li class="row18 col8"></li>
<li class="row19 col8"></li>
<li class="row20 col8"></li>
<li class="row21 col8"></li>
<li class="row22 col8"></li>
<li class="row23 col8"></li>
<li class="row24 col8"></li>
<li class="row25 col8"></li>
<li class="row26 col8"></li>
<li class="row27 col8"></li>
<li class="row28 col8"></li>
<li class="row29 col8"></li>
<li class="row30 col8"></li>
<li class="row1 col9"></li>
<li class="row2 col9"></li>
<li class="row3 col9"></li>
<li class="row4 col9"></li>
<li class="row5 col9"></li>
<li class="row6 col9"></li>
<li class="row7 col9"></li>
<li class="row8 col9"></li>
<li class="row9 col9"></li>
<li class="row10 col9"></li>
<li class="row11 col9"></li>
<li class="row12 col9"></li>
<li class="row13 col9"></li>
<li class="row14 col9"></li>
<li class="row15 col9"></li>
<li class="row16 col9"></li>
<li class="row17 col9"></li>
<li class="row18 col9"></li>
<li class="row19 col9"></li>
<li class="row20 col9"></li>
<li class="row21 col9"></li>
<li class="row22 col9"></li>
<li class="row23 col9"></li>
<li class="row24 col9"></li>
<li class="row25 col9"></li>
<li class="row26 col9"></li>
<li class="row27 col9"></li>
<li class="row28 col9"></li>
<li class="row29 col9"></li>
<li class="row30 col9"></li>
<li class="row1 col10"></li>
<li class="row2 col10"></li>
<li class="row3 col10"></li>
<li class="row4 col10"></li>
<li class="row5 col10"></li>
<li class="row6 col10"></li>
<li class="row7 col10"></li>
<li class="row8 col10"></li>
<li class="row9 col10"></li>
<li class="row10 col10"></li>
<li class="row11 col10"></li>
<li class="row12 col10"></li>
<li class="row13 col10"></li>
<li class="row14 col10"></li>
<li class="row15 col10"></li>
<li class="row16 col10"></li>
<li class="row17 col10"></li>
<li class="row18 col10"></li>
<li class="row19 col10"></li>
<li class="row20 col10"></li>
<li class="row21 col10"></li>
<li class="row22 col10"></li>
<li class="row23 col10"></li>
<li class="row24 col10"></li>
<li class="row25 col10"></li>
<li class="row26 col10"></li>
<li class="row27 col10"></li>
<li class="row28 col10"></li>
<li class="row29 col10"></li>
<li class="row30 col10"></li>
<li class="row1 col11"></li>
<li class="row2 col11"></li>
<li class="row3 col11"></li>
<li class="row4 col11"></li>
<li class="row5 col11"></li>
<li class="row6 col11"></li>
<li class="row7 col11"></li>
<li class="row8 col11"></li>
<li class="row9 col11"></li>
<li class="row10 col11"></li>
<li class="row11 col11"></li>
<li class="row12 col11"></li>
<li class="row13 col11"></li>
<li class="row14 col11"></li>
<li class="row15 col11"></li>
<li class="row16 col11"></li>
<li class="row17 col11"></li>
<li class="row18 col11"></li>
<li class="row19 col11"></li>
<li class="row20 col11"></li>
<li class="row21 col11"></li>
<li class="row22 col11"></li>
<li class="row23 col11"></li>
<li class="row24 col11"></li>
<li class="row25 col11"></li>
<li class="row26 col11"></li>
<li class="row27 col11"></li>
<li class="row28 col11"></li>
<li class="row29 col11"></li>
<li class="row30 col11"></li>
<li class="row1 col12"></li>
<li class="row2 col12"></li>
<li class="row3 col12"></li>
<li class="row4 col12"></li>
<li class="row5 col12"></li>
<li class="row6 col12"></li>
<li class="row7 col12"></li>
<li class="row8 col12"></li>
<li class="row9 col12"></li>
<li class="row10 col12"></li>
<li class="row11 col12"></li>
<li class="row12 col12"></li>
<li class="row13 col12"></li>
<li class="row14 col12"></li>
<li class="row15 col12"></li>
<li class="row16 col12"></li>
<li class="row17 col12"></li>
<li class="row18 col12"></li>
<li class="row19 col12"></li>
<li class="row20 col12"></li>
<li class="row21 col12"></li>
<li class="row22 col12"></li>
<li class="row23 col12"></li>
<li class="row24 col12"></li>
<li class="row25 col12"></li>
<li class="row26 col12"></li>
<li class="row27 col12"></li>
<li class="row28 col12"></li>
<li class="row29 col12"></li>
<li class="row30 col12"></li>
<li class="row1 col13"></li>
<li class="row2 col13"></li>
<li class="row3 col13"></li>
<li class="row4 col13"></li>
<li class="row5 col13"></li>
<li class="row6 col13"></li>
<li class="row7 col13"></li>
<li class="row8 col13"></li>
<li class="row9 col13"></li>
<li class="row10 col13"></li>
<li class="row11 col13"></li>
<li class="row12 col13"></li>
<li class="row13 col13"></li>
<li class="row14 col13"></li>
<li class="row15 col13"></li>
<li class="row16 col13"></li>
<li class="row17 col13"></li>
<li class="row18 col13"></li>
<li class="row19 col13"></li>
<li class="row20 col13"></li>
<li class="row21 col13"></li>
<li class="row22 col13"></li>
<li class="row23 col13"></li>
<li class="row24 col13"></li>
<li class="row25 col13"></li>
<li class="row26 col13"></li>
<li class="row27 col13"></li>
<li class="row28 col13"></li>
<li class="row29 col13"></li>
<li class="row30 col13"></li>
<li class="row1 col14"></li>
<li class="row2 col14"></li>
<li class="row3 col14"></li>
<li class="row4 col14"></li>
<li class="row5 col14"></li>
<li class="row6 col14"></li>
<li class="row7 col14"></li>
<li class="row8 col14"></li>
<li class="row9 col14"></li>
<li class="row10 col14"></li>
<li class="row11 col14"></li>
<li class="row12 col14"></li>
<li class="row13 col14"></li>
<li class="row14 col14"></li>
<li class="row15 col14"></li>
<li class="row16 col14"></li>
<li class="row17 col14"></li>
<li class="row18 col14"></li>
<li class="row19 col14"></li>
<li class="row20 col14"></li>
<li class="row21 col14"></li>
<li class="row22 col14"></li>
<li class="row23 col14"></li>
<li class="row24 col14"></li>
<li class="row25 col14"></li>
<li class="row26 col14"></li>
<li class="row27 col14"></li>
<li class="row28 col14"></li>
<li class="row29 col14"></li>
<li class="row30 col14"></li>
<li class="row1 col15"></li>
<li class="row2 col15"></li>
<li class="row3 col15"></li>
<li class="row4 col15"></li>
<li class="row5 col15"></li>
<li class="row6 col15"></li>
<li class="row7 col15"></li>
<li class="row8 col15"></li>
<li class="row9 col15"></li>
<li class="row10 col15"></li>
<li class="row11 col15"></li>
<li class="row12 col15"></li>
<li class="row13 col15"></li>
<li class="row14 col15"></li>
<li class="row15 col15"></li>
<li class="row16 col15"></li>
<li class="row17 col15"></li>
<li class="row18 col15"></li>
<li class="row19 col15"></li>
<li class="row20 col15"></li>
<li class="row21 col15"></li>
<li class="row22 col15"></li>
<li class="row23 col15"></li>
<li class="row24 col15"></li>
<li class="row25 col15"></li>
<li class="row26 col15"></li>
<li class="row27 col15"></li>
<li class="row28 col15"></li>
<li class="row29 col15"></li>
<li class="row30 col15"></li>
<li class="row1 col16"></li>
<li class="row2 col16"></li>
<li class="row3 col16"></li>
<li class="row4 col16"></li>
<li class="row5 col16"></li>
<li class="row6 col16"></li>
<li class="row7 col16"></li>
<li class="row8 col16"></li>
<li class="row9 col16"></li>
<li class="row10 col16"></li>
<li class="row11 col16"></li>
<li class="row12 col16"></li>
<li class="row13 col16"></li>
<li class="row14 col16"></li>
<li class="row15 col16"></li>
<li class="row16 col16"></li>
<li class="row17 col16"></li>
<li class="row18 col16"></li>
<li class="row19 col16"></li>
<li class="row20 col16"></li>
<li class="row21 col16"></li>
<li class="row22 col16"></li>
<li class="row23 col16"></li>
<li class="row24 col16"></li>
<li class="row25 col16"></li>
<li class="row26 col16"></li>
<li class="row27 col16"></li>
<li class="row28 col16"></li>
<li class="row29 col16"></li>
<li class="row30 col16"></li>
</ul>
</div>
<div id="reset">start</div>
<script type="text/javascript">
// 99个雷
// 随机布置99雷
// 根据雷布置数字
// 剩余的布置空白.
// 点击的瞬间,根据标记,显示相应的样式.
// 点击雷,所有布置全部显示
// 点击数字,只显示数字
// 点击空白,所有空白全部显示,包围的数字全部显示.
// 生成一个二维数组
function getArr () {
var arr = [];
for(var i = 0;i < 30;i++) {
arr[i] = [];
for(var j = 0; j < 16; j++){
arr[i][j] = 'empty';
}
}
return arr;
}
var arr = getArr();
// 返回一个随机数字
function returnRandomNumber (a,b) {
return Math.floor(Math.random() * (b - a) + a);
}
//生成雷区
function getBomArr (arr,num) {
var num = num || 99;
var newArr = [];
while (num--){
var i = returnRandomNumber (0,30);
var j = returnRandomNumber (0,16);
if(arr[i][j] === 'empty'){
arr[i][j] = 'boom';
newArr.push(arr[i][j]);
}else{
num++;
}
}
return newArr;
}
var bomArr = getBomArr(arr,99);
//遍历周围方块.
function bianli (arr,i,j) {
var i1 = i - 1;
var j1 = j - 1;
var i2 = i + 1;
var j2 = j + 1;
var num = 0;
for(var q = i1;q <= i2;q++) {
for(var p = j1; p <= j2;p++){
if(arr[q] && arr[q][p] && arr[q][p] === 'boom'){
num++;
}
}
}
return num;
}
//生成数字区
//规则
//遍历周围八个方块,有几个雷,就显示几.
function getNumber (arr) {
var newArr = [];
for(var i = 0; i < 30;i++) {
for(var j = 0; j < 16;j++) {
if(arr[i][j] !=='boom' && bianli(arr,i,j) !== 0) {
arr[i][j] = bianli(arr,i,j);
newArr.push(arr[i][j]);
}
}
}
return newArr;
}
var numArr = getNumber(arr);
console.log(numArr);
//现在假设 标记做完了.
//点击元素时,要要找数据,找到数据后,还要找到元素.
//根据类名获取类名中的 i 和 j
function getIandJ (className) {
var reg = /\d+/g;
return className.match(reg);
}
ul.onclick = function (e) {
if(e.target.tagName === 'LI'){
var i = getIandJ (e.target.className)[0] - 1;// 因为一开始在标签标记时,是从1开始的
var j = getIandJ (e.target.className)[1] - 1;
chuli(arr,i,j);
}
}
function chuli (arr,i,j) {// 要处理几个,哪些
if(arr[i][j] === 'boom'){
renderBom(arr,i,j);
}else if(arr[i][j] === 'empty'){
renderEmp(arr,i,j);
}else {
renderNum(arr,i,j);
}
}
function renderNum (arr,i,j) {
render(i,j);
}
var mark = {};
function renderEmp (arr,i,j) {// 扩散这部分是最难的.要循环,还要找出口.我们需要给已经
var i1 = i - 1;
var i2 = i + 1;
var j1 = j - 1;
var j2 = j + 1;
for(var q = i1;q <= i2;q++) {
for(var p = j1;p <= j2;p++) {
if(arr[q] && arr[q][p] && arr[q][p] !== 'boom' && !mark[q + '&' + p]) {
render(q,p);
mark[q + '&' + p] = true;
if(arr[q][p] === 'empty'){
renderEmp(arr,q,p);
}
}
}
}
}
function renderBom (arr,i,j) {// 每一个都进行渲染.
var len1 = arr.length;
var len2 = arr[0].length;
for(var q = 0; q < len1;q++) {
for(var p = 0; p < len2;p++) {
if(arr[q][p] == 'boom'){
render(q,p);
}
console.log(q,p);
}
}
redBom(i,j);
}
function render (q,p) {//具体怎么处理不同元素.
var bom = document.getElementsByClassName('row' + (q + 1)+ ' col' + (p + 1))[0];
console.log(q,p);
if(arr[q][p] == 'boom') {
bom.innerText = 'O';
bom.style.backgroundColor = '#EC1A5A';
}else if(arr[q][p] == 'empty') {
bom.innerText = ' ';
bom.style.backgroundColor = '#FF00FF';
}else {
bom.innerText = arr[q][p];
bom.style.backgroundColor = 'greenyellow';
switch (arr[q][p]){
case 1:
bom.style.color = 'purple';
break;
case 2:
bom.style.color = 'peru';
break;
case 3:
bom.style.color = '#00438A';
break;
case 4:
bom.style.color = 'navy';
break;
case 5:
bom.style.color = 'orange';
break;
case 6:
bom.style.color = 'brown';
break;
default:
break;
}
}
}
function redBom (i,j) {
var bom = document.getElementsByClassName('row' + (i + 1)+ ' col' + (j + 1))[0];
bom.style.backgroundColor = 'black';
}
//右键标记
ul.oncontextmenu = function (e) {
if(e.target.tagName === 'LI') {
if(!e.target.innerText){
e.target.innerText = '?';
}else if(e.target.innerText == '?'){
e.target.innerText = 'M';
}else if(e.target.innerText == 'M') {
e.target.innerText = ' ';
}
}
e.preventDefault();
}
var timer = null;
reset.onclick = function (e) {
window.location.reload();
clearInterval(timer);
}
</script>
</body>
</html>
|
