<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Minesweeper</title>
<style>
img:not(.no-hide) {
display: none;
}
#left_count {
font-weight: bold;
font-size: large;
color: blue;
}
input[type='number']{
width: 50px;
}
</style>
</head>
<body>
<h1>Minesweeper</h1>
单击左键挖开方块，单击右键进行标记，
<img src="https://pansong291.wodemo.net/entry/535467/e2eb7f0e54b4029235382ab43761fe3a/flag.png" alt="flag" class="no-hide">
为有雷标记，
<img src="https://pansong291.wodemo.net/entry/535467/1a1495ab4d26edfbf6677c3cc4e1674e/flag_error.png" alt="flag_error">
<img src="https://pansong291.wodemo.net/entry/535467/16aa04faa25b750807996dd17c759319/flag_light.png" alt="flag_light">
<img src="https://pansong291.wodemo.net/entry/535467/4e07ea249ac1c542369e7c2fc436772b/mine.png" alt="mine">
<img src="https://pansong291.wodemo.net/entry/535467/3554a03e1d7582cc98b6b613d5f0b2d7/mine_burst.png" alt="mine_burst">
<img src="https://pansong291.wodemo.net/entry/535467/9e00e6192743cd88e69f3bfcb4312b4c/n0.png" alt="n0">
数字
<img src="https://pansong291.wodemo.net/entry/535467/abbc64076c9a3e226fc6f4a522aad8ba/n1.png" alt="n1" class="no-hide">
<img src="https://pansong291.wodemo.net/entry/535467/ddc730823f9998a3388f1578c65a19c8/n2.png" alt="n2">
<img src="https://pansong291.wodemo.net/entry/535467/330ee75372af397f53c86527bb8b96db/n3.png" alt="n3">
<img src="https://pansong291.wodemo.net/entry/535467/91d58b750c35ad3c4f6e7fac027d2104/n4.png" alt="n4">
<img src="https://pansong291.wodemo.net/entry/535467/f4533391d922d7bcd0da3c4de350d5f6/n5.png" alt="n5">
<img src="https://pansong291.wodemo.net/entry/535467/f2b2309528b20584a63265e8d37d03b6/n6.png" alt="n6">
<img src="https://pansong291.wodemo.net/entry/535467/b1c8c8bf57790fbe6f2d13968cb6793d/n7.png" alt="n7">
到
<img src="https://pansong291.wodemo.net/entry/535467/dfb3399f69bdaa3122ad30179c0787bb/n8.png" alt="n8" class="no-hide">
表示周围一圈的地雷个数，<br>左键点击数字可展开周围方块，前提是周围标记数等于该数字，
<img src="https://pansong291.wodemo.net/entry/535467/5d298ad78fe0f9f2a13f150dfa07120d/normal.png" alt="normal">
<img src="https://pansong291.wodemo.net/entry/535467/3f1ae4b51499469569e63ee6b4d16ef8/normal_light.png" alt="normal_light">
<img src="https://pansong291.wodemo.net/entry/535467/864cd39ee2900fb5708169e415d201a0/sweep_error.png" alt="sweep_error">
<img src="https://pansong291.wodemo.net/entry/535467/80839caaca2d86aab04b5134f2bb0359/unknown.png" alt="unknown" class="no-hide">
表示不确定是否有雷。
<img src="https://pansong291.wodemo.net/entry/535467/f94939edb692337454e275540a274135/unknown_light.png" alt="unknown_light">
<p>剩余地雷数：<span id="left_count">10</span></p>
<canvas id="myCanvas" width="100" height="100" style="border: 1px solid black">
Your browser does not support the canvas element.
</canvas>
<p>
<label>行：<input type="number" id="board_row" value="15"></label>
<label>列：<input type="number" id="board_col" value="20"></label>
<label>雷数：<input type="number" id="mine_count" value="40"></label>
<input type="button" id="btn_reset" value="新局">
</p>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://pansong291.wodemo.net/entry/535466/f3478c687d795fd5f7a8591d6f7d39b3/JsPoint.js"></script>
<script>
/**
* 图片下标
* @type {number}
*/
var id_flag = 0;
var id_flag_error = 1;
var id_flag_light = 2;
var id_mine = 3;
var id_mine_burst = 4;
var id_n = [5, 6, 7, 8, 9, 10, 11, 12, 13];
var id_normal = 14;
var id_normal_light = 15;
var id_sweep_error = 16;
var id_unknown = 17;
var id_unknown_light = 18;
/**
* 图片宽高, 目前两者大小必须相同,
* 原因参见 <code>axis2Row()</code> 和 <code>row2Axis()</code>
* @type {number}
*/
var img_width = 24;
var img_height = 24;
/**
* 地雷个数, 棋盘行数, 列数, 总格数, 边框厚度
* @type {number}
*/
var mine_count;
var board_row;
var board_col;
var board_total;
var board_border = 2;
/**
* 棋盘位置属性: 左上右下
* @type{number}
*/
var board_left;
var board_top;
var board_right;
var board_bottom;
var border_color = 'white';
/**
* 棋盘状态
* @type {[][]}
*/
var board_states = [];
/**
* 地雷分布
* @type {[][]}
*/
var mine_map = [];
/**
* 上一次的选择点
*/
var lastPoint = new JsPoint(-1, -1);
/**
* 挖开的块的个数
* @type {number}
*/
var sweepCount;
/**
* 游戏是否结束
* @type {boolean}
*/
var gameOver;
var $imgs;
var $left_count;
var $board_row;
var $board_col;
var $mine_count;
window.onload = function () {
$left_count = $('#left_count');
$imgs = $('img');
$board_row = $('#board_row');
$board_col = $('#board_col');
$mine_count = $('#mine_count');
var $canvas = $('#myCanvas');
var cxt = $canvas[0].getContext('2d');
reset($canvas, cxt);
$canvas
.mousemove(function (eve) {
let sel_x = axis2Row(eve.offsetY - board_border);
let sel_y = axis2Row(eve.offsetX - board_border);
let img_id;
if (!isOutside(lastPoint.x, lastPoint.y)) {
switch (board_states[lastPoint.x][lastPoint.y]) {
case id_normal_light:
img_id = id_normal;
break;
case id_flag_light:
img_id = id_flag;
break;
case id_unknown_light:
img_id = id_unknown;
break;
default:
img_id = undefined;
}
if (img_id !== undefined) {
drawMineBlock(cxt, lastPoint.x, lastPoint.