javascript 扫雷
糊里糊涂的做了个javascript版的扫雷，只是按照我个人的思路去做，应该很多实现的思路都很欠佳。不过总的来说这次也有不少的收获。懂得了很多细节的实现。
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-compatible" content="IE=EmulateIE7">
<style type="text/css">
body{
color:white;
text-algin:center;
background:#141414;
}
#containter{
margin:40px auto 0;
width:152px;
background:#141414;
}
#restart{
float:left;
cursor:pointer;
margin-right:20px;
width:80px;
height:20px;
font:12px "宋体";
text-align:center;
line-height:20px;
vertical-align:middle;
background:#a22024;
}
input{
margin-right:20px;
width:20px;
border:1px solid #82a500;
}
.box{
display:inline;
overflow:hidden;
float:left;
margin:1px;
width:24px;
height:24px;
cursor:pointer;
font:18px/24px Arial;
text-align:center;
background:#82a500;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<a id="restart" onclick="javascirpt:game.init();">重新开始</a>
<label>行3-30</label><input id="rawCount" type="text" /><label>列3-30</label><input id="colCount" type="text" /><label>雷</label><input id="mineCount" type="text" />
<div id="containter"></div>
</body>
</html>
<script type="text/javascript">
function ClearMine()
{
// 私有属性
var def_Raw = 8;
var def_Col = 8;
var def_Count = 10;
var m_raw;
var m_col;
var m_count;
var m_total;
var openCount = 0;
// 初始化
this.init = function()
{
m_raw = document.getElementById("rawCount").value || def_Raw;
m_col = document.getElementById("colCount").value || def_Col;
m_count = document.getElementById("mineCount").value || def_Count;
m_total = m_raw * m_col;
if (m_raw < 3 || m_raw > 30 || m_col < 3 || m_col > 30 || m_count < 1 || m_count > m_total)
{
alert("输入有误");
return;
}
// 重新清0
openCount = 0;
try{
m_position = new Array(m_total);
} catch (e)
{
alert("输入有误");
return;
}
// 布局
this.setLayout();
this.setMine();
var cont = document.getElementById("containter");
var boxWidth = cont.getElementsByTagName("a")[0].offsetWidth;
cont.style.width = (boxWidth + 2) * m_col + "px"; // 2 = margin-left + margin-right
}
// 设置页面
this.setLayout = function()
{
var layout = "";
for (i = 0; i < m_total; i++)
{
layout += "<a class='box' onclick='javascript:game.process(game.getLocation(this));' oncontextmenu='javascript:game.rightClick(game.getLocation(this));return false;'></a>";
}
layout += "<div class='clear'></div>";
document.getElementById("containter").innerHTML = layout;
}
// 设置雷局
this.setMine = function()
{
for (i = 0; i < m_count; i++)
{
var location = parseInt(Math.random() * m_total);
while (m_position[location] == -1)
{
location = parseInt(Math.random() * m_total);
}
m_position[location] = -1;
}
for (i = 0; i < m_total; i++)
{
m_position[i] = this.getAmount(i);
}
}
// 点击处理
this.process = function(n)
{
if (m_position[n] > 0)
{
this.setIcon(n);
if (m_total - m_count <= ++openCount)
this.win();
}
else if (m_position[n] == 0)
{
var x = n % m_col;
var y = parseInt(n / m_col);
this.extendOut(x, y);
}
if (m_position[n] == -1)
{
for (i = 0; i < m_total; i++)
{
if (m_position[i] == -1)
{
this.setIcon(i);
}
else
{
m_position[i] = -2;
}
}
}
}
// 右击
this.rightClick = function(n)
{
if (this.getElement(n).innerHTML == "")
this.getElement(n).innerHTML = "▲";
else if (this.getElement(n).innerHTML == "▲")
this.getElement(n).innerHTML = "?";
else if (this.getElement(n).innerHTML == "?")
this.getElement(n).innerHTML = "";
}
// 设置雷格图标
this.setIcon = function(n)
{
this.getElement(n).innerHTML = (m_position[n] == -1) ? "●" : m_position[n];
m_position[n] = -2;
this.getElement(n).style.background = "#aeaeae";
}
// 周边雷的个数
this.getAmount = function(n)
{
var x = n % m_col;
var y = parseInt(n / m_col);
if (m_position[x + y * m_col] == -1)
return -1;
var amount = 0;
for (var i = (y - 1) > 0 ? (y - 1) : 0; i < ((y + 2) > m_raw ? m_raw : (y + 2)); i++)
for (var j = (x - 1) > 0 ? (x - 1) : 0; j < ((x + 2) > m_col ? m_col : (x + 2)); j++)
{
if (m_position[j + i * m_col] == -1)
amount++;
}
return amount;
}
// 点击的位置(第n个雷)
this.getLocation = function(obj)
{
var el = document.getElementById("containter").getElementsByTagName("a");
for (i = 0; i < el.length; i++)
{
if (el[i] == obj)
{
return i;
}
}
}
// 获取元素
this.getElement = function(n)
{
return document.getElementById("containter").getElementsByTagName("a")[n];
}
// 位置合法性
this.isLegle = function(x, y)
{
if (x < 0 || x >= m_col ||
y < 0 || y >= m_raw)
{
return false;
}
return true;
}
// 展开
this.extendOut = function(x, y)
{
var n = y * m_col + x;
if (this.isLegle(x, y))
{
if (m_position[n] == 0)
{
this.setIcon(n);
if (this.isLegle(x - 1, y) && (m_position[y * m_col + x - 1] != -2))
this.extendOut(x - 1, y);
if (this.isLegle(x - 1, y - 1) && (m_position[(y - 1) * m_col + x - 1] != -2))
this.extendOut(x - 1, y - 1);
if (this.isLegle(x - 1, y + 1) && (m_position[(y + 1) * m_col + x - 1] != -2))
this.extendOut(x - 1, y + 1);
if (this.isLegle(x, y - 1) && (m_position[(y - 1) * m_col + x] != -2))
this.extendOut(x, y - 1);
if (this.isLegle(x, y + 1) && (m_position[(y + 1) * m_col + x] != -2))
this.extendOut(x, y + 1);
if (this.isLegle(x + 1, y + 1) && (m_position[(y + 1) * m_col + x + 1] != -2))
this.extendOut(x + 1, y + 1);
if (this.isLegle(x + 1, y) && (m_position[y * m_col + x + 1] != -2))
this.extendOut(x + 1, y);
if (this.isLegle(x + 1, y - 1) && (m_position[(y - 1) * m_col + x + 1] != -2))
this.extendOut(x + 1, y - 1);
openCount++;
}
else if (m_position[n] != -1)
{
this.setIcon(n);
openCount++;
}
if (m_total - m_count <= openCount)
this.win();
}
return;
}
// 显示赢了
this.win = function()
{
for (i = 0; i < m_total; i++)
{
if (m_position[i] == -1)
this.getElement(i).innerHTML = "▲";
}
alert("你赢了");
}
}
var game = new ClearMine();
game.init();
</script
代码如下：
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-compatible" content="IE=EmulateIE7">
<style type="text/css">
body{
color:white;
text-algin:center;
background:#141414;
}
#containter{
margin:40px auto 0;
width:152px;
background:#141414;
}
#restart{
float:left;
cursor:pointer;
margin-right:20px;
width:80px;
height:20px;
font:12px "宋体";
text-align:center;
line-height:20px;
vertical-align:middle;
background:#a22024;
}
input{
margin-right:20px;
width:20px;
border:1px solid #82a500;
}
.box{
display:inline;
overflow:hidden;
float:left;
margin:1px;
width:24px;
height:24px;
cursor:pointer;
font:18px/24px Arial;
text-align:center;
background:#82a500;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<a id="restart" onclick="javascirpt:game.init();">重新开始</a>
<label>行3-30</label><input id="rawCount" type="text" /><label>列3-30</label><input id="colCount" type="text" /><label>雷</label><input id="mineCount" type="text" />
<div id="containter"></div>
</body>
</html>
<script type="text/javascript">
function ClearMine()
{
// 私有属性
var def_Raw = 8;
var def_Col = 8;
var def_Count = 10;
var m_raw;
var m_col;
var m_count;
var m_total;
var openCount = 0;
// 初始化
this.init = function()
{
m_raw = document.getElementById("rawCount").value || def_Raw;
m_col = document.getElementById("colCount").value || def_Col;
m_count = document.getElementById("mineCount").value || def_Count;
m_total = m_raw * m_col;
if (m_raw < 3 || m_raw > 30 || m_col < 3 || m_col > 30 || m_count < 1 || m_count > m_total)
{
alert("输入有误");
return;
}
// 重新清0
openCount = 0;
try{
m_position = new Array(m_total);
} catch (e)
{
alert("输入有误");
return;
}
// 布局
this.setLayout();
this.setMine();
var cont = document.getElementById("containter");
var boxWidth = cont.getElementsByTagName("a")[0].offsetWidth;
cont.style.width = (boxWidth + 2) * m_col + "px"; // 2 = margin-left + margin-right
}
// 设置页面
this.setLayout = function()
{
var layout = "";
for (i = 0; i < m_total; i++)
{
layout += "<a class='box' onclick='javascript:game.process(game.getLocation(this));' oncontextmenu='javascript:game.rightClick(game.getLocation(this));return false;'></a>";
}
layout += "<div class='clear'></div>";
document.getElementById("containter").innerHTML = layout;
}
// 设置雷局
this.setMine = function()
{
for (i = 0; i < m_count; i++)
{
var location = parseInt(Math.random() * m_total);
while (m_position[location] == -1)
{
location = parseInt(Math.random() * m_total);
}
m_position[location] = -1;
}
for (i = 0; i < m_total; i++)
{
m_position[i] = this.getAmount(i);
}
}
// 点击处理
this.process = function(n)
{
if (m_position[n] > 0)
{
this.setIcon(n);
if (m_total - m_count <= ++openCount)
this.win();
}
else if (m_position[n] == 0)
{
var x = n % m_col;
var y = parseInt(n / m_col);
this.extendOut(x, y);
}
if (m_position[n] == -1)
{
for (i = 0; i < m_total; i++)
{
if (m_position[i] == -1)
{
this.setIcon(i);
}
else
{
m_position[i] = -2;
}
}
}
}
// 右击
this.rightClick = function(n)
{
if (this.getElement(n).innerHTML == "")
this.getElement(n).innerHTML = "▲";
else if (this.getElement(n).innerHTML == "▲")
this.getElement(n).innerHTML = "?";
else if (this.getElement(n).innerHTML == "?")
this.getElement(n).innerHTML = "";
}
// 设置雷格图标
this.setIcon = function(n)
{
this.getElement(n).innerHTML = (m_position[n] == -1) ? "●" : m_position[n];
m_position[n] = -2;
this.getElement(n).style.background = "#aeaeae";
}
// 周边雷的个数
this.getAmount = function(n)
{
var x = n % m_col;
var y = parseInt(n / m_col);
if (m_position[x + y * m_col] == -1)
return -1;
var amount = 0;
for (var i = (y - 1) > 0 ? (y - 1) : 0; i < ((y + 2) > m_raw ? m_raw : (y + 2)); i++)
for (var j = (x - 1) > 0 ? (x - 1) : 0; j < ((x + 2) > m_col ? m_col : (x + 2)); j++)
{
if (m_position[j + i * m_col] == -1)
amount++;
}
return amount;
}
// 点击的位置(第n个雷)
this.getLocation = function(obj)
{
var el = document.getElementById("containter").getElementsByTagName("a");
for (i = 0; i < el.length; i++)
{
if (el[i] == obj)
{
return i;
}
}
}
// 获取元素
this.getElement = function(n)
{
return document.getElementById("containter").getElementsByTagName("a")[n];
}
// 位置合法性
this.isLegle = function(x, y)
{
if (x < 0 || x >= m_col ||
y < 0 || y >= m_raw)
{
return false;
}
return true;
}
// 展开
this.extendOut = function(x, y)
{
var n = y * m_col + x;
if (this.isLegle(x, y))
{
if (m_position[n] == 0)
{
this.setIcon(n);
if (this.isLegle(x - 1, y) && (m_position[y * m_col + x - 1] != -2))
this.extendOut(x - 1, y);
if (this.isLegle(x - 1, y - 1) && (m_position[(y - 1) * m_col + x - 1] != -2))
this.extendOut(x - 1, y - 1);
if (this.isLegle(x - 1, y + 1) && (m_position[(y + 1) * m_col + x - 1] != -2))
this.extendOut(x - 1, y + 1);
if (this.isLegle(x, y - 1) && (m_position[(y - 1) * m_col + x] != -2))
this.extendOut(x, y - 1);
if (this.isLegle(x, y + 1) && (m_position[(y + 1) * m_col + x] != -2))
this.extendOut(x, y + 1);
if (this.isLegle(x + 1, y + 1) && (m_position[(y + 1) * m_col + x + 1] != -2))
this.extendOut(x + 1, y + 1);
if (this.isLegle(x + 1, y) && (m_position[y * m_col + x + 1] != -2))
this.extendOut(x + 1, y);
if (this.isLegle(x + 1, y - 1) && (m_position[(y - 1) * m_col + x + 1] != -2))
this.extendOut(x + 1, y - 1);
openCount++;
}
else if (m_position[n] != -1)
{
this.setIcon(n);
openCount++;
}
if (m_total - m_count <= openCount)
this.win();
}
return;
}
// 显示赢了
this.win = function()
{
for (i = 0; i < m_total; i++)
{
if (m_position[i] == -1)
this.getElement(i).innerHTML = "▲";
}
alert("你赢了");
}
}
var game = new ClearMine();
game.init();
</script
欢迎有人指教。
