以下是 jQuery经典扫雷游戏源码js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery经典扫雷游戏源码下载</title>
<style type="text/css">
body.caution {
cursor: help ;
}
table.mine-sweeper {}
table.mine-sweeper td {
background-color: #F0F0F0 ;
border: 1px solid #333333 ;
cursor: pointer ;
height: 25px ;
line-height: 25px ;
overflow: hidden ;
text-align: center ;
width: 25px ;
}
table.mine-sweeper td.active {
background-color: #D8D8D8 ;
}
table.mine-sweeper td.bomb {
font-weight: bold ;
}
table.mine-sweeper td.bombed {
background-color: #FFD0D0 ;
color: #CC0000 ;
font-weight: bold ;
}
table.mine-sweeper td.caution {
background-color: #FFD0D0 ;
color: #CC0000 ;
font-weight: bold ;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.randrange.js"></script>
<script type="text/javascript" src="js/jquery.repeatstring.js"></script>
<script type="text/javascript" src="js/jquery.randomfilter.js"></script>
<script type="text/javascript" src="js/jquery.near.js"></script>
<script type="text/javascript" src="js/jquery.minesweeper.js"></script>
<script type="text/javascript">
// When the DOM is ready, build the mine sweeper game.
jQuery(function( $ ){
var mineSweerper = new MineSweeper(
$( "table.mine-sweeper" ),
10,
10,
"10%"
);
});
</script>
</head>
<body>
<center>
<h1>jQuery扫雷小游戏</h1>
<table cellspacing="2" class="mine-sweeper"><tbody>
<tr><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td></tr>
<tr><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active bomb"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td></tr>
<tr><td class="active bomb"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active bomb"> </td><td class="active"> </td></tr>
<tr><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td></tr>
<tr><td class="active"> </td><td class="active bomb"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="">1</td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td></tr>
<tr><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active bomb"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td></tr>
<tr><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td></tr>
<tr><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active bomb"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td></tr>
<tr><td class="active"> </td><td class="active bomb"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active bomb"> </td><td class="active"> </td></tr>
<tr><td class="active"> </td><td class="active bomb"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active bomb"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td><td class="active"> </td></tr></tbody></table>
</center>
</body>
</html>
JS代码(jquery.randrange.js):
(function( $ ){
// I get a random value between the min and max values// (inclusive). The min and max values are expected to be// interger values.$.randRange = function( minValue,maxValue ){
// Get the range of our random values.var delta = (maxValue - minValue);
// Select a random number for our range and truncate it.var randomValue = Math.floor( Math.random() * delta );
// Get a random value by adding the random selection to// our min value.return( minValue + randomValue );
}
;
}
)( jQuery );
分享到QQ
分享到微博
微信扫一扫
