“扫雷”游戏是一款经典益智小游戏。游戏目标是在最短的时间内找出所有非雷格子，同时避免踩雷，踩到一个雷即全盘皆输。本节介绍“扫雷”游戏随机布雷功能的设计与实现。
1.案例呈现
“扫雷”游戏在游戏区域有100个单元格，其中90个代表草地，10个代表地雷，地雷在游戏区域的位置是随机的。每次刷新页面，10个地雷位置随机改变。随机布雷效果，如图5-11所示。
图5-11 随机布雷
2.案例分析
“扫雷”游戏在游戏区域有100个单元格，其中90个代表草地，10个代表地雷。将草地用对象{mine: 0}表示，地雷用对象{mine: 1}表示。将游戏区域看做长度为100的数组，元素由90个{mine: 0}对象和10个{mine: 1}对象组成。随机布雷问题转换为使数组中的10个元素{mine: 1}对象出现在不同的索引位置。
3.案例实现
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <link rel="stylesheet" href="demo.css">
5 </head>
6 <body>
7 <script>
8 var mineMap = [];
9 for(var i=0;i<100;i++){
10 mineMap[mineMap.length] = { mine: 0 };
11 }
12 var minesNum = 10;
13 while (minesNum) {
14 var mineIndex = Math.floor(Math.random() * 100);
15 if (mineMap[mineIndex].mine === 0) {
16 mineMap[mineIndex].mine = 1;
17 minesNum--;
18 }
19 }
20 var s = ' <div class="box" id="box">';
21 for(var i=0;i<100;i++){
22 if(mineMap[i].mine === 0){
23 s += '<div class="block"></div>';
24 }
25 else{
26 s += '<div class="dilei"></div>';
27 }
28 }
29 s += ' </div>';
30 document.write(s);
31 </script>
32 </body>
33 </html>
上述程序中，第4行代码引入了案例用的CSS样式，CSS代码详见本书源码。第8-11行代码声明并初始化了数组mineMap，它包含100个元素{mine:0}。第12-19行代码将数组的10个元素随机修改为{mine:1}。第20-30行向页面输出了90个“<div class="dilei"></div>”标签和10个“<div class="dilei"></div>”标签。