扫雷游戏收获

扫雷游戏规则

• 游戏规则：面板中格子上显示的数字为周围格子中地雷的数量。
• 算法思考：
  除了自身之外。周围有8个格子（上下左右+4个斜角），所以数字微0～8，假设地雷为9
  根据用户选择的不同难易程度（初中高级别，级别越高，格子和地雷数越多），随机产生一定数量的地雷，并随机放到格子中。然后遍历格子，计算每个格子上的数字，并标在格子上。
  玩家左键点击，显示格子的内容（如果遇到地雷，则失败游戏结束）；右键点击为标记地雷位置。
  直到正确标记所有地雷，点击打开所有非地雷，成功，游戏结束。

具体代码

• html：
  1.将JS代码在body底部引入，优化加载性能。引入了两个js代码
  2.游戏面板表格只引入了一个表格table
  3.具体的计数器和计时器，要单独引入span行内元素，并设置class和id，便于样式设定和事件设定。
  4.块级元素可自动换行，行内元素需要设置换行。
  5.按钮上的字在input的value特性中设置

HTML

• rowspan属性：td标签的属性，横跨两行的表格，即合并单元格。
• label标签：一般和input元素一起使用，为Input元素做标注。

为鼠标改进，常用在单选框和复选框。当用户点击label标签中的文字时，浏览器将自动将焦点转到和该标签关联的控件上。
点击该标签按钮时，其对应文本也会被选中。

for特性：关联的控件Id，一半指input元素的Id

• fieldset标签：为表单元素分组并绘制边框。
  legend标签：为边框设置标题。

CSS

• position属性：规定了元素定位类型。

• absolute：绝对定位，相对于它的第一个父元素
• fixed：绝对定位，相对于窗口
• relative：相对定位，相对于元素正常状态，元素本来的位置会保留
• static：默认值
• inherit：继承父元素

CSS三种定位机制：文档流，定位，浮动

• CSS浮动：浮动会脱离文档流，不占据空间。
  若同时设置浮动，会达到并排的效果。
  因为浮动元素不占据空间，可能存在浮动元素不属于容器。
• 盒子设置：上右下左
• div水平居中：
  1.需要body设置text-align:center
  2.需要div设置margin:0 auto